jQuery中DOM操作

1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作

2 分类:
      1)DOM Core(核心):用途广泛 支持多种编程语言

2)HTML DOM:代码简短 只用于处理web文档

      3)CSS DOM:对样式的操作
                  作用:用于获取和设置style对裂的各种属性 使网页呈现不同效果

3 DOM操作

1)节点操作

a)查找节点: 查节点:利用jquery选择器
　　                    例:$("ul li:eq(2)") 查找到ul下的li节点的第三个节点
　　           查属性:使用attr()方法,若参数为一个则传入属性名称.若参数为两个则为设置属性

                          例:$("p").attr("title") 查找到p标签的title属性

b)创建节点:元素节点:$("<li></li>") 创建<li>节点
      　　　文本节点:$("<li>xxxxx</li>")
　　　　　属性节点:$("<li title='xxxx'></li>")

c)插入节点:append():给与a元素匹配的元素内部添加 $("a").append("content")
　　　　　　例:$("p").append("<b>其他</b>");
　　　　　 appendTo():将content添加到a元素内部 $("content").appendTo("a")
　　　　　　例:$("<b>其他</b>").appendTo("p");
　　　　　prepend():在a元素内部前面添加content $("a").prepend("content")
　　　　　　例:$("p").prepend("<b>其他</b>");
　　　　   prependTo():将content添加到a元素内部前置 $("content").prependTo("a")
　　　　　　例:$("<b>Hello</b>").prependTo("p");
　　　　   after():在a元素外部的后面添加content $("a").after("content")
　　　　　　例:$("p").after("<b>Hello</b>");
　　　　   insertAfter():将content插入到a外部之后 $("content").insertAfter("a")
　　　　　　例:$("<b>Hello</b>").insertAfter("p");
 　　　　  before():在a元素外部的前面插入content $("a").before("content")
　　　　　　例:$("p").before("<b>Hello</b>");
　　　　   insertBefore():将content插入到a外部的前面 $("content").insertBefore("a")
　　　　　　例:$("<b>Hello</b>").insertBefore("p");

d)删除节点:
　　　　　　remove():作用:删除所有匹配元素以及它的后代元素 删除元素引用

($("ul li:eq(1)").remove()).appendTo("ul");

　　　　　　empty():清空节点 $("ul li:eq(1)").empty();

e)复制节点:$("ul li").click(function(){
　　　　　　$("this").clone().appendTo(); //复制当前点击的节点将它追加到<ul>元素

f)替换节点:
　　　　　　replaceWith():$("p").replaceWith("<strong>你最不喜欢的球类运动是?</strong>")
　　　　　　replaceAll():$("<strong>你最不喜欢的球类运动是?</strong>").replaceAll("p");

g)包裹节点:wrap()与wrapAll()相同,都是从外部包裹元素
　　　　　  warpInner():从该元素内部开始包裹 不包裹该元素

h)遍历节点:
　　　　　　children():获取匹配元素子元素集合
　　　　　　　　　　　　语法:$(a).children();
　　　　　　next():取得该元素匹配元素的下一个同辈元素 相当于层次选择器
　　　　　　　　　　　　语法:$(a).next()==>>$(a+next)
　　　　　　prev():取得与该元素匹配的前面的同辈元素
　　　　　　　　　　　　语法:$(a).prev()
　　　　　　siblings():取得与该元素匹配的所有同辈元素,自身除外
　　　　　　　　　　　　语法:$(a).siblings();
　　　　　　Closest():取得最近的匹配元素
　　　　　　　　　　　　语法:$(a).closet();
　　　　　　nextAll(String):查找当前元素之后的所有元素。
　　　　　　prevAll(string):查找当前元素之前所有的同辈元素
　　　　　　parent():取得一个包含着所有匹配元素的直接父元素
　　　　　　parents():取得该元素的所有父元素
　　　　　　find():找到所有与指定表达式匹配的元素。
　　　　　　filter():筛选出与指定表达式匹配的元素集合
　　　　　　andSelf():加入先前所选的加入当前元素中

　　　　　　例:

//选取所有div以及内部的p，并加上border类
//HTML 代码:
<div><p>First Paragraph</p><p>Second Paragraph</p></div> 
//jQuery 代码:
$("div").find("p").andSelf().addClass("border");
//结果:
<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div> 

 

　　　　　　end():将匹配的元素列表变为前一次的状态。

　　　　　　例:

//例:选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
//HTML 代码:
<p><span>Hello</span>,how are you?</p> 
//jQuery 代码:
$("p").find("span").end() 
//结果:
 <p><span>Hello</span> how are you?</p> 

View Code

 

 

2)属性操作:
　　　　获取设置属性:$(a).attr(); //获取
　　　　　　　　　　 $(a).attr("属性名称","值"); //设置

　　　　　　　　　　设置多个属性:attr(属性1:值1,属性2:值2,属性n:值n)
　　　　删 除 属 性:removeAttr()
　　　　　　　　　　语法:$(a).removeAttr(属性名称);

3)样式操作:
　　　　a)获取设置: 获取:$(a).attr(样式名); 设置:$(a).attr(样式名,样式);
　　　　b)追加样式:$(a).addClass(样式名称)
　　　　c)移除样式:$(a).removeClass(样式名); 移除多个:$(a).removeClass(样式1 样式2 样式n)
　　　　d)切换样式: toggle():控制行为上的切换 toggleClass():控制样式上的切换
　　　　e)判断样式是否存在: hasClass():$(a).hasClass(样式名)==>>$(a).is("."+样式名);

4)设置和获取HTML,文本和值:
　　　　html()方法: 相当于javascript中的innerHTML属性 获取或设置某元素中的html内容
　　　　text()方法:==>>JS中innertText属性 读取或设置元素的文本内容
　　　　val() 方法:==>>JS中value属性 设置和获取元素值

4 CSS DOM
　　　　a)css():获取元素样式 传入一个参数 //获取元素样式 传入两个参数 //设置元素样式
　　　　b)opacity属性:设置透明度 数值越大可见度越高 透明度越低
　　　　c)height(em): em为空值:获取元素高度 反之:设置元素高度
　　　　d)offset():浏览器边框的偏移度 仅仅对可见元素有效 包含top和left两个属性
　　　　e)position():
　　　　f)scrollTop():获取元素滚动条距离顶端的距离
　　　　g)scrollLeft():获取元素滚动条距离左侧的距离