JQuery 学习笔记 选择器之四

代码如下:

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

赞 (0)

相关推荐

  • JQuery 学习笔记 选择器之六

    复制代码 代码如下: <!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=&qu

  • JQuery 学习笔记 选择器之五

    复制代码 代码如下: <!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=&qu

  • JQuery 学习笔记 选择器之一

    本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^ 现在,让我们一起开始在JQuery的世界里飞翔吧^^ 首先,本章先来学习JQuery最基本的选择器的使用咯 先声明下,使用JQuery最基本的规则 $(document).ready(function(){ //do so

  • jQuery 选择器理解

    $的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): ----凡是运用$,其返回值是一个object $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".clas

  • jquery选择器(常用选择器说明)

    基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")                     选择所有的div标签元素,返回div元素数组 $(".myClass")           选择使用myClass类的css的所有元素 $("*")                        

  • jquery css 选择器演示代码

    jquery css 选择器演示代码

    效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

  • jQuery的强大选择器小结

    一 基本选择器 $("input") :选择所有是input标签的元素 $("#input1"):选择id为input1的元素 $(".acss"):选择所有包含acss 这个css类样式的 代码 复制代码 代码如下: <body> <a href="">link</a> <input id="input1" class="acss"> &

  • jquery 选择器部分整理

    这个是网页版,直接用ctrl+F搜索,如果大家不是经常上网,可以用chm版的更方便些.jQuery 1.3 API 参考手册 CHM锋利的jquery 电子书 近期我们将会将一些jquery学习教程逐步发一些.参考了锋利的jquery一书. $的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$(&

  • JQuery 学习笔记 选择器之三

    复制代码 代码如下: <!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=&qu

  • JQuery 学习笔记 选择器之二

    复制代码 代码如下: <!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=&qu

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

随机推荐