jQuery中的DOM
- jQuery对JavaScript中的DOM操作进行了封装。
- jQuery中的DOM操作：
- 样式操作
- 内容及Value值操作
- 节点及节点属性操作
- 节点遍历（本章节元素就是节点）
设置和获取样式值
- 使用css()为指定的元素设置样式值或获取样式值。
示例： - 获取属性值：
$(this).css(name) // name属性名,例如:color
- 设置属性值：
$(this).css({
"border":"5px solid #f5f5f5",
"opacity":"0.5"
});
- addClass()：追加样式
$(selector).addClass(class);
或: $(selector).addClass(class1 class2 … classN);
- 前提要有这个class样式
- removeClass()：移除样式
$(selector).removeClass(“class”) ;
或 $(selector).removeClass("class1 class2 … classN ") ;
- 移除指定标签的class样式
- toggleClass()：切换样式
- 模拟了addClass()与removeClass()实现样式切换的过程
- $(selector).toggleClass(class) ;
- hasClass()：判断是否包含指定的样式
$(selector). hasClass(class);返回true或false,常和添加或移除样式连用。
HTML代码操作
-
html()可以对HTML代码进行操作，类似于JS中的innerHTML。
-
标签内容操作：text()：可以获取或设置元素的文本内容。
-
html( ) 和text( )方法的区别
-
val()：可以获取或设置元素的value属性值。
创建节点元素
- 工厂函数$()用于获取或创建节点
- $(selector)：通过选择器获取节点。
- $(element)：把DOM节点转化成jQuery节点。
- $(html)：使用HTML字符串创建jQuery节点。
- 创建节点示例：
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会了！</li>");
插入节点
-
元素内部插入子节点
-
元素外部插入同辈节点
删除节点
- jQuery提供了三种删除节点的方法
- remove()：删除整个节点。
- empty()：清空节点内容。
- detach()：删除整个节点，保留元素的绑定事件、附加的数据。
替换节点
- replaceWith()和replaceAll()用于替换某个节点。
- 示例：
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
// 两者的关系类似于append()和appendTo()
复制节点
- clone()用于复制某个节点。
- $(selector).clone([includeEvents]) ;
- 参数includeEvents：ture或flase, true复制事件处理，就是新增的节点和原节点一样带有原节点的事件处理；flase时反之。
获取与设置元素属性
- attr()用来获取与设置元素属性。
-
语法：$(selector).attr({ [name1:value1] … [nameN:valueN] }) ;
删除元素属性
- removeAttr()用来删除元素的属性
- 语法：$(selector).removeAttr(name) ;
节点遍历
- children()方法可以用来获取元素的所有子元素，但不包含子元素的子元素。
- 语法：$(selector).children([expr]);
-
遍历同辈元素
-
遍历前辈元素
- parent()：获取元素的父级元素。
- parents()：获取元素的祖先元素。
- filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
- 示例：找到包含 class=.intro 的 p 标签,为其设置css属性。
<script>
$(document).ready(function(){
$("p").filter(".intro").css("color","yellow");
});
</script>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<p>我的名字叫 Donald。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
- find(expr|obj|ele)：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
- 示例：从所有的段落开始，进一步搜索下面的span元素。与$(“p span”)相同。
<script>
$("p").find("span")
</script>
<p><span>Hello</span>, how are you?</p>
- each( ) ：规定为每个匹配元素规定运行的函数
-
语法：$(selector).each(function(index,element)) ; index：选择器的位置。 element：当前的元素。 - 示例：
$("img").click(function(){
$("li").each(function(){
var str=$(this).text()+"<br>";
$("section").append(str);
})
});
- end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
- 示例：$(“li”).first().css(“background”,"#b8e7f9").end().last().css (“background”,"#d3f4b5");
- end()前边的语句正常结束，后边的语句是给最后 li 标签添加背景颜色，仍然成立，前后互不影响。
CSS-DOM操作
- 除css()外，还有获取和设置元素高度、宽度等的样式操作方法。更多操作请查阅API。
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
