首页 > 代码库 > jQuery之DOM
jQuery之DOM
1.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");
2.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>也会当做文本显示出来。
3.jQuery value.
获取value：
val() 例子：$("#input1").val();
设置value:
val(value) 例子：$("#input1").val("确认提交");
4.jQuery css
jQuery设置单一CSS样式语法：
css(name,value)
例子：$("#div1").css("background-color","blue"); 生成的代码为 <div id="div1" style=""></div>
$("#div1").css({ "background-color":"red",color:"wihte" }); 生成的代码为<div id="div1" style="color:white"></div>
//注意一次过设置多个CSS样式时有"-"横线的css要用双引号括起来
jQuery追加CSS类别语法: 注意它还会保留原有的CSS类别
addClass(class)
例子：$("#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删除类别语法: 可以删除1个 多个 或 全部删除
removeClass([class])
例子：有这样一段代码<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>
5.jQuery创建节点
jQuery创建节点语法：
$(html)
例子： $("<div>jQuery创建的节点</div>"); 这样就创建了一个div节点。
执行一下两行代码
var dom = $("<span>jQuery创建的节点</span>");
$("#div1").append(dom); //注意仅仅创建是无效的，必须要插入到页面内部才会生效。
执行后的结果为: <div id="div1"><span>jQuery创建的节点</span></div>
6.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><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><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基本一致，只是被插入元素与插入内容位置对调了而已。
7.复制节点
clone() 复制节点元素，如果需要连元素的全部行为也进行复制，可以通过方法clone(true);
例子：原有代码：
<div id="div1"><img id="img1" src="http://www.mamicode.com/1.jpg" /></div>
$("#img1").click(function(){
$("#img1").clone().appendTo($("#div1"));
})
当点击图片后，HTML代码变为
<div id="div1"><img id="img1" src="http://www.mamicode.com/1.jpg"><img id="img1" src="http://www.mamicode.com/1.jpg"></div>
在此要注意的是，虽然同样的img标签id也一样，但是点击复制出来的图片的时候，不会触发原有事件，
如果希望连事件也一样复制，只需将上面的代码clone()改为clone(true)即可，这样，复制的时候会连原有元素的行为事件也一起复制。
8.替换元素节点
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>
9.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>我是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是所选中的元素的所有兄弟元素都用参数中的代码包裹起来。
10.遍历元素
语法：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>
11.删除元素
语法：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="http://www.mamicode.com/删除第二个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="http://www.mamicode.com/删除第二个li">
</div>