jQuery操作DOM

何为DOM？无非就是对元素和其属性进行的增删改查而已。

节点操作====================================

创建节点

（1）创建元素节点：  $("<li></li>")

（2）创建文本节点：  $("<li>ds</li>")

（3）创建属性节点：  $("<li title='ds'>ds</li>")

无论多么复杂的节点，只需$一下就OK了：$("<li><a title='' href=''>ds</a><span>ds</span>")，但是一般不写的这么复杂

创建了节点没有用，关键是的插入节点到文档里

插入节点

===================================作为子元素===========================

$("ul").append("<li>123</li>");             作为最后一个子元素

$("<li>123</li>").appendTo("ul");          作为最后一个子元素

$("ul").prepend("<li>123</li>");            作为第一个子元素

$("<li>123</li>").prependTo("ul");         作为第一个子元素

===================================作为兄弟元素===========================

$("p").after("<span>123</span>");                            作为其后面紧邻的兄弟元素

$("<span>123</span>").insertAfter("p");                    作为其后面紧邻的兄弟元素

$("p").before("<span>123</span>");                          作为其前面紧邻的兄弟元素

$("<span>123</span>").insertBefore("p");                  作为其前面紧邻的兄弟元素

删除节点：

remove()方法：将指定节点以及其后代节点全部删除，返回值是指向该删除的节点的引用

var $li=$("ul li:eq(1)").remove();

$li.appendTo("ul");

其实也可以简写成

$("ul li:eq(1)").appendTo("ul");

突然发现原来 appendTo()方法居然是可以用来移动元素的（先将元素在原来的位置删除，然后再插入到指定节点下）

另外remove()也可以传递参数

$("ul li").remove("li[title==123]");

======================

empty()并不是删除节点，而是清空节点里所有后代节点，只留下最初的壳子

$("ul li:eq(1)").empty();    <li></li> 好凄惨啊

复制节点：

$("ul li").click(function(){

$(this).clone().appendTo("ul");

})

复制当前的li，并把它插入ul最后，但是此时新插入的li并不具备任何行为，如果复制的时候传个参数（true）过去的话，就会让复制的节点也具备相应的事件$(this).clone(true)。

替换节点：

如果再替换前已经为元素绑定了事件，替换后原来的事件将会消失，一下2种写法不同，效果一样

$("p").replaceWith("<span>123</span>");

$("<span>123</span>").replaceAll("p");

包裹节点：

说白了就是添加父节点

$("a").wrap("<span></span>");  为每一个a添加一个span，使其成为a 的父节点

 

$("a").wrapAll("<span></span>"); 是为所有的a添加一个统一的父节点 span，无论你的a在哪个节点下面，最后都会以第一个a所在的位置一次排开，真是吸功大法的最高境界啊

<div>
        <a>11</a>
        <a>22</a>
        <a>33</a>
        <div>
            <p>aa</p>
            <p>bb</p>
            <a>44</a>
            <a>55</a>
            <div>cc</div>
            <div>dd<a>66</a></div>
        </div>
    </div>

最后是

<div>
        <span><a>11</a><a>22</a><a>33</a><a>44</a><a>55</a><a>66</a></span>
        
        
        <div>
            <p>aa</p>
            <p>bb</p>
            
            
            <div>cc</div>
            <div>dd</div>
        </div>
    </div>

 

$("a").wrapInner("<b></b>"); 是指把a里面的子内容（包含文本和子节点）的外面，a的里面加上 b标签。

 

属性操作===========================

$("a").attr("title"); 获得属性

$("a").attr("title","123");  设置属性

$("img").attr({"title":"123","src":"...","alt":"..."});连环属性设置

$("a").removeAttr("title");  移除属性

 

样式操作===========================

$("p").attr("class");  获得样式

$("p").attr("class","myClass");  设置样式  覆盖原有的样式

$("p").addClass("another");  增加样式

$("p").removeClass("another");  移除一个样式

$("p").removeClass("another myClass");  移除多个样式

$("p").removeClass();  移除所有样式

$("p").toggleClass("other");就会在原有的class基础上增加 other和删除other样式

$("p").hasClass("another");  等同于  $("p").is(".another");  返回true或者false   是否存在某个样式

 

操作HTML，文本和值=======================================

html()方法就相当于js的innerHTML

$("p").html()

$("p").html("<span>123</span>")      页面上是 123  但html里有span标签

 

test()方法就相当于js的innerText()

<p>
   <a>11</a>
</p>

$("p").text()    11

$("p").text("123")  虽然页面上也是123 但是html是 <p>123</p> a被干掉了

$("p").text("<span>123</span>")   页面上就是 <span>123</span>

 

val()方法就相当于js里的value值，无论是文本框，下拉列表，单选复选，它都可以返回元素的值，如果是复选，它会返回所有被选择的值的数组

$("#name").val();

$("#name").val("123");

val()方法还可以使下拉列表，单选复选的指定选项被选中

$("#single").val("选择2号");  选定单项的下拉列表

$("#multiple").val(["选择1号","选择2号"]);   以数组形式选择多项下拉列表

$(":checkbox").val(["value1","value2"]);  要以数组的形式来，即使只要选中一个

$(":radio").val(["value1"]);    单选的也得以数则的形式来，这个要注意

另外使得input元素被选中的话最通常的用法就是通过attr方式：

$("#single option:eq(1)").attr("selected",true);  注意这种在下拉列表select选中某一个option的方式

$("[value=值1]:radio").attr("selected",true);  注意这种在多个input下选中某一个的方式

 

遍历节点===================================================

children()获得子元素的集合

 

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

       $(function () {          
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++)
            {
                alert($ul[i].innerHTML);  注意这个地方居然有jQuery对象转成DOM了
            }
            
        })

next()取得后面的第一个兄弟节点（包含整个节点和内容）

$("p").next();

prev()取得前面的第一个兄弟节点（包含整个节点和内容）

$("p").prev();

siblings()取得所有的（无论前后）的同辈节点

$("p").siblings()