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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
js中对象与对象创建方法的各种方法
Feb 27 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
js验证账户名是否重复
May 26 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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解压文件代码实现php在线解压
2014/02/13 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
谈谈JS中的!!
2017/12/07 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
js实现简单的秒表
2020/01/16 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
python追加元素到列表的方法
2015/07/28 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
便捷提取python导入包的属性方法
2018/10/15 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python中的With语句的使用及原理
2020/07/29 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
称象教学反思
2014/02/03 职场文书
我的小天地教学反思
2014/04/30 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
保研专家推荐信范文
2015/03/25 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python