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时间自动刷新实现原理与步骤
Jan 06 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
原生JavaScript实现随机点名表
Jan 14 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
Views rows style模板重写代码
2011/05/16 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
详解Python多线程
2016/11/14 Python
python保存文件方法小结
2018/07/27 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python操作cfg配置文件方式
2019/12/22 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
知识竞赛活动方案
2014/02/18 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android
Redis Lua脚本实现ip限流示例
2022/07/15 Redis