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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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使用qr生成二维码的示例分享
2014/01/20 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
php文件包含的几种方式总结
2019/09/19 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
教师评语大全
2014/04/28 职场文书
质量安全标语
2014/06/07 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书