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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
简单的Jquery全选功能
Nov 07 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
JS实现音乐导航特效
Jan 06 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
长波知识介绍
2021/03/01 无线电
php 获取select下拉列表框的值
2010/05/08 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python reduce 函数使用详解
2017/12/05 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
三月学雷锋活动总结
2014/06/26 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
汽车转让协议书范本
2014/12/07 职场文书
祝寿主持词
2015/07/02 职场文书
党员廉政准则心得体会
2016/01/20 职场文书