jQuery DOM操作

DOM：Document Object Model（文档对象模型）

　　其由3部分组成：DOM Core(核心)、HTML-DOM、CSS-DOM

• DOM Core

  document.getElementsByTagName('from'); // 获取表单对象
  
  element.getAttribute('src'); // 获取元素的“src”属性

• HTML-DOM

  document.forms; // 获取表单对象
  
  element.src; // 获取元素的 src 属性

• CSS-DOM

  element.style.color = 'red';
  

　　ψ jQuery - DOM操作

    $('ul li:eq(1)').text();

    $('p').attr('title'); // .attr()：属性操作

    var $li_1 = $('<li>111</li>');

    var $li_2 = $('</p>');

    $('ul').append($li_1); // .append()

    $('ul').append($li_2);

1. 插入节点的方法

   // 向指定的元素 A 内部追加内容 B    
   $(A).append(B); 
   
   // 将所有匹配的元素 B 追加到指定的元素 A 中    
   $(B).appendTo(A);
   
   // 向每个匹配的元素 A 内部前置内容 B    
   $(A).prepend(B); 
   
   // 将所有匹配的元素 B 前置到指定的元素 A 中    
   $(B).prependTo(A); 
   
   // 在每个匹配的元素 A 之后插入内容 B    
   $(A).after(B); 
   
   // 将所有匹配的元素 B 插入到指定元素 A 的后面    
   $(B).insertAfter(A); 
   
   // 在每个匹配的元素 A 之前插入内容 B    
   $(A).before(B); 
   
   // 将所有匹配的元素 B 插入到指定的元素 A 之前    
   $(B).insertBefore(A); 

2. 处理节点的方法

       // remove()：从DOM中删除所有匹配的元素，可以传入参数进行筛选
       $('ul li:eq(1)').remove(); // 获取第2个li，将它从网页中移除
   
       // detach()：从DOM中移除所有匹配的元素，该方法会将绑定的事件、附加的数据等保留下来，而remove则不会
       $('ul li:eq(0)').detach(); // 删除元素
   
       // empty()：清空元素中的所有的后代节点
       $('ul li:eq(1)').empty(); // 清空第2个li元素里的数据
   
       // clone()：复制节点，参数为true，传递参数之后表示复制节点的同时一并复制该节点所绑定的事件
       $('ul li').click(function () {
           // 复制当前点击的节点，并将其追加到ul中 
           $(this).clone().appendTo('ul'); 
       });

3. 替换节点

   // 替换节点：$(A).replaceWith(B)：用 B 替换 A
   $('p').replaceWith('<strong>我要替换掉你！！！</strong>');
   
   // $(A).replaceAll(B)：用 A 替换 B
   // 若被替换的节点绑定了事件，则替换后将会一并消失
   $('<strong > 我要替换掉你！！！ < /strong>').replaceAll('p');

4. 包裹节点

   // 包裹节点：$(A).wrap(B)：用 B 包裹 A
   // 将所有的元素进行包裹（一个包裹一个）
   
   $('strong').wrap('<b></b>');
   
   
   // $(A).wrapAll(B)：用 B 包裹 A：
   //将所有匹配的元素用一个标签进行包裹（一个包裹多个）
   // 如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后
   
   $('strong').wrapAll('<b></b>');
   
   
   // $(A).wrapInner(B)：用 B 包裹 A中的内容：
   // 将每一个匹配的元素的子内容（包括文本节点）用其它结构化的标记包裹起来。
   
   $('strong').wrapInner('<b></b>');

5. 获取属性和设置属性

   // 获取p元素title属性的值    
   $('p').attr('title'); 
   
   // 设置p元素title属性的值    
   $('p').attr('title', 'nihao'); 
       
   // 设置多个属性的值 
   $('p').attr({
       'name': 'NiHao',
       'title': 'HaHa'
   }); 

6. 删除属性和新增属性

       // 删除属性：removeAttr()：
       $('p').removeAttr('title');
   
       //jQuery1.6中新添加的属性：prop()：
       $('p').prop(); // 获取匹配元素集中的第一个元素的属性值
   
       // jQuery1.6中新添加的属性：removeProp()：
       $('p').removeProp(); // 为匹配的元素删除设置的属性

7. 样式操作

   // 获取样式和设置样式
   $('p').attr('class');
   $('p').attr('class', 'high');
   
   // 追加样式：addClass() 
   $('p').addClass('another');
   
   // 移除样式：removeClass()
   $('p').removeClass('another');
   $('p').removeClass('another high');
   
   // 移除所有class
   $('p').removeClass();
   
   
   // 切换样式：toggle()
   $('button').toggle(function () {
       // 显示元素
   }, function () {
       // 隐藏元素
   });
   
   // 反复切换class，如果类名存在则删除它，如果类名不存在则删除它
   $('p').toggleClass('hao');
   
   
   // 判断是否含有某个样式：hasClass()
   
   $('p').hasClass('hao');     //  返回 true 或 false

8. 设置和获取HTML、文本和值

   // html()：类似于JavaScript中的innerHTML，读取或设置某个元素中的HTML内容
   $('div').html();
   
   // text()：类似于JavaScript中的innerText，获取或者设置某个元素中的文本内容
   $('p').text();
   
   // val()：类似于JavaScript中的value值，用来获取或设置元素的值；
   // 单元素返回元素的值，多元素标签返回的是一个包含所有选择的值的数组。
   $('input').val();

9. 表单元素的属性

       // defaultValue：表单元素的属性（包含表单的初始值）
   
       $('#address').focus(function () {
           var txt_value = $(this).val();
           if (txt_value == this.defaultValue) {
               $(this).val('');
           }
       });
   
   
       $('#address').blur(function () {
           var txt_value = $(this).val();
           if (txt_value == "") {
               $(this).val(this.defaultValue);
           }
       });       
       
       //  this指向当前的文本框，
       // this.defaultValue就是当前文本框的默认值

10. 给单选或者多选框赋选中的值

        $('#sing option:eq(1)').attr('selected', 'true');
    
        $(':checkbox').val(['check1', 'check2']);
    
        $(':radio').val(['radio2']);
    
        $('[value=radio2]:radio').attr('checked', 'true');

11. 遍历节点

    // children()：取得匹配元素的子元素集合（只考虑子元素，不考虑其他后代元素！）$('body').children();
    
    // next()：获取匹配元素后面紧邻的同辈元素
    $('p').next();
    
    // prev()：取得元素前面紧邻的同辈元素
    $('p').prev();
    
    // siblings()：取得匹配元素前后所有的同辈元素
    $('p').siblings();
    
    // closest()：取得最近的匹配元素，匹配就返回元素本身，若不匹配，则继续逐级向上查找到匹配选择器的元素
    
    
    
    // parent()和parents()
    
    // closest()：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
    
    // parent()：获得集合中每个匹配元素的父级元素
    
    // parents()：获得集合中每个匹配元素的祖先元素

12. CSS - DOM属性

    $('p').css('color', 'red');
    
    // 数字会自动转化为像素值，连字符去掉，并大写其后的单词的首字母
    $('p').css({
         'color': 'green',
        'backgroundColor': '#ff8800'
    });
    
    
    // 用来获取 window 和 document 的高度和宽度
    
    // 获取元素的高度（不带单位）
    $('div').height(); 
    
    // 设置元素的宽度
    $('div').width('100px'); 

13. offset()方法

    // offset()方法：获取元素在当前视窗的相对位移，
    // 其中返回的对象包含两个属性，top和left，其只对可见元素有效
    var offset = $('div').offset();
    var left = offset.left,
         top = offset.top;

14. position()方法

    // position()方法：获取元素相对最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移
    
    var ops = $('div').position(),
        opsLeft = ops.left,
        opsTop = ops.top;

15. scrollTop方法和scrollLeft()方法

        var $p = $('p'),
            scrollTop = $p.scrollTop(), // 获取元素的滚动条距离顶端和左端的距离
            scrollLeft = $p.scrollLeft();
    
        var $p = $('div'),
            scrollTop = $p.scrollTop(300), // 控制元素的滚动条滚动到指定位置
            scrollLeft = $p.scrollLeft(300);

16. 鼠标事件

        $('a').mouseover(function () {
            // 鼠标移入事件
    
        }).mouseout(function () {
            // 鼠标移除事件
    
        }).mousemove(function () {
            // 鼠标移动时的事件
    
        });