jQuery基础学习(三)—jQuery中的DOM操作
一、查找节点
查找属性节点: 通过jQuery的选择器来完成。
操作属性节点: 调用jQuery对象的attr()来获取它的属性值。
操作文本节点: 通过text()方法。
//1.操作文本节点:通过jQuery的text()方法
alert($("#bj").text());
$("#bj").text("南京");
alert($("#bj").text());
//2.操作属性节点
//注:直接操作value属性值可以使用val()方法
alert($(":text[name='username']").attr("value"));
$(":text[name='username']").attr("value","呵呵");
二、插入节点
1.创建节点
$(HTML);
var $li_1 = $("<li id='bj'>北京</li>");
var $li_2 = $("<li id='sh'>上海</li>");
2.插入节点
二、删除节点
1.remove()
从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。当某个节点用remove()方法删除后，该节点所包含的所有后代节点将被同时删除。这个方法的返回值是一个指向被删除的节点的引用。
<ul id="fruit"> <li id="apple">苹果</li> <li>香蕉</li> <li>草莓</li> <li>桃子</li> </ul>
$("ul li[id='apple']").remove();
删除前: 删除后:
2.empty()
清空节点，清空元素中的所有后代节点(不包含属性节点)。
$("ul li[id='apple']").empty();
删除前: 删除后:
三、克隆节点
clone(): 克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何事件和行为。
clone(true): 复制元素的同时也复制元素的事件。
<p>你喜欢的水果?</p> <ul id="fruit"> <li id="apple">苹果</li> <li id="banana">香蕉</li> <li>草莓</li> <li>桃子</li> </ul>
$("li").click(function(){
alert($(this).text());
});
$("#apple").clone().insertAfter("#banana");//此时新添的节点有相同的id但是没有点击事件
$("#apple").clone(true).attr("id","apple2").insertAfter("#banana");//修改了id同时添加的事件
四、替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。
replaceAll(): 和上面一样，只是主谓替换了。
$("<li>荔枝</li>").replaceAll($("#fruit li:last"));
$("#fruit li:eq(1)").replaceWith($("<li>橘子</li>"));
替换前: 替换后:
下列代码实现节点的互换
//节点的替换
var $apple2 = $("#apple").clone(true);
var $peach2 = $("#peach").clone(true);
$("#apple").replaceWith($peach2);
$("#peach").replaceWith($apple2);
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失。
五、包裹节点
wrap(): 将指定节点用其他标记包裹起来。 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义。
wrapAll(): 将所有匹配的元素用一个元素来包裹。而 wrap() 方法是将所有的元素进行单独包裹。
wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。
$("#fruit li").wrap("<font color='red'></font>");
$("#fruit li").wrapAll("<font color='red'></font>");
$("#fruit li").wrapInner("<font color='red'></font>");
上面三种对应的HTML结构:
六、属性操作
1.获取属性和设置属性
attr()
//1.获取属性
var id_text = $("#apple").attr("id");
alert(id_text);//apple
//2.设置属性
$("#apple").attr("id","apple2");
alert($("#apple2").attr("id"));//apple2
//3.设置多个属性
$("p").attr({"title" : "hehe","name" : "test"});
jQuery 中有很多方法都是一个函数实现获取(getter)和设置(setter). 如: attr(), html(), text(), val(), height(), width(), css() 等。
2.删除属性
removeAttr();
如果要删除<p>元素的title属性，可以使用下面的。
$("p").removeAttr("title");
七、设置和获取HTML、文本和值
(1)html()
该方法类似于JavaScript中的innerHtml属性，可以用来读取和设置某个元素中的HTML内容。
<p><strong>你喜欢的水果?</strong></p>
alert($("p").html());
结果:
注意: html()方法可以用于XHTML文档，但是不能用于XML文档。
(2)text()
该方法类似于JavaScript中的innerText()属性，可以用来读取或者设置某个元素中的文本内容。
<p><strong>你喜欢的水果?</strong></p>
alert($("p").text());
结果:
(3)val
用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选框，它都可以返回元素的值。如果是多选，就返回数组。
