当前位置: 代码迷 >> Web前端 >> 犀利的jQuery笔记:第3章
  详细解决方案

犀利的jQuery笔记:第3章

热度:62   发布时间:2012-10-21 09:00:07.0
锋利的jQuery笔记:第3章
第三章   DOM操作
   3.1DOM操作的分类
        一般来说,DOM操作分为3个方面,DOM Core(核心),HTML-DOM和CSS-DOM
    
   3.2.1查找节点
    1.查找元素节点
    2.查找属性节点
     利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。
       attr()方法的参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字。
   
    3.2.2创建节点
    1.创建元素节点
                //创建两个节点
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
//添加到ul中
$("ul").append($li_1);
$("ul").append($li_2);
    2.创建文本节点
                //创建两个节点
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>桔子</li>");
//添加到ul中
$("ul").append($li_1);
$("ul").append($li_2);
    3.创建属性节点
        与创建文本节点类似
  
    3.2.3插入节点
    3.2.3删除节点
      remove()和empty()
      empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。

   3.2.5复制节点
        clone()方法来完成。

   3.2.6替换节点
      replaceWith()和replaceAll().
   3.2.7包裹节点
       wrap()方法 ,wrapAll(), wrapInner()

   3.2.8属性操作
      removeAttr():删除元素属性。
       //删除<p>元素的title属性
         $("p").removeAttr("title");
      获取属性:var $para=$("p");
                var p_txt=$para.attr("title");
      设置属性:
               $("p").attr("title","值的内容"); //设置单个属性值

   3.2.9样式操作
        1.获取样式和设置样式
           都是用attr()方法来完成
        2.追加样式。
             addClass()方法
        3.移除样式
           removeClass()方法
        4.切换样式
          toggle()
          toggleClass():样式上的重复切换
        5.判断是否含有某个样式
           hasClass()
  3.2.10设置和获取HTML,文本和值
      1.html()方法 :用来读取或者设置某个元素中的HTML内容。
      2.text()方法:  用来读取或者设置某个元素中的文本内容。
      3.val()方法:可以用来设置和获取元素的值。

   
       $("p").attr("title":"your title","name:":"test");

       this指向当前的文本框,this.defaultValue就是当前文本框的默认值。

      val()方法有另外一个用处,就是它能使select(下拉列表框),checkbox(多选框),radio(单选框)相应的 

   选项被选中。
      val()方法是从最后一个选项往前读取。
     也可以用attr()方法来实现同样的功能。
  

   3.2.11遍历节点
     children():取得匹配元素的子元素集合。
     next():用于匹配元素后面紧邻的同辈元素。
     prev():用于匹配元素前面紧邻的同辈元素。
     siblings():用于匹配元素前后所有的同辈元素。
     closest():它用来取得最近的匹配元素。

   3.2.12 CSS-DOM操作
     直接利用css()方法获取元素的样式属性
       $("p").css("color");
   
     直接利用css()方法设置某个元素
       $("p").css("color","red");
       $("p").css({"fontSize":"30px","backgroundColor":"#888888"});
    
     设置透明度
        $("p").css("opacity","0.5");
    
     获取高度两种方法
        $(element).css("heigth");
        $("p").heigth();
       heigth()方法也能用来设置元素的高度。

 
第四章  jQuery事件和动画
       4.1 jQuery中的事件
       4.1.1加载DOM
         在常规的JavaScript代码中,通常使用wiondow.onload方法,而在jQuery中,使用的是
           $(document).ready()方法。
       
      $(document).ready(function(){
         //
       })
     简写:
         $(fuuction(){
           //
         })

       4.1.2事件绑定
         bind(type [,data],fn);
         bind()方法有3个参数
         第1个参数是事件类型
         第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
         第3个参数则是用来绑定的处理函数。
  相关解决方案