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 学习笔记(六)
Dec 31 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
解析dedeCMS验证码的实现代码
2013/06/07 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
easyui validatebox验证
2016/04/29 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python for循环与range函数的使用详解
2019/03/23 Python
django的settings中设置中文支持的实现
2019/04/28 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
C++的几个面试题附答案
2016/08/03 面试题
经理管理专业毕业自荐书范文
2014/02/12 职场文书
个人授权委托书范本
2014/04/03 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
师德师风整改措施
2014/10/24 职场文书
暑假安全保证书
2015/02/28 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
iPhone13再次曝光
2021/04/15 数码科技
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python