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" /> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
    $(function(){ 
            $("#aFirst").click(function(){ 
                    $("div[id]").each(function(){ 
                        $(this).css("background","#773300"); 
                    }) 
            }) 
            $("#aSecond").click(function(){ 
                    $("div[id = div2]").each(function(){ 
                         $(this).css("background","#8833ff"); 
                    }) 
            }) 
            $("#aThird").click(function(){ 
                    $("div[id != div2]").each(function(){ 
                         $(this).css("background","#87f289"); 
                    }) 
            }) 
            $("#aFourthly").click(function(){ 
                    $("div[name ^= DIV]").each(function(){ 
                         $(this).css("background","#140586"); 
                    }) 
            }) 
            $("#aFifthly").click(function(){ 
                    $("div[name $= ly]").each(function(){ 
                         $(this).css("background","#930584"); 
                    }) 
            }) 
            $("#aSixth").click(function(){ 
                    $("div[name *= th]").each(function(){ 
                         $(this).css("background","#099483"); 
                    }) 
            }) 
            $("#aSeventh").click(function(){ 
                    $("div[id][name !=Fifthly][name *= i]").each(function(){ 
                         $(this).css("background","#938607"); 
                    }) 
            }) 
     }) 
// --></script> 
<title>无标题文档</title> 
</head> 
<body> 
<a href="#" onclick="javascript:location.reload();">重置</a> 
<div id="div1" name ="DIV_First">div1</div> 
<div id="div2" name ="DIV_Second">div2</div> 
<div id="div3" name = "DIV_Third">div3</div> 
<div id="div4" name = "DIV_Fourthly">div4</div> 
<div id="div5" name="Fifthly">div5</div> <a href="#" id="aFirst">设置页面所有DIV元素的背景颜色</a>| 
<a href="#" id="aSecond">设置第2个DIV的背景颜色</a>| 
<a href="#" id="aThird">设置除第2个DIV以外DIV的背景颜色</a>| 
<a href="#" id="aFourthly">设置name属性值以DIV开头的元素</a>| 
<a href="#" id="aFifthly">设置name属性值以ly结尾的元素</a>| 
<a href="#" id="aSixth">设置name属性值包含th的元素</a>| 
<a href="#" id="aSeventh">综合应用</a> 
</body> 
</html>

1.$("selector [Attribute]")--注,以下直接简写为[Attribute]
描述:获取selector选择的元素集合里,拥有Attribute属性的元素集合。应该较为简单,在这就不做啥详细说明了,有不了解的跟下贴,哈
返回值:Array(Element);
2.[attribute=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值等于Value的元素集合。
返回值:Array(Element);
3.[attribute!=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值不等于Value的元素集合。
返回值:Array(Element);
4.[attribute^=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值以Value开头的元素集合。相当于正则的规范^^
返回值:Array(Element);
5.[attribute$=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值以Value结尾的元素集合。相当于正则的规范^^
返回值:Array(Element);
6.[attribute*=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值包含Value的元素集合。
返回值:Array(Element);
7.[selector1][selector2][selectorN]
描述:与第一章中,基本选择器综合应用一样,此方法也就是前6种的综合版,就如我例子中$("div[id][name !=Fifthly][name *= i]")就是取所有的div元素中,拥有ID属性&&name属性!=Fifthly&&name属性包含字符i的DIV元素的集合,大家用我例子试下就能很清楚的了解看到效果了,哈。好好利用此方法应该很有用^^
返回值:Array(Element);
Javascript 相关文章推荐
jQuery中:image选择器用法实例
Jan 03 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
JQuery 学习笔记 选择器之四
Jul 23 #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
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Python单例模式实例分析
2015/01/14 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python反转列表的三种方式解析
2019/11/08 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
机电一体化应届生求职信范文
2014/01/24 职场文书
请假条标准格式规范
2014/04/10 职场文书
给公司的建议书范文
2014/05/13 职场文书
环境整治工作方案
2014/05/18 职场文书
销售经理工作检讨书
2015/02/19 职场文书
担保贷款承诺书
2015/04/30 职场文书
活动主持人开场白
2015/05/28 职场文书
西游记读书笔记
2015/06/25 职场文书
护士旷工检讨书
2015/08/15 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
Python保存并浏览用户的历史记录
2022/04/29 Python