JQuery霹雳：三、DOM操作

最新推荐文章于 2024-09-12 18:02:32 发布

qb371

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量205

点赞数

分类专栏： jquery asp.net 文章标签： jquery class html css filter div

asp.net 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

(原创：灰灰虫的家http://hi.baidu.com/grayworm)

一、元素操作
1.创建节点：
使用JQuery的工厂函数$()实现
var $newNode = $("<div id='dd'></div>");

2.插入节点：
假设页面中HTML代码：
我想说：

JQuery代码：
$("p").append("您好"); 运行结果为：我想说：您好 等价于 $("您好").appendTo("p");
$("p").prepend("您好"); 运行结果为：您好我想说： 等价于 $("您好").prependTo("p");
$("p").after("您好"); 运行结果为：我想说：您好 等价于 $("您好").insertAfter("p");
$("p").before("您好"); 运行结果为：您好我想说： 等价于 $("您好").insertBefore("p");

实现节点移动操作：
页面代码：
 你最喜欢的水果是?
 <ul>
 <li title='苹果'>苹果</li>
 <li title='橘子'>橘子</li>
 <li title='菠萝'>菠萝</li>
 </ul>

JQuery代码：
$("ul li:eq(1)").before($("ul li:eq(2)"));
或
$("ul li:eq(2)").before($("ul li:eq(1)"));

运行结果：
你最喜欢的水果是?
   苹果
   菠萝
   橘子

3.删除节点：
$("ul li:first").remove();返回被移除的元素对象，把列表中的第一个元素删除掉
$("ul li:first").empty();把列表中第一个元素项内容清空，但保留元素。

4.复制节点：
$(this).clone().appendTo("ul"); 复制当前节点并追加到ul元素中。
$(this).clone(true).appendTo("ul"); 复制当前节点并追加到ul元素中。
上面第一种方式中，只把元素内容复制过去，而第二种方式clone(true)能够把元素内容和元素行为（事件）一起复制过去。

5.替换节点：
$("p").replaceWith("你喜欢的水果：");
还可以使用replaceAll()，replaceAll()只是颠倒replaceWith()的操作。
$("你喜欢的水果：").replaceAll("p");

6.包装节点：就是在元素的外部再套一层元素
$("p").wrap(""); 运行结果： 您最喜欢的水果：
$("p").wrapInner(""); 运行结果：您最喜欢的水果：
$("p").wrapAll("");把所有的元素都包括在一个标签对中。

如HTML代码如下：
 您最喜欢的水果：
 您最不喜欢的水果：
JQuery代码：
$("p").wrap("");运行结果：
 您最喜欢的水果：
 您最不喜欢的水果：

$("p").wrapAll("");运行结果：
 
 您最喜欢的水果：
 您最不喜欢的水果：

二、属性操作：
1.获取属性：使用attr("属性名")方法
var $title = $("p").attr("title");

2.设置属性：使用attr("属性名","属性值")方法
$("p").attr("title","这是新设的属性");
$("p").attr({"title":"mytitle","name":"test"});

3.删除属性：
$("p").removeAttr("title");

三、样式操作：
1.获取样式和设置样式：
var p_class = $("p").attr("class"); 获取元素的class值
$("p").attr("class","bluestyle"); 设置元素的class值为.bluestyle样式，在替换原来class设置的样式

2.追加样式：使用addClass()来实现
$("p").addClass("greenstyle"); 在元素原有的class样式的基础上再追加.greenstyle样式
运行结果：
请选择你喜欢的水果
会合并bluestyle和greenstyle两种样式，如果二者样式发生冲突，后者会覆盖前者。

3.移除样式：使用removeClass()来实现
$("p").removeClass("bluestyle"); //移除元素中值为bluestyle的class
运行结果：
请选择你喜欢的水果
如果要把bluestyle和greenstyle两种样式全都移除掉可以有以下三种写法：
$("p").removeClass("bluestyle").removeClass("greenStyle");
$("p").removeClass("bluestyle greenstyle");
$("p").removeClass();//移除所有的class样式。

4.切换样式：使用toggleClass()，如果不存在此样式，就添加此样式；如果已存在此样式就删除此样式。
$("p").toggleClass("otherstyle");
运行结果：
如果开始时是这样：
请选择你喜欢的水果
运行后就变为
请选择你喜欢的水果

如果开始时是这样：
请选择你喜欢的水果
运行后就变为
请选择你喜欢的水果

5.判断元素是否包含某样式：使用hasClass()，返回true或false
var ret = $("p").hasClass("another");
如果中存在.another样式，运行结果为true，否则运行结果为false;

四、获取和设置HTML、文本、值的操作：
1.html()：获取或设置元素内部的HTML内容
HTML文本：
您最喜欢的水果
JQuery代码：
var s = $("p").html();
s的值为：您最喜欢的水果

$("p").html("您最不喜欢的水果");
运行结果：
您最不喜欢的水果

2.text()：获取或设置元素内容文本内容
HTML文本：
您最喜欢的水果
JQuery代码：
var s = $("p").text();
s的值为：您最喜欢的水果

$("p").text("您最不喜欢的水果");
运行结果：
您最不喜欢的水果

3.val()：获取或设置表单无素的value值
无论是文本框、下拉列表、单选框等都可以。
defaultValue：表单元素的初始值。

val()还可以设置下拉列表、单选框、复选框被选中。
$("#single").val("选择1号"); 设置一个选中项
$(":checkbox").val(["选择2号","选择1号"]); 以数字形式赋值，设置多个选中项
在JQuery中，val()是从最后一个向前读取，如果value值或text中的任何一项符合都会被选中。

五、编历节点：
1.children()：只考虑子元素，不考虑后代元素
$("body").children()：body元素下的所有直接子节点

2.next()：
$("p").next()：p标记后紧邻的同辈元素

3.prev()：
$("p").prev()：p标记前紧邻的同辈元素

4.silbings()：
$("p").siblings()：与p标记同辈的所有元素

5.closest()：
从当前元素开始，沿DOM树向上查找最近的匹配元素。

另外还有find()、filter()、prevAll()、nextAll()、parent()、parents()等方法。

六、CSS DOM操作
CSS DOM就是读取或设置style对象的各属性。
1.直接使用css()获取或设置样式
$("p").css("color")：获取color的值
$("p").css("color","red")：设置color为red
$("p").css(["font-size":"30px","background-color":"gray"])：设置复合属性
$("p").css("opacity","0.5")：设置为半透明