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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
AJAX学习笔记
May 18 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP5.3新特性小结
2016/02/14 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
Javascript Global对象
2009/08/13 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
关于js datetime的那点事
2011/11/15 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
vuex实现简易计数器
2016/10/27 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
浅谈Python中数据解析
2015/05/05 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
驾驶员安全责任书
2014/07/22 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
TypeScript 内置高级类型编程示例
2022/09/23 Javascript