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 Timer实现代码
Feb 17 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 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之数据库操作详解及乱码解决!
2007/01/02 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php无限级分类实现方法分析
2016/10/19 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python 函数中的参数类型
2020/02/11 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
旅游管理专业个人求职信范文
2013/12/24 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
大学生党员个人总结
2015/02/13 职场文书
学生退学证明
2015/06/23 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
Java线程的6种状态与生命周期
2022/05/11 Java/Android