提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery学习笔记选择器之四

jQuery笔记学习 选择器 之四
2023-06-13 09:14:11 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scriptsrc="js/jquery-1.3.2.js"></script>
<scripttype="text/javascript"><!--
$(function(){
    $("#aContains").click(function(){
        $("div:contains("hello")").each(function(){
            $(this).css("background","red");                            
        })                        
    })
    $("#aEmpty").click(function(){
        $("div:empty").each(function(){
            $(this).html("EmptyDIV");                            
        })                        
    })
    $("#aHas").click(function(){
        $("div:has(p)").each(function(){
            $(this).css("background","red");                        
        })                        
    })
    $("#aParent").click(function(){
        $("div:parent").each(function(){
            $(this).css("background","red");                        
        })                        
    })
})
//--></script>
</head>

<body>
<divid="div1">
    <p>helloword!</p>
</div>
<divid="div2">
    hello
</div>
<divid="div3"height="20px">
</div>
<divid="div4"></div>

<ahref="#"id="aContains">设置内容包含“hello”的节点红色背景颜色</a>
<ahref="#"id="aEmpty">设置无内容的DIV内容设为EmptyDIV</a>
<ahref="#"id="aHas">设置包含p节点的div节点红色背景颜色</a>
<ahref="#"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)；

相关文章