jQuery筛选器常用总结
生活随笔
收集整理的這篇文章主要介紹了
jQuery筛选器常用总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>篩選</title>
<script rel="script" src="js/jquery.min.js"></script>
<script rel="script" src="js/vue.min.js"></script>
<style>
</style>
</head>
<body>
<p>Anna</p>
<p>Jack</p>
<p>Sunny</p>
<p>Anny</p>
<ol>
<li>列表項1</li>
<li>列表項<strong>2</strong></li>
<li>列表項3</li>
<li><strong>列</strong>表項<strong>4</strong></li>
</ol>
<em>wind</em>
<em class="weather">snow</em>
<em>sunny</em>
<ul>
<li>1</li>
<li>2
<ul>
<li>4</li>
<li>6</li>
<li>5</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<script>
1、eq();
$(document).ready(function () {
$("p").eq(1).css({"color":"red"});//正數第二個
$("p").eq(0).css({"color":"green"});//正數第一個
$("p").eq(-1).css({"color":"yellow"});//倒數第一個
$("p").eq(-2).css({"color":"blue"}); //倒數第二個
2、first();
$("li").first().css({"color":"#ff00ff"});//獲取第一個元素
3、last();
$("li").last().css({"color":"red"});//獲取最后一個元素
4、is();
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {//is 篩選器的使用
return $('strong', this).length === 2;//列表項內有兩個strong標簽的是列表項4
});
if ( isWithTwo ) {
$li.css("border", "1px solid #11dd22");//當當前點擊列表項有兩個strong標簽時就把邊框色改為#11dd22
} else {
$li.css("border", "1px solid #647787");//點擊列表項時把邊框改為#647787.
}
});
5、has();
$('li').has('ul').css('border', '1px solid #f0f');//給含有ul的li加上邊框,即只有距離ul很近的li才會被識別到，
// 否則是無法識別到的
6、slice();
//slice(start, [end])使用：
// start:開始選取子集的位置。第一個元素是0.如果是負數，則可以從集合的尾部開始選起。
//end:結束選取自己的位置，如果不指定，則就是本身的結尾。
$("p").slice(0, 1).wrapInner("<i></i>");//第一個p標簽文本變為傾斜
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>篩選</title>
<script rel="script" src="js/jquery.min.js"></script>
<script rel="script" src="js/vue.min.js"></script>
<style>
</style>
</head>
<body>
<p>Anna</p>
<p>Jack</p>
<p>Sunny</p>
<p>Anny</p>
<ol>
<li>列表項1</li>
<li>列表項<strong>2</strong></li>
<li>列表項3</li>
<li><strong>列</strong>表項<strong>4</strong></li>
</ol>
<em>wind</em>
<em class="weather">snow</em>
<em>sunny</em>
<ul>
<li>1</li>
<li>2
<ul>
<li>4</li>
<li>6</li>
<li>5</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<script>
1、eq();
$(document).ready(function () {
$("p").eq(1).css({"color":"red"});//正數第二個
$("p").eq(0).css({"color":"green"});//正數第一個
$("p").eq(-1).css({"color":"yellow"});//倒數第一個
$("p").eq(-2).css({"color":"blue"}); //倒數第二個
2、first();
$("li").first().css({"color":"#ff00ff"});//獲取第一個元素
3、last();
$("li").last().css({"color":"red"});//獲取最后一個元素
4、is();
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {//is 篩選器的使用
return $('strong', this).length === 2;//列表項內有兩個strong標簽的是列表項4
});
if ( isWithTwo ) {
$li.css("border", "1px solid #11dd22");//當當前點擊列表項有兩個strong標簽時就把邊框色改為#11dd22
} else {
$li.css("border", "1px solid #647787");//點擊列表項時把邊框改為#647787.
}
});
5、has();
$('li').has('ul').css('border', '1px solid #f0f');//給含有ul的li加上邊框,即只有距離ul很近的li才會被識別到，
// 否則是無法識別到的
6、slice();
//slice(start, [end])使用：
// start:開始選取子集的位置。第一個元素是0.如果是負數，則可以從集合的尾部開始選起。
//end:結束選取自己的位置，如果不指定，則就是本身的結尾。
$("p").slice(0, 1).wrapInner("<i></i>");//第一個p標簽文本變為傾斜
});
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/LindaBlog/p/9707739.html
總結
以上是生活随笔為你收集整理的jQuery筛选器常用总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习实战——特征工程之数据预处理
- 下一篇： 文献阅读（一）