jQuery之过滤元素操作小结
1:eq(index)方法
用于获取第n个元素,这个元素的位置从0开始算起,语法格式如下:eq(index)
获取第3个表格,并将它的背景色设置为"#fcf", 代码如下:$("td").eq(2).css("background", "#fcf");
2:filter(expr)方法
用于筛选出与指定表达式匹配的元素集合,用于缩小匹配的范围,用逗号分隔多个表达式,那么多个表达式之间是“或”的关系,
语法如下:filter(expr)
$("input").filter(".sel").css("backgroud", "#fcf"); //选取带有class属性值为sel的input元素,并设置它的背景色
$("input").filter(".sel, :first").css("background", "#fcf"); //选取带有class属性值的input元素或者选取当前领域中的第一个元素,并设置它们的背景色,
表达式之间用逗号分隔
3:filter(fn)方法
用于筛选出与指定函数返回值匹配的元素集合,该函数内部将对每个对象计算一次(如$:each)。如果调用的函数返回false,则这个元素将被删除,
否则就会保留。语法格式如下:filter(fn)
. 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>filter(fn)用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("p").filter(function(index){
return $("ol", this).length == 0;
}).css("color", "blue");
})
</script>
</head>
<body>
<p>
<ol>
<li>hello</li>
</ol>
</p>
<p>how are you?</p>
</body>
</html>
假设子元素中不含有ol元素,并设置该元素的字体颜色为蓝色。
4:has(expr)方法
用于保留包含特定后代的元素,去掉那些不含有指定后代的元素,该方法将会从给定的jquery对象中重新创建一组匹配的对象,提供的选择器会一一测试原先
那些对象的后代,含有匹配后代的对象将得以保留,语法格式如下:
has(expr)
. 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>has(expr)用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("li").has("ul").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li id="menu_li">
<ul id="menu_ul">
<li>新闻</li>
<li>网页</li>
<li>知道</li>
</ul>
</li>
<li>正文</li>
<li>结尾</li>
</ul>
</body>
</html>
5: hasclass(class)
用于检查当前的元素是否含有某个特定的类,如果有,则返回true
. 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>hasclass用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("p").click(function() {
if($(this).hasclass("protected")) {
$(this).css("border", "1px solid blue");
}
});
})
</script>
</head>
<body>
<p class="protected">p元素</p>
<p>p元素二</p>
</body>
</html>
6:map(callback)方法
map(callback)方法用于将一组元素转换成其他数组(无论是否是元素数组), 可以用这个函数来建立一个列表,无论是值、属性还是css样式,或者其他特别形式,
都可以用$.map()来方便的建立,语法格式如下:
map(callback)
上一篇: 张雪峰评北京理工大学:北理工是什么档次的985学校?
下一篇: 隔壁的顺口溜笑话