jquery dom

一、元素属性

1、attr(name)

获取元素的属性。

$(".box").attr("title");

2、attr(key,value);

设置元素单个属性。

$(".box").attr("title","嘻嘻");

3、attr({key1:value1,key2:value2});

设置元素多个属性。

$(".box").attr({"title":"嘻嘻","id":"go"});

4、attr(key,function(index));

通过绑定方法设置元素的属性。

$(".box").attr("title",function(){
      var a="嘻嘻";
      return a;  
})    

5、removeAttr(name);

删除元素的单个属性。

$(".box").removeAttr("title");

6、removeAttr(name1 name2);

删除元素的多个属性。

$(".box").removeAttr("title id");

二、元素内容

1、html()

获取元素的html内容。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>

console.log($(".box").html());    //<p class="one">我是第一段文字</p>
        　　　　　　　　　　　　　　　　<p class="two">我是第二段文字</p>

2、html(value)

设置元素的html内容。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>

$(".box").html("<p>我只是一个新建的</p>");

<div class="box">          //变成了这样
    <p>我只是一个新建的</p>          
</div>

3、text()

获得元素的文本内容。如果该元素有后代元素，则会把后代元素的文本内容一起获得。

<p class="one">我是第一段文字</p>
<p class="two">我是第二段文字</p>

console.log($(".one").text());  //我是第一段文字

4、text(value)

设置元素的文本内容。如果该元素有后代元素，则会被清除。

<p class="one">我是第一段文字</p>
$(".box").text("今天星期四");
<p class="one">今天星期四</p>   //现在变成了。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>
$(".box").text("今天星期四");
<div class="box">今天星期四</div>      //子元素节点被清除了。

5、val()

获取value

$("input").val();

6、val(value);

设置vlaue

$("input").val("请输入您的用户名");

三、css

1、css(name,value);

设置单一的css样式。

$(".one").css("background-color","yellowgreen");

2、css({name1:value1,name2,value2})

设置多个css样式。

$(".one").css({
    "background-color":"yellowgreen",
    "border":"#000 solid 2px"
});

3、addClass(class)

增加一个class，注意，他还会保留原有的class

<p class="one">我是第一段文字</p>

$(".one").addClass("xixi");

<p class="one xixi">我是第一段文字</p>  //现在变成了。

4、toggleClass(class)

切换class，有则删除，无则添加。

$(".one").toggleClass("xixi");

5、removeClass(class);

删除一个class。

<p id="p" class="one xixi">我是第一段文字</p>
$("#p").removeClass("xixi");
<p id="p" class="one">我是第一段文字</p>   //已经删除了一个class

6、removeClass();

删除所有的class。

<p id="p" class="one xixi">我是第一段文字</p>
$("#p").removeClass();
<p id="p" class="">我是第一段文字</p>   //现在变成了

7、removeClass(class1 class2);

删除多个class，中间用空格隔开。

<p id="p" class="one xixi haha">我是第一段文字</p>
$("#p").removeClass("xixi haha");
<p id="p" class="one">我是第一段文字</p>  //现在变成了

四、节点

1、$(html)

创建节点。

var newP=$("<p>我只是一个新建的</p>"); //这样就创建了一个新节点，并把赋值个变量newP。

2、append(content)

插入节点，新建的节点 没有插入是看不到效果的，由父节点调用。

<div class="box">
    <p id="p" class="one">我是第一段文字</p>
</div>

var newP=$("<p>我只是一个新建的</p>");
$(".box").append(newP);

<div class="box">   //结构已经变了
    <p id="p" class="one">我是第一段文字</p>
    <p>我只是一个新建的</p>
</div>

这里还有一种情况，就是上面是我们新建的节点，如果要操作的是页面已有的节点呢。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>

$(".box").append($(".one"));

<div class="box">        //其实就是移动了。        
    <p class="two">我是第二段文字</p>
    <p class="one">我是第一段文字</p>
</div>

3、appendTo(content)

这个方法就是颠倒了append的位置，可以理解为插入到，父节点放到括号内，由要插入的节点的调用。

newP.appendTo($(".box"));

4、append(function(index,html));

将一个函数作为append方法的参数。

<div class="box">
    <p class="one">我是第一段文字</p>
</div>

$(".box").append(function(){
    return $("<p>我只是一个新建的</p>");
});

<div class="box">         //结构变成了
    <p class="one">我是第一段文字</p>
    <p>我只是一个新建的</p>
</div>

5、prepend()

插入节点，这个跟append类似，只是插入的位置不同，append是放在调用父节点的最后面，这这个方法是放在最前面。

<div class="box">
    <p class="one">我是第一段文字</p>
</div>

var newP=$("<p>我只是一个新建的</p>");
$(".box").prepend(newP);

<div class="box">           //结构改变了
    <p>我只是一个新建的</p>
    <p class="one">我是第一段文字</p>
</div>

6、prependTo()

类似appendTo，调用者是要插入的节点，括号内放父节点，效果与prepend一致。

newP.prependTo($(".box"));

7、prepend(function(index,html))

与append(function(index,html))效果类似，移动位置不同而已。

8、after()

将节点插入到调用者节点的后面，兄弟关系。

<div class="box">
    <p class="one">我是第一段文字</p>
</div>

var newP=$("<p>我只是一个新建的</p>");
$(".box").after(newP);

<div class="box">  //现在的结构
    <p class="one">我是第一段文字</p>
</div>
<p>我只是一个新建的</p>

9、after(function)

将函数的返回值作为参数。

10、before()

将节点插入到调用者节点的前面，兄弟关系。

11、before(function)

将函数的返回值作为参数。

12、insertBefore()

将节点插入到指定节点的前面，同样兄弟关系，调用者为要插入的节点，参数为指定节点。

13、insertAfter()

将节点插入到指定节点的后面，同样兄弟关系，调用者为要插入的节点，参数为指定节点。

14、clone()

复制节点。参数可以加true，表示如果该节点身上有绑定事件的话，也一并复制该事件。

<div class="box">
    <p class="one">我是第一段文字</p>
</div>

$(".box").append($(".one").clone());

<div class="box">         //结构改变了
    <p class="one">我是第一段文字</p>
    <p class="one">我是第一段文字</p>
</div>

15、replaceWith(content);

替换节点。

<div class="box">
    <p class="one">我是第一段文字</p>
</div>

$(".one").replaceWith("<span>我是一个span</span>");

<div class="box">        //结构改变了
    <span>我是一个span</span>
</div>

16、replaceAll(content);

替换节点，与replaceWith(content)效果一致，只是替换与被替换位置颠倒过来了。

17、wrap(html);

节点包裹。

<p class="one">我是第一段文字</p>
$(".one").wrap("<span class='span'></span>");

<span class="span">  //节点已经被span包裹了
    <p class="one">我是第一段文字</p>
</span>

18、wrap(element);

就是包裹与被包裹都是页面已有的节点这种情况。

<div class="one">我是第一个盒子</div>
<div class="two">我是第二个盒子</div>

$(".one").wrap($(".two"));

<div class="two">             //结构已经改变了
    我是第二个盒子
    <div class="one">我是第一个盒子</div>
</div>
<div class="two">我是第二个盒子</div>

实际上并不是将第二个div移动并将第一个div包裹，而是复制。

18、wrap(function)  

将函数的返回值作为包裹的节点。

<div class="one">我是第一个盒子</div>

$(".one").wrap(function(){
    return "<span></span>";
})

<span>        //改变之后的结构
    <div class="one">我是第一个盒子</div>
</span>

19、wrapInner(html)

这个也很好理解，就是包裹不再是整个节点，而只是节点里面的内容。

<div class="one">我是第一个盒子</div>

$(".one").wrapInner("<b></b>");

<div class="one">         //执行代码后
    <b>我是第一个盒子</b>
</div>

　　wrapInner(element) 

　　复制节点再包裹。

　　wrapInner(function)

　　函数返回值包裹。

20、wrapAll(html)

将所有的元素及其所有同类兄弟元素用参数中的代码包裹起来。

<p>我是第一个p段落</p>
<p>我是第二个p段落</p>

$("p").wrapAll("<span></span>");

<span>         //执行代码后
    <p>我是第一个p段落</p>
    <p>我是第二个p段落</p>
</span>

　　wrapAll(element)

　　复制一份再包裹。

　　wrapAll(function)

　　函数的返回值包裹。

五、遍历元素

1、each(callback)

 遍历元素。

<p>我是第一个p段落</p>
<p>我是第二个p段落</p>
<p>我是第三个p段落</p>

$("p").each(function(index,element){
    console.log("我是第"+(index+1)+"个p段落，但我已经被修改了");     //我是第1个p段落，但我已经被修改了 我是第2个p段落，但我已经被修改了 我是第3个p段落，但我已经被修改了
})

六、删除元素。

1、remove()

删除元素。

<ul>
    <li>我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ul>

$("ul li").click(function(){
    $(this).remove();
})

//点击第一个li之后结构变成了
<ul>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ul>

2、empty()

删除元素子节点。

<ul>
    <li>我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ul>

$("ul li").click(function(){
    $(this).empty();
})

//点击第一个li之后结构变成了
<ul>
    <li></li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ul>