一、選擇器：

:eq() - 選取帶有指定 index 值的元素，從0開始計數

var $li = $( ‘ul li : eq(1)’ ); //獲取當前 ul 節點里第2個 li 節點
var li_txt = $li.text(); //獲取文本內容
alert( li_txt ); // 打印文本內容

高級選擇器：

get()	方法獲取由選擇器指定的 DOM 元素。$().get(2)
find()	jq提供的一個等價的后代選擇器。（子選擇器+孫選擇器集合）
chidren()	等價子選擇器。（子選擇器） 同 #div > p 的形式，從右往左匹配執行
prev()	同一個同級的上一個節點元素，同next()相反是后一個。
siblings()	上下同級的所有元素，prev() 和 nextAll() 的簡化，
	選擇器如果不傳參，則就相當于傳遞了 * 號（全局），會造成性能浪費，所以最好帶參數。

$(“div”).find(".p").addClass(“wang”)

查找 div中的子元素，且子元素的class有p,給這個子元素添加wang的class

$('#box').find('p') - #box下的所有p標簽

執行的速度是最快 的，會使用getElementById() - 對應 #box、ByName、ByTagName - 對應 p 和 querySelectorAll() - 執行css樣式；

如果一開始對`$(’#box’)進行賦值，那么jq 就對其變量進行緩存，速度會更快：
var box = $(’#box’);
var p = box.find(‘p’);

//get() 返回原生的 document節點 $(function() { //if() 的話返回值就是 true 或者 falseif($('#box').get(0)) { //如果$('#box').get(0) / （第一個box）值存在，就執行下面的代碼$('#box').css('color','red');} })

$(’ #box .pull-left ') - 選擇器越復雜，字符串解析就越慢

#box > p 高級選擇器在ie6上是不支持。

---

二、jQuery 過濾選擇器 === css偽類選擇符（器），可以做到兼容 ie6~8 ：

選擇器的例子：地址

jquery提供的常用選擇器的專用四個方法：

方法：

$('li)').eq(-2) —— 倒數第二個li，負數沒有0，從1開始。	$('li)').last()'
$('li)').first()	$('li)').not('.red')

$(‘li:nth-child(3n)’) - 每隔3倍顯示，3、6、9 。3n+1 - 3倍的第四個顯示，4、7、10，這里的3n也就是中間少兩個

/* 匿名函數中的 $(this) 就等于 執行中的 $('.red') 本身，因為擴展性會更好。 */alert($('.red').is(function() {return $(this) }))/* 用for來打印對象數組 */ var box = $('div').css(['color','width','height']); for (var i in box) {alert(i[0]); // 返回color }/* $each() 可以遍歷原生態的javascript對象數組，代替for 也可以遍歷 jquery 對象數組 */ var box = $('div').css(['color','width','height']); $each(box,function(attr,value) {alert(attr + ':' value) // attr 拿到數組的屬性名，value 拿到具體的屬性值 }) //遍歷jq數組： $('div').$each(function(index,element) {alert(index + ':' element) //index 為索引，element為dom })

---

三、添加calss類：

利用toggleClass 添加 / 刪除 class

$('div').click(function() {$(this).toggleClass(function() {// 局部變量if ($(this).hasClass('red')) {$(this).removeClass('red');return 'green';} else {$(this).removeClass('green');return 'red';}}) })

jq綁定事件：

bind(type,[data],fn): 可以傳遞三個參數，type - 事件名稱,data-可選，傳遞額外數據，fn - 處理函數

// 通過對象鍵值對 綁定多個參數 $('input').bind({ // mouseout - 鍵，冒號逗號分隔'mouseout': function() {alert('移出');},'mouseover': function() {alert('移入');} })//刪除事件 $('input').bind('click',fn1); //綁定函數 $('input').bind('click',fn2); function fn1() {alert('fn1') } function fn2() {alert('fn2') }$('input').unbind('click',fn2); // 刪除綁定了click事件的fn2//over 會觸發子節點，而enter則不會觸發 $('div').mouseover(function() {$('strong').html(function(index,value) { //index為索引值return value + '1'}) })

---

2、查找屬性節點

atrr()方法 - 設置或返回被選元素的屬性值
var $para = $(’ p ‘); // 獲取到 p節點
var p_txt = $para.atrr(’ title ‘); // 獲取到 p節點屬性title
alert(’ p_txt '); // 打印title值

if()方法 - is(’:visible’) 如果內容顯示

補充：
$(this).addClass(‘active’); 為.head 添加類名
$content.addClass{(}^{\prime }activ{e}^{\prime });為變量為$content添加類名；removeClass() 刪除類名

---

3、在javascript代碼中，通常使用window.onload 方法，而在jQuery中，$(document).ready()方法使用最常見；

執行機制：
1、window.onload 是在網頁中所有的元素完全加載到瀏覽器后才執行，即js此時才可以訪問網頁中的任何元素；
2、(windowt).load() 方法會在所有內容加載完畢后觸發，如果處理函數綁定在元素上，則會在元素的內容加載完畢后觸發；

---

4、事件綁定：bind()方法可以對匹配元素進行特定事件的綁定；

適用單個切換：

$(function(){$('.head').bind('click', function() {var $content = $('.pp'); //找到要隱藏的元素并給它定義一個局部變量$contentif($content.is(':visible')) {$content.hide();}else {$content.show();}}) })<p class="head">如果你點我，pp就會消失。</p> <p class="pp">繼續點我!</p>

總結

以上是生活随笔為你收集整理的锋利的 jQuery 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。