jQuery之过滤元素操作小结_Javascript教程-查字典教程网
jQuery之过滤元素操作小结
jQuery之过滤元素操作小结
发布时间:2016-12-30 来源:查字典编辑
摘要:1:eq(index)方法用于获取第N个元素,这个元素的位置从0开始算起,语法格式如下:eq(index)获取第3个表格,并将它的背景色设置...

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" "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" />

<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" "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" />

<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" "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" />

<title>hasClass用法</title>

<script src="jquery-1.4.2.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

$("div").click(function() {

if($(this).hasClass("protected")) {

$(this).css("border", "1px solid blue");

}

});

})

</script>

</head>

<body>

<div>div元素</div>

<div>div元素二</div>

</body>

</html>

6:map(callback)方法

map(callback)方法用于将一组元素转换成其他数组(无论是否是元素数组), 可以用这个函数来建立一个列表,无论是值、属性还是CSS样式,或者其他特别形式,

都可以用$.map()来方便的建立,语法格式如下:

map(callback)

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类