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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
键盘控制事件应用教程大全
Nov 24 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
javascript截取字符串小结
Apr 28 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Vue集成Iframe页面的方法示例
Dec 12 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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防止form重复提交的方法
2013/07/01 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
详解Python pygame安装过程笔记
2017/06/05 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
django的ORM模型的实现原理
2019/03/04 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python实现图片素描效果
2020/09/26 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
简述数据库的设计过程
2015/06/22 面试题
给孩子的新年寄语
2014/04/08 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书