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.query.js 取参数的两点问题分析
Aug 06 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
javascript实现倒计时提示框
Mar 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Python实现线程池代码分享
2015/06/21 Python
Python单链表简单实现代码
2016/04/27 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python中的Numpy矩阵操作
2018/08/12 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
公司培训心得体会
2014/01/03 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
爱心捐书活动总结
2014/07/05 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书