JQuery学习笔记4：选择器之四

最新推荐文章于 2022-04-02 10:18:23 发布

原创最新推荐文章于 2022-04-02 10:18:23 发布 · 687 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #div #xhtml #html #测试

JQuery 专栏收录该内容

7 篇文章

订阅专栏

本文通过实例演示了JQuery中的几种选择器用法，包括含有特定文本的元素、空元素、包含特定子元素的父元素及非空元素的选择。通过这些选择器可以高效地操作DOM。

JQuery选择器之四
以下是测试例子，这边测试例子不再像之前几章以显示HTML与ID的方式来查看结果，换以改变红色背景颜色来查看，应该会更直观点吧^^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:script src="js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id ="div1"> <p>hello word!</p> </div> <div id ="div2"> hello </div> <div id ="div3" height="20px"> </div> <div id ="div4"></div> <a href="#" mce_href="#" id="aContains">设置内容包含“hello”的节点红色背景颜色</a> <a href="#" mce_href="#" id="aEmpty">设置无内容的DIV内容设为EmptyDIV</a> <a href="#" mce_href="#" id="aHas">设置包含 p 节点的 div 节点红色背景颜色</a> <a href="#" mce_href="#" id="aParent">设置包含子节点的 div 节点红色背景颜色</a> </body> </html>
首先还是对本章的课外知识点进行说明下
1.element.css("attributeName","value")
描述：用于设置element的style，在例子中$(this).css("background","red");就是设置节点的background为red。
现在进入主题咯
1.$("TagName:contains('keyword')")
描述：用于获取所有TagName节点里包含keyword内容的节点集合
返回值：Array(Element)；
2.$("TagName:Empty")
描述：用于获取所有TagName节点里，内容为空的节点集合
返回值：Array(Element)；
3.$("TagName1:has(TagName2))
描述：用于获取所有TagName1节点里，包含TagName2子节点的节点集合
返回值：Array(Element)；
4.$("TagName:parent")
描述：用于获取所有TagName节点里，包含子节点的节点集合
返回值：Array(Element)；