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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
vue实现全选、反选功能
Nov 17 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
JavaScript 反射学习技巧
Oct 16 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
example1.php
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
node.js入门教程
2014/06/01 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python yield 使用浅析
2015/05/28 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
python中JWT用户认证的实现
2020/05/18 Python
django中related_name的用法说明
2020/05/20 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
我心目中的好老师活动方案
2014/08/19 职场文书
2015年教师节主持词
2015/07/03 职场文书
2016年五一促销广告语
2016/01/28 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis