您好,登錄后才能下訂單哦!
這篇文章主要講解了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'); });
返回當前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>
看完上述內容,是不是對jQuery的選擇方法和$(this)的使用方法有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。