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游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
vue实现页面滚动到底部刷新
Aug 16 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
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python函数的5种参数详解
2017/02/24 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
《圆明园的毁灭》教学反思
2014/02/28 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
高校教师个人总结
2015/02/10 职场文书
李强优秀员工观后感
2015/06/16 职场文书