jQuery之DOM操作大全

jQuery属性操作

获取元素属性的语法:attr(name)

例子：$("#img1").attr("src");

设置元素单个属性的语法:attr(key,value)

例子：$("#img1").attr("src","2.jpg");

设置元素多个属性的语法：attr({key0:value0,key1:value1})

例子：$("#img1").attr({src:"3.jpg",title:"jQuery换了一张图片"});

通过绑定方法设置元素的属性：attr(key,function(index))

例子：$("#img1").attr("src",function(){ Math.floor(Math.random())+".jpg" });

删除元素的属性：removeAttr(name)

例子：("#img1").removeAttr("title");

jQuery内容操作

获取元素的HTML内容：html()

设置元素的HTML内容：html(value)

获取元素的文本内容：text()

设置元素的文本内容：text(value)

text()与html()获取到的内容有什么区别呢？

text()获取只获取文本，当该元素下有html代码时会被自动去除。

如对于代码：<div id="div1"><p>测试文本</p></div>

$("#div1").text();      获取到的是："测试文本"

而$("#div1").html();   获取到的是："<p>测试文本</p>"

对于设置而言:

$("#div1").html("<p>测试文本</p>");   实际在浏览器显示的是："测试文本"。也就是说，<p></p>会被浏览器解释。

$("#div1").text("<p>测试文本</p>");   实际在浏览器显示得是："<p>测试文本</p>"。也就是说，<p></p>也会当做文本显示出来。

jQuery value操作

获取value：val()

例子：$("#input1").val();

设置value: val(value)

例子：$("#input1").val("确认提交");

jQuery css操作

jQuery设置单一CSS样式语法：css(name,value)

例子：$("#div1").css("background-color","blue");

生成的代码为  <div id="div1" style="background-color:blue;"></div>

$("#div1").css({ "background-color":"red",color:"wihte" });

生成的代码为<div id="div1" style="background-color:red;color:white"></div>

//注意一次过设置多个CSS样式时有"-"横线的css要用双引号括起来

jQuery追加CSS类别语法:  addClass(class)  注意它还会保留原有的CSS类别

例子：$("#div1").addClass("css1");

生成的代码为 <div id="div1" class="css1"></div>  生成的样式会被浏览器解释显示。

若继续执行:$("#div1").addClass("css2");

生成的代码为 <div id="div1" class="css1 css2"></div>

jQuery切换类别语法：当元素已含有同名称的className的CSS类别时，删除该类别。如果没有则增加一个该名称的类别。

toggleClass(className)  toggleClass对于参数className的样式有则删除，无则添加。

例子1:$("#div1").toggleClass("css_1");

生成的代码为<div id="div1" class="css_1"></div>

当再次执行同样的代码$("#div1").toggleClass("css_1");

生成的代码为<div id="div1" class=""></div>

例子2：$("#div1").toggleClass("css_1");

生成的代码为<div id="div1" class="css_1"></div>

再执行：$("#div1").toggleClass("css_2");

生成的代码为<div id="div1" class="css_1 css_2"></div>    注意此处不是将css_1替换为css_2

再执行$("#div1").toggleClass("css_1");

生成的代码为<div id="div1" class="css_2"></div>

jQuery删除类别语法:  removeClass([class])  可以删除1个 多个 或 全部删除

例子：有这样一段代码<div id="div1" class="css_1"></div>

执行   $("#div1").removeClass("css_1");

执行后的代码为:  <div id="div1" class=" "></div>

有这样一段代码<div id="div1" class="css_1 css_2"></div>

执行   $("#div1").removeClass("css_1 css_2")</div>

执行后的代码为 <div id="div1" class=" "></div>

有这样一段代码<div id="div1" class="css_1 css_2"></div>

执行$("#div1").removeClass();

执行后的代码为<div id="div1" class></div>

jQuery创建节点

jQuery创建节点语法：$(html)

例子：  $("<div>jQuery创建的节点</div>");    这样就创建了一个div节点。

执行一下两行代码

var dom = $("<span>jQuery创建的节点</span>");

$("#div1").append(dom);    //注意仅仅创建是无效的，必须要插入到页面内部才会生效。

执行后的结果为: <div id="div1"><span>jQuery创建的节点</span></div>

jQuery插入节点

内部插入节点：append(content)    content表示追加到目标的内容

例子1:  原有代码: <div id="div1"></div>

执行  $("#div1").append("<p>jQuery插入节点</p>");

生成的代码为：<div><p>jQuery插入节点</p></div>

此处插入的是新建的节点。如果是将页面上原有的节点append()会怎么样呢？

例子2:   原有代码:

<div id="div1">第一个DIV1</div>

<div id="div2"><span id="span1">DIV2里的span1</span></div>

执行  $("#div1").append($("#span1"));

后的代码为:

<div id="div1">第一个DIV1<span id="span1">DIV2里的span1</span></div>

<div id="div2"></div>

注意到:实际上相当于把第二个div里的span移到第一个div里面了。

appendTo(content)   content表示被追加元素(一般是已经存在页面上的元素)

例子1: 原有代码 <div id="div1"></div>

$("<p>一个P元素<p>").appendTo($("#div1"));

执行后的代码为:   <div id="div1"><p>一个P元素</p></div>

例子2:原有代码:

<div id="div1"></div>

<div id="div2"><span id="span1">我是div2里的span1</span></div>

执行： $("#span1").appendTo($("#div1"));

执行后的代码为:

<div id="div1"><span id="span1">我是div2里的span1</span></div>

<div id="div2"></div>

append(function(index,html))    将一个function函数作为append方法的参数;

例子：原有代码    <div id="div1"></div>

执行:  $("#div1").append(getHtml());

function getHtml(){ return "<p>jQuery通过调用函数生成了我!</p>"; }

执行后的代码为：

<div id="div1"><p>jQuery通过调用函数生成了我!</p></div>    该方法常用于动态生成html再追加到页面元素中

此外插入节点的方法还有：

prepend(content)

prepend(function(index,html))

prependTo(content)

这三个方法的使用与append的三个方法大致一样。主要区别是prepend在插入的时候是插入到原有内容的前面，而append是插入到原有内容的后面。

例子：

原有代码：<div id="div1">原有内容</div>

执行：$("#div1").prepend("<p>prepend插入的节点</p>").append("<p>append追加的节点</p>");

之后代码为：

<div id="div1"><p>prepend插入的节点</p>原有内容<p>append追加的节点</p></div>

外部插入节点：

after(content)

after(function)

before(content)

before(function)

after before与append prepend的区别是，插入的时候，after与before与被插入元素是兄弟关系，而append和prepend与被插入元素是父子关系。

例子:

原有代码 <div id="div1"><p>我是原有的P元素</p></div>

执行代码：$("#div1").prepend("<p>我是prepend函数插入的p元素</p>").append("<p>我是append函数插入的p元素</p>").after("<div id=\"div3\">我是after函数插入的div元素</div>").before("<div id=\"div2\">我是before插入的div元素</div>");

执行后的实际代码为：

<div id="div2">我是before插入的div元素</div>

<div id="div1">

<p>我是prepend函数插入的p元素</p>

<p>我是原有的p元素</p>

<p>我是append函数插入的p元素</p>

</div>

<div id="div3">我是after函数插入的div元素</div>

外部插入节点方法2

insertAfter(content)

insertBefore(content)

例子：有如下代码

<div id="div1"><p id="p1">我是div1里面的p1里的内容</p></div>

执行代码：

$("<p>我是insertBefore方法插入的内容</p>").insertBefore($("#p1"));

$("<p>我是insertAfter方法插入的内容</p>").insertAfter($("#p1"));

执行后实际结果为

<div id="div1">

<p>我是insertBefore方法插入的内容</p>

<p id="p1">我是div1里面的p1里的内容</p>

<p>我是insertAfter方法插入的内容</p>

</div>

也就是说，insertBefore,insertAfter与before,after基本一致，只是被插入元素与插入内容位置对调了而已。

复制节点

复制节点元素，如果需要连元素的全部行为也进行复制，可以通过方法clone(true);

例子：原有代码：

<div id="div1"><img id="img1" src="1.jpg" /></div>

$("#img1").click(function(){

$("#img1").clone().appendTo($("#div1"));

})

当点击图片后，HTML代码变为：

<div id="div1"><img id="img1" src="1.jpg"><img id="img1" src="1.jpg"></div>

在此要注意的是，虽然同样的img标签id也一样，但是点击复制出来的图片的时候，不会触发原有事件，如果希望连事件也一样复制，只需将上面的代码clone()改为clone(true)即可，这样，复制的时候会连原有元素的行为事件也一起复制。

替换元素节点

replaceWith(content)

replaceAll(content)

例子：原有代码：<div><p id="p1">我是div里的p里的内容</p></div>

执行  $("#p1").replaceWith("<span>我是span里的内容</span>");

执行后的HTML代码变为 <div><span>我是span里的内容</span></div>

可以看到div里的p元素已经被span替换了。

replaceAll与replaceWith的区别不大，只是被替换元素与替换内容倒过来而已。

例子：<div><p id="p1">我是div里的p里的内容</p></div>

执行  $("<span>我是span里的内容</span").replaceAll($("#p1"));

执行后HTML代码变为<div><span>我是span里的内容</spam></div>

wrap包括元素

语法：wrap(html), wrap(elem),wrap(function)  html代表自定义字符串代码,elem代表所选中DOM元素,function代表一个函数，用函数返回的代码作为包括代码。

例子：原有的代码  <div id="div1"><p id="p1">我是div里的p元素的内容</p></div>

执行代码： $("#p1").wrap("<span></span>");

执行之后HTML代码变为<div id="div1"><span><p id="p1">我是div里的p元素的内容</p></span></div>

注意到p元素已经被<span>标签包括起来了。

例子2：原有代码：

<div id="div1">

<p id="p1">我是p1里的内容</p>

<p id="p2">我是p2里的内容</p>

</div>

执行代码：  $("#p1").wrap($("#p2"));

执行之后的结果为：

<div id="div1">

<p id="p2">

我是p2里的内容<p id="p1">我是p1里的内容</p>

</p>

<p id="p2">我是p2里的内容</p>

</div>

注意到：当选择DOM元素用wrap包裹元素的时候，是另外复制一份包裹元素的。并不是将被包裹元素移动到包裹元素里。

例子3：原有代码 <div id="div1"><p id="p1">我是p里的内容</p></div>

执行代码：

$("#p1").wrap(function(){

return "<div></div>";

})

执行之后HTML代码变为：

<div id="div"><div><p id="p1">我是p里的内容</p></div></div>

移除元素的包裹元素：unwrap()  移除元素的父元素或包裹标记

例子：<div><p><span id="span1">我是span里的元素</span></p></div>

执行代码：  $("#span1").unwrap();

HTML代码变为<div><span id="span1">我是span里的元素</span></div>

注意到<span>标签外的p标签已经被移除了

内包裹，将参数中的元素在里面包裹选中的内容

语法:wrapInner(html),wrapInner(elem),wrap(function)  html为自定义字符串代码，elem为选中的DOM元素，function表示用函数返回值作为参数。

例子：原有代码<div id="div1"><p id="p1">我是p里的内容</p></div>

执行代码：  $("#p1").wrapInner("<b></b>");

执行之后HTML变为： <div id="div1"><b><p id="p1">我是p里的内容</p></b></div>

wrapInner(elem),wrapInner(function)与wrap(elem),wrap(function)大致相同，只是包裹选中元素里面的内容而已。

语法:wrapAll(html),wrapAll(elem)  将所选中的元素及其所有兄弟元素用参数中的代码包裹起来。

例子：

<div id="div1">

<p id="p1">我是p第一行</p>

<p>我是p第二行</p>

<p>我是p第三行</p>

</div>

执行代码:$("#p1").wrapAll("<div></div>");

执行后HTML代码变为：

<div id="div1">

<div>

<p id="p1">我是p第一行</p>

<p>我是p第二行</p>

<p>我是p第三行</p>

</div>

</div>

如果wrapAll()改为wrap()

则生成的代码为

<div id="div1">

<div><p id="p1">我是p第一行</p></div>

<div><p>我是p第二行</p></div>

<div><p>我是p第三行</p></div>

</div>

可以看到wrap()与wrapAll是不同的。wrap()是每个选中的元素都用参数中的代码包裹一次。而wrapAll是所选中的元素的所有兄弟元素都用参数中的代码包裹起来。

遍历元素

语法：each(callback)

例子：原有代码

<div id="div1">

<ul>

<li>第一个li</li>

<li>第二个li</li>

<li>第三个li</li>

</ul>

</div>

执行代码:

$("#div1 > ul > li").each(function(){

$(this).text("我被jQuery改了");

})

执行后HTML代码为:

<div id="div1">

<ul>

<li>我被jQuery改了</li>

<li>我被jQuery改了</li>

<li>我被jQuery改了</li>

</ul>

</div>

删除元素

语法：remove([expr]),empty();

例子：原有代码

<div id="div1">

<ul>

<li>第一个li</li>

<li>第二个li</li>

</ul>

</div>

事件：

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

$(this).remove();

})

当点击第一个li时，生成的HTML为

<div id="div1">

<ul>

<li>第二个li</li>

</ul>

</div>

注意到第一个<li>元素已经从HTML中删除了。

如果将上面的remove()方法换成empty()方法生成的代码又是什么？

<div id="div1">

<ul>

<li></li>

<li>第二个li</li>

</ul>

</div>

由此可以看出empty()与remove()的区别是empty()仅仅是清空所选中元素的内容，并不会讲元素从HTML代码中删除，仍然保留元素所占位置。而remove()是将元素从HTML代码中删除，并其所占位置也会被删除。

加参数的remove()例子:

<div>

<ul>

<li title="1">第一个li</li>

<li title="2">第二个li</li>

</ul>

<input id"button1" type="button" value="删除第二个li">

</div>

执行代码：

$("#button1").click(function(){

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

})

执行之后的HTML代码为：

<div>

<ul>

<li title="1">第一个li</li>

</ul>

<input id"button1" type="button" value="删除第二个li">

</div>