jQuery过滤选择器的使用

最新推荐文章于 2022-11-04 21:57:15 发布

Dewey666

最新推荐文章于 2022-11-04 21:57:15 发布

阅读量424

点赞数

分类专栏：效果初现文章标签： jQuery过滤选择器

本文链接：https://blog.csdn.net/IT666DHW/article/details/78195960

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!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>jQuery过滤选择器的使用</title>
<script src="jquery-2.1.0.js"></script>
<script>

/* 事实证明：加上空格求值更正确 */

$(function(){
//1.:first与:last的使用：
//alert("ul标签长度："+$("ul").length);
//alert("ul标签中内容（.text()方法）："+$("ul").text());
//alert("ul标签中代码（.html()方法）："+$("ul").html());
//alert("ul标签中第一个元素长度：："+$("ul:first").length);
//alert("ul标签中第一个元素（带空格）长度："+$("ul :first").length);
//alert("ul标签中第一个元素（带空格）内容（.text()方法）："+$("ul :first").text());
//alert("ul标签中第一个元素内容（.text()方法）："+$("ul:first").text());
//alert("ul标签中第一个元素代码（.html()方法）："+$("ul:first").html());
//alert("ul标签中第一个元素（带空格）代码（.html()方法）："+$("ul :first").html());
//alert("ul标签中最后一个元素长度："+$("ul:last").length);
//alert("ul标签中最后一个元素（带空格）长度："+$("ul :last").length);
//alert("ul标签中最后一个元素内容（.text()方法）："+$("ul:last").text());
//alert("ul标签中最后一个元素（带空格）内容（.text()方法）："+$("ul :last").text());
//alert("ul标签中最后一个元素代码（.html()方法）："+$("ul:last").html());
//alert("ul标签中最后一个元素（带空格）代码（.html()方法）："+$("ul :last").html());

//2. :Not(selector)：选取除了与给定选择器selector相同的其他元素。
//alert($("ul :not(#u1)").text());

//3. :even：选取索引值为偶数的所有元素,从零开始
//alert($("ul :even").text());

//4. ：odd：选取索引值为奇数的所有元素
//alert($("ul :odd").text());

//5. ：eq（index）：选取与给定索引元素下标匹配的元素
//alert($("ul :eq(6)").text());
//选取给定索引元素下标为2和6匹配的元素
//alert($("ul :eq(2),ul :eq(6)").text());

//6. ：gt（index）：匹配大于给定索引值的元素。
//alert($("ul :gt(0)").text());

//7. ：lt（index）：匹配小于给定索引值元素
//alert($("ul :lt(11)").text());

//8. ：header：选择标题元素h1、h2等
//alert($("ul :header").text());

});
</script>
</head>

<body>
<ul>
<li id="u1">列表1</li>
<li id="u2">列表2</li>
<li>列表3</li>
<li>列表4</li>
<h4>标题1</h4>
<h3>标题2</h3>
</ul>
<ul>
<li>列表11</li>
<li>列表21</li>
<li>列表31</li>
<li>列表41</li>
<h4>标题10</h4>
<h3>标题20</h3>
</ul>
</body>
</html>