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 相关文章推荐
转换字符串为json对象的方法详解
Nov 29 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
vuejs指令详解
Feb 07 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
vue实现表格过滤功能
Sep 27 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
Vue ​v-model相关知识总结
Jan 28 Vue.js
canvas绘制折线路径动画实现
May 12 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
通过html表格发电子邮件
2006/10/09 PHP
PHP函数utf8转gb2312编码
2006/12/21 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python软件都是免费的吗
2020/06/18 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
Structs界面控制层技术
2013/10/11 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
好人好事演讲稿
2014/09/01 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
房屋买卖协议样本
2014/11/16 职场文书
股份转让协议书范本
2015/01/27 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
500字作文之周记
2019/12/13 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
background-position百分比原理详解
2021/05/08 HTML / CSS
php实现自动生成验证码的实例讲解
2021/11/17 PHP