jQuery对JavaScript中的DOM操作进行了封装,使用起来也更简便
jQuery中的DOM操作可分为:
样式操作
内容及Value属性值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作
1.样式操作
直接样式操作
使用css()为指定的元素设置样式值
设置单个属性
css(name,value)
同时设置多个属性
css({name:value, name:value,name:value…})
追加样式
addClass(class)或addClass(class1 class2 … classN)
移除样式
removeClass(“style2 ”)或removeClass("style1 style2 ")
切换样式
toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
含义:如果存在(不存在)就删除(添加)一个类。
2.内容及Value属性值操作
html代码操作
html()可以对HTML代码进行操作,类似于JS中的innerHTML
获取元素中的html代码
$(选择器).html();
设置元素中的html代码
$(选择器).html("标签及内容");
文本操作
text()可以获取或设置元素的文本内容
获取元素中文本内容
$(选择器).text();
设置元素中文本内容
$(选择器).text(“内容”);
html()和text()的区别
Value值操作
val()可以获取或设置元素的value属性值
获取元素中value属性值
$(选择器).val();
设置元素中value属性值
$(选择器).val("值");
3.节点操作
jQuery中节点操作主要分为
查找节点
创建节点
插入节点
替换节点
复制节点
删除节点
创建节点元素
工厂函数$()用于获取或创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
示例:创建含文本与属性的
元素节点
var $newNode2=$(“<li title='标题为千与千寻'>千与千寻</li>”);
插入子节点
插入同辈节点
替换节点
replaceWith()和replaceAll()用于替换某个节点
两者的关系类似于append()和appendTo()
复制节点
clone()用于复制某个节点
参数true表示复制事件处理
可以使用clone()实现输出DOM元素本身的HTML
删除节点
jQuery提供了三种删除节点的方法
remove():删除整个节点
detach():删除整个节点,保留元素的绑定事件、附加的数据
empty():清空节点内容
4.节点属性操作
获取与设置节点属性
attr()用来获取与设置元素属性
获取alt属性值
$(“选择器”).attr("属性名");
设置属性的值
$(“选择器").attr({“属性名”:"值",”属性名”:"值"});
removeAttr()用来删除元素的属性
$(“选择器").removeAttr("属性名");
5.节点遍历
遍历子元素
children()方法可以用来获取元素的所有子元素 但不包含子元素的子元素
eq()根据索引获取元素
遍历同辈元素
遍历前辈元素
parent():获取元素的父级元素
parents():元素元素的祖先元素
6.CSS-DOM操作
示例:
$("#d1").css("background-color","#00F");
$("#d1").height("300");
$("#d1").width("400");
$("#d1").offset({“top”:"50",”left”:"100"});