jQuery 選擇方法及$(this)用法例項分析
阿新 • • 發佈：2020-05-20
本文例項講述了jQuery 選擇方法及$(this)用法。分享給大家供大家參考，具體如下：
選擇方法
用方法來選擇元素，可以視作$()函式的鏈式呼叫，返回仍然是一個jQuery物件
$(function() {
//一、根據結果集中元素位置來選擇：first(),last(),eq(),slice()
//1、選擇第一個li
$('li').first().css('color','red');
//2、選擇最後一個li
$('li').last().css('color','red');
//3、選擇第三個li,索引從0開始
$('li').eq(2).css('color','red');
//4、範圍選擇：slice(起始索引，結束索引)，索引從0開始，結果中不包括結束索引的資料
$('li').slice(1,4).css('color','red');
//5、slice()省略結束索引，預設選取到最後一個元素
$('li').slice(1,).css('color','red');
//6、slice()支援負數，從倒數開始選擇元素，如：slice(-3),選擇最後三個
$('li').slice(-3).css('color','red');
//二、根據結果集中元素的自身特性來選擇元素：filter(),not()
//從結果中選擇class為red的元素，等價於$('li.red')
$('li').filter('.red').css('color','red');
//filter()方法可以傳入一個回撥判斷函式，引數就是索引
$('li').filter(function(index) {return index%2 == 0}).css('color','red');
等價於：
$('li:even').css('color','red');
//與filter()功能相反的是not()方法，選擇所有奇數行
$('li').not(function(index) {return index%2 == 0}).css('color','red');
等價於：
$('li:odd').css('color','red');
//三、將選中元素集合當作上下文，其實就是一個定位標誌
//find(),children(),contents(),next(),prev(),nextAll(),prevAll(),parent(),parents(),closest(),parentsUntil()
//1、查詢所有li元素下面的strong元素，文字設定為red，可以深入到多級
$('li').find('strong').css('color','red');
//2、獲取當前元素的下一個元素，當前id在第5個li上
$('li').next().css('color','red');
//3、獲取從當前開始到結束的全部元素，會將子孫元素全選中
$('li').nextAll().css('color','red');
//4、獲取當前元素的前一個元素，prev()
$('li').prev().css('color','red');
//5、獲取當前元素的前面所有元素，prevAll()
$('li').prevAll().css('color','red');
//6、獲取當前元素父元素，parent()
$('li').parent().css('color','red');
});
$(this)用法
返回當前jQuery物件，與上下文相關：
<head>
<script>
$(document).ready(function() {
$('img').click(function(event) {
alert($(this).attr('alt'));
});
});
</script>
</head>
<body>
<img src="images/1.png" alt="one">
<img src="images/2.png" alt="two">
<img src="images/3.png" alt="three">
<img src="images/4.png" alt="four">
</body>
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程式設計有所幫助。