jQuery操作dom

$(function(){

//1.操作元素属性

//1.1 设置或返回被选元素的属性值 attr：attr(name)获取值，attr(name,value)设置name的值为value

$("img").attr("src");//获取img的src属性的值

$("img").attr("src","b.jpg");//将img的src属性设置为b.jpg

$("img").attr({

src:"b.jpg",

title:"test"

});//同时将img的src属性设置为b.jpg，title设置为test

$("img").attr("title",function(){

return"test2";

});//将匿名函数返回的值设置到title中

//1.2 删除属性 removeAttr(name)

$("img").removeAttr("title");//删除img的title属性

//2.操作元素内容

//2.1 获取元素内容

varstrHtml = $("#div1").html();//获取div1的html元素

varstrText = $("#div1").text();//获取div1的text文本内容

//2.2 设置元素内容

varstrHtml = $("#div1").html("<span>span</span>");//设置div1的html元素为<span>span</span>

varstrText = $("#div1").text("demo");//设置div1的文本内容为demo

//3.获取元素的值val,val()获取元素的值 val(value);//设置元素的值

$("#select1").val();//获取select选中的option的值

$("#input1").val("");//清空input1的值

//4.操作元素样式

$("p").css("color");//获取p的color值

$("p").css("color","red");//设置p的color值为red

$("p").css({color:"red",background:"green"});//设置p的color值为red,background的值为green

//5.操作class

//添加class

$("img").addClass("p2 p3");//这是追加，不是覆盖。比如原来的<p class="p1">,执行完addClass后为<p class="p1 p2 p3">

//切换class

$("img").toggleClass("i");//toggleClass也是追加，例如：

//比如原来是<img class="p2 p3" src="a.jpg" alt="aa">，执行完toggleClass后为<img class="p2 p3 i" src="a.jpg" alt="aa">

//删除class

$("img").removeClass("i");//移除class，这里表示在class="p2 p3 i"的基础上移除了i，结果为class="p2 p3"

$("img").removeClass();//不传参数则会删除所有class。结果就是class=""

//6.内部插入节点

//在当前元素追加内容

$("p").append("<b>Hello</b>");//向p段落追加<b></b>

//把所有匹配的元素追加到另一个指定的元素元素集合中。

$("p").appendTo($("#div1"));//把所有p段落，追加到#div1中

//向匹配的元素前置内容：放在匹配元素的最前面

$("p").prepend("<b>Hello</b>");//在p元素内容的最前面添加<b>Hello</b>

//把所选元素追加到另一个元素中的最前面

$("p").prependTo("#foo");//把所有p追加到#foo元素的最前面

//7.外部插入节点

//在匹配的元素之后插入同级html内容

$("p").after("<b>Hello</b>");//源：<p>I</p> 插入后<p>I</p><b>Hello</b>

//在匹配的元素之后插入dom元素

$("p").after( $("#foo")[0] );//源：<b >Hello</b>

//在每个匹配的元素之前插入html内容。

$("p").before("<b>Hello</b>");//源：<p>I</p> 插入后<b>Hello</b><p>I</p>

//在匹配的元素之前插入dom元素

$("p").before( $("#foo")[0] );//源：<b >Hello</b><p>I</p>

//把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

$("p").insertAfter('#foo');//源：<p>I</p><div >Hello</div><p>I</p>

//把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

$("p").insertBefore("#foo");//源：<div >Hello</div>

//8.复制节点：clone()克隆并且选中该元素

//只复制元素，不复制元素的事件。

//源内容：<b>Hello</b><p>, how are you?</p>

$("b").clone().prependTo("p");//结果为：<b>Hello</b><p><b>Hello</b>, how are you?</p> 第二个b标签是没有事件的

//复制元素和元素的事件。

$("button").click(function(){//源内容：<button>Clone Me!</button>

$(this).clone(true).insertAfter(this);

});//复制了按钮，并且具有同样的事件

//9.替换节点

//替换单个元素为html元素

//案例：将所有的p替换成b

$("p").replaceWith("<b>b</b>");//源：<p>p1</p><p>p2</p><p>p3</p> 替换后：<b>b</b><b>b</b><b>b</b>

//替换单个元素为html元素，值为函数返回值

//案例：将所有的p替换成b

$("p").replaceWith(function(){return"<a>a</a>"});//源：<p>p1</p><p>p2</p><p>p3</p> 替换后：<a>a</a>

//替换所有元素

//把所有的p替换成<b>替换后</b>

$("<b>替换后</b>").replaceAll("p");//源：<p>p1</p><h1>h1</h1> 替换后：<b>替换后</b><h1>h1</h1>

//10.包裹节点

//使用html代码包裹整个元素

//用<div class='wrap'></div>将所有的p包裹起来

$("p").wrap("<div class='wrap'></div>");

//使用指定元素包裹整个元素

$("p").wrap(document.getElementById('content'));

//使用回调函数包裹整个元素

$('.inner').wrap(function() {

return'<div class="'+ $(this).text() +'" />';

});

//使用html包裹匹配元素的内容

//将p里的元素内容，用<b></b>包裹起来

$("p").wrapInner("<b></b>");//源：<p>helloWord</p> 包裹后<p><b>helloWord</b></p>

//使用指定元素包裹匹配内容

$("p").wrapInner(document.createElement("b"));

//使用回调函数包裹匹配内容

$('p').wrapInner(function() {

return'<b></b>';

});

//11.遍历元素

//html内容为<img/><img/>

//遍历src属性为a.jpg

$(function(){

$("img").each(function(index, el) {//index为每个元素的索引，el为当前元素(也可以直接用this)

console.info(index,el,this);//el和this是相等的

this.src ="a.jpg";//设两个图片的src属性

});

});

//遍历后结果为<img src="a.jpg"/><img src="a.jpg"/>

//12.删除元素

//remove()：从DOM中删除所有匹配的元素。

//删除p元素

$("p").remove();//源：<p>Hello</p> how are <p>you?</p> 删除后：how are

$("p").remove(".p1");//源：<p>Hello</p> how are <p class="p1">you?</p> 删除后：<p>Hello</p> how are

//empty()：删除匹配的元素集合中所有的子节点。

//源内容：<p>Hello, <span>Person</span> <a href="#">and person</a></p>

$("p").empty();//删除后：<p></p>

});