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不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
原生js实现3D轮播图
Mar 21 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面向对象之多态
2014/08/20 PHP
php跨站攻击实例分析
2014/10/28 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
使用python Django做网页
2013/11/04 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
职业生涯规划书前言
2014/04/15 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
欢迎词怎么写
2015/01/23 职场文书
复活读书笔记
2015/06/29 职场文书
家属联谊会致辞
2015/07/31 职场文书
公司车辆管理制度
2015/08/04 职场文书