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 相关文章推荐
基于jquery的气泡提示效果
May 31 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
layui select动态添加option的实例
Mar 07 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
JS实现简单的九宫格抽奖
Jun 28 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python爬虫要用到的库总结
2020/07/28 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
Oracle性能调优原则
2012/05/03 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
教师考察材料范文
2014/06/03 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript