JQuery操作DOM总结

一、元素的属性操作：

1、通过attr(name)方法获取元素的属性

eq:  var strAlt = $("img").attr("src");
            strAlt += "<br/><br/>" +
                        $("img").attr("title");    //获取src和title属性值

2、设置元素的属性

语法：attr(key,value);

attr(key0:value0,key1:value1);

eq:$("img").("src","Images/img01.jpg");

$("img").("src","Images/img01.jpg","title","这是一封风精华“)；

3、删除元素的属性:

$("img").removeAttr("src");

二、元素内容操作：

1、操作元素内容的方法有两种：

（1）html()与Javascript 的innerHTML 类似(用于获取或设置元素的HTML内容);获取的不只包括文本内容还包括内部的div

(2)text()与Javascript 的innerText类似(用于获取或设置元素的文本内容);   获取包括文本内容

var strHTML = $("#divShow").html();
        var strText = $("#divShow").text();
        $("#divHTML").html(strHTML);
        $("#divText").text(strText);

三、获取和设置元素值：

val(val)

（1）如果不带参数val，则是获取元素的值，反之，则是将参数val的值付给某元素。

（2）通过val().join(",")该方法可以获取select标记的多个选项值。

    $("input").val("");//清空文本框的值

      var strSel = $("select").val().join(",");
                $("#p1").html(strSel);

四、元素样式的操作：

1、有四种方法：(1)直接设置样式(2)增加css类别(3)类别切换(4)删除类别

2、可通过css()方法指定某个指定的元素设置样式值；

    $("#divShow").click(function () {
                $(this).css("font-weight", "bold");
                $(this).css("font-style", "italic");
                $(this).css("background-color", "Red");
            })

3、增加css类别

addclass(class);

增加多个类别addClass(class0 class1);

    $("#divShow").click(function () {
                $(this).addClass("st st1")
            })

4、类别切换:

通过toggleClass()方法切换不同的类别

toggleClass(class);

 $(this).toggleClass("st1")

注：当获取当前元素时当切换的类别存在时删除该类别，当不存在时添加一个类别.

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

$(selector).toggleClass(class,switch) switch 为true或false

当是true时即添加类别当为false 时移除类别

 $(this).toggleClass("st1", true);???????

5、移除类别

removeClass([class])

$("p").removeClass("cls0");
$("p").removeClass();
五、创建节点元素
1、动态创建节点元素
var=$("<div title='Jquery理念'> Write Less Do More </div> ");
$("body").append($div);
2、插入节点
插入节点分为内部插入和外部插入
(1)append(function(index,html));
(2)   $("div").append(retHtml);
    
             
function retHtml() {
                 
   var str = "<b>Write Less Do More</b>";
   
                 return str;
           
 }
(3)$("span").append($("div"));
将span标记插入到div中
$(".123").appendTo($("span"));  将类别是123的Div中插入到span;
3、外部插入节点
    $("span").after(retHtml); //插入内容retHtml(函数名)
      
      function retHtml() {
              
  var str = "<span></br><b>Write Less Do More</b><span>";  
//将函数返回的span标记插入到当前的span标记的后面
            
    return str;
           
 }
4、复制节点
复制节点用clone()方法该方法复制的元素不具有任何行为。
clone(true) 当参数设置为true时就可以复制元素的所有事件处理。

 eq:   $("img").click(function () {
                $(this).clone(true).appendTo("span");

            })
注：clone（）与clone(true)区别比如当前的例子如果用clone（）方法复制元素虽然可以复制成功，但复制的副本不能点击。

5、替换节点

如果用替换元素的节点有两种方法：

（1）replaceWith(content); 该方法的功能是将所有的元素替换成指定的HTML或DOM元素,

 

(2)replaceAll(selector)  该方法的功能是将所有的元素替换成指定的selector的元素其中，selector为需要替换的元素。

注：replaceWidth()与replaceAll()方法都可实现元素节点的替换最大的区别在于字符替换的顺序，前者用括号字符串替换所选择的元素后者相反用字符串替换替换括号的元素。

6、包裹节点：

（1）wrap(html)把所有选择的元素用其他字符串代码包括起来

（2）wrap（elem）elem参数用于包装所选元素的Dom元素

           var st = "<b></b>";
            $("p").wrap(st);

（3）wrap(fn)   fn函数为包裹结构的一个函数       

$("p").wrap(st);
            function st() {
                var str = "<b></b>";
                return str;
            }

 (4)unwrap()无参数

（5）wrapAll(html)html参数字符串代码，用于生成元素并包裹所选元素

（6）wrapAll（elem）  elem参数用于包装所选元素的Dom元素

以上6个是包裹外部元素

（7）wrapInner(html)  html  参数为字符串代码，用于生成元素并包裹所选元素

（8）wrapInner(elem)  elem参数用于包装所选元素的Dom元素

(9)wrapInner(fn)   fn参数为包裹结构的一个函数

7、8、9、是包裹内部的文本字符。

eq:

      $(function () {
            $("p").wrap("<b></b>");  //包裹外部元素
            $("span").wrapInner("<i></i>");  包裹内部的文本字符
        })

7、遍历元素

each(callback)

参数callback为一个函数，该函数还可以接受一个形参index配合this关键字实现属性的设置和获取

    $(function () {
            $("img").each(function (index) {
                //根据形参index设置元素的title属性
                var n = index + 1;
                this.title = "第" + n + "幅风景图片测试,alt内容是" + this.alt;
            })
        })

8、删除元素

删除元素有两种的方法：

remove()、empty();

区别在于：empty（）该方法并非真正的清空，仅仅可以清空全部的节点或节点所包含的所有后代元素，并非删除节点和元素。