繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 学习笔记 选择器之五
- Javascript
- 颜色变换 像字符逐字输入的欢迎词
- CSS 伪类实现的鼠标滑动图片链接
- 百度用到的Js日历 大家可以看看
- CSS 渐变背景的6个演示代码
- Jquery 弹出层插件实现代码
- Javascript 模式实例 观察者模式
- [原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
- javascript window对象属性整理
- JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
- WEB页子窗口(showModalDialog和showModelessDialog)使用说明
- 用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
- 理解 JavaScript 预解析
- 理解JavaScript变量作用域更轻松
- JavaScript的变量作用域深入理解
- javascript写的一个链表实现代码
- Js 打字效果 逐一出现的文字
- javascript 走马灯效果的链接提示
- CSS 动态链接提示
- JavaScript 事件的一些重要说明
- JavaScript 三种不同位置代码的写法
Javascript 中的 JQuery 学习笔记 选择器之五
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 390 ::
收藏到网摘: n/a
测试代码如下,本例子中设置的着色比较多，哈，都是随便输些数字进去的，感觉这样更容易让大家看到效果，呵，如果我的讲的有哪不好麻烦大家多留言教导下^^
复制代码 代码如下:
<!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)；
评论 (0) All
