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>
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():获取元素滚动条距离左侧的距离