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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
javascript 写类方式之三
Jul 05 Javascript
javascript call方法使用说明
Jan 11 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
在vscode 中设置 vue模板内容的方法
Sep 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
python list转矩阵的实例讲解
2018/08/04 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
中科方德软件测试面试题
2016/04/21 面试题
心得体会范文
2014/01/04 职场文书
施工班组长岗位职责
2014/01/05 职场文书
运动会演讲稿100字
2014/08/25 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
紫日观后感
2015/06/05 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers