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 confirm()方法的使用方法实例
Jul 13 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
深入Node TCP模块的理解
Mar 13 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
js回调函数仿360开机
2019/12/26 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
利用Python如何批量更新服务器文件
2018/07/29 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
网站设计师的岗位职责
2013/11/21 职场文书
六查六看六改心得体会
2014/10/14 职场文书
三潭印月的导游词
2015/02/12 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
活动宣传稿范文
2015/07/23 职场文书