当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 学习笔记 选择器之五

Javascript
javaScript 数值型和字符串型之间的转换
从父页面读取和操作iframe中内容方法
IE DOM实现存在的部分问题及解决方法
jqPlot Option配置对象详解
jquery JSON的解析方式
JavaScript 捕获窗口关闭事件
xml 封装与解析(javascript和C#中)
JavaScript 设计模式学习 Singleton
JavaScript 设计模式学习 Factory
javascript CSS画图之基础篇
JavaScript 获取事件对象的注意点
JavaScript Konami Code 实现代码
Google Map API更新实现用户自定义标注坐标
JavaScript this 深入理解
javascript EXCEL 操作类代码
window.parent调用父框架时 ie跟火狐不兼容问题
关于取不到由location.href提交而来的上级页面地址的解决办法
JS input 数字验证代码
网页全屏显示代码说明分析
JS 学习笔记 防止发生命名冲突

No. « 149 150 151 152 »

技术文章搜索

关键字

Javascript 中的 JQuery 学习笔记 选择器之五

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 321 ::
收藏到网摘: 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)；