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>
