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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
环保专业大学生职业规划设计
2014/01/10 职场文书
擅自离岗检讨书
2014/02/11 职场文书
搞笑车尾标语
2014/06/23 职场文书
女生节标语
2014/06/26 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
储备店长岗位职责
2015/04/14 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript