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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 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之Smarty入门
2007/01/04 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python中set()函数简介及实例解析
2018/01/09 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python绘制圆柱体的方法
2018/07/02 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python实现简单猜单词游戏
2020/12/24 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
美发活动策划书
2014/01/14 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Mysql文件存储图文详解
2021/06/01 MySQL
MySQL 数据库范式化设计理论
2022/04/22 MySQL