JQuery 学习笔记 选择器之四


Posted in Javascript onJuly 23, 2009
<!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);
Javascript 相关文章推荐
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
node中使用shell脚本的方法步骤
Mar 23 Javascript
JQuery 学习笔记 选择器之三
Jul 23 #Javascript
JQuery 学习笔记 选择器之二
Jul 23 #Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
jQuery TextBox自动完成条
Jul 22 #Javascript
JavaScript 动态生成方法的例子
Jul 22 #Javascript
模仿jQuery each函数的链式调用
Jul 22 #Javascript
You might like
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
js实现选项卡效果
2020/03/07 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python Process多进程实现过程
2019/10/22 Python
pandas分组聚合详解
2020/04/10 Python
python实现二分查找算法
2020/09/18 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
考试不及格的检讨书
2014/01/22 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
python turtle绘图命令及案例
2021/11/23 Python