jQuery入門基礎知識學習筆記
JS學了一段時間,之後自己也做了一些小的東西(最近在做個人主頁),做東西的過程中,大部分使用javascript來編寫,可是有些地方還是會用到一些jquery,比如,事件委託、事件繫結這部分的時候使用javascript會很麻煩,而且還存在一些問題,這時使用jquery,只用一個函式就能解決問題。還有就是急忙完成,比較趕的時候會使用jquery。囉嗦了大半天,小編的最終結論就是,jquery是用javascript封裝的一個庫,使用jquery能使用較少的程式碼,完成更強大的功能。說完了jquery的功能之後,現在就開始切入正題。
一、基礎核心
1.關於$
(1)頁面元素的選擇、內建的功能函式,都是用$來起始地
(2)$ //jquery物件的內部實現,也就是其函式
(3)$() //jquery物件{object,object}
(4)$(“#id”) //獲取到id節點,返回的是jquery物件{object,object}
(5)$(“#id”).css('color','red') //獲取到名為id的節點,並給其設定行內CSS樣式,返回的是jquery物件{object,object},因此是可
(6)$("#id").get(); //返回原生的DOM物件,可以批量處理
以實現程式碼的連綴功能
2.載入模式。
我們使用$(function(){})這種程式碼方式原因是我們jQuery庫檔案是在body元素之前載入的,我們必須等待所 有的DOM元素載入後,延遲支援DOM操作,否則就無法獲取到。 在延遲等待載入,JavaScript提供了一個事件為load,方法如下:
window.onload = function () {}; //JavaScript等待載入
$(document).ready(function () {}); //jQuery等待載入
3、常規選擇器
(1).簡單選擇器
a.$('div').css('color','orange'); //元素選擇器,返回多個元素
b.$('#box').css('color','orange'); //ID選擇器,返回單個元素
c.$('.box').css('color','orange'); //類(class)選擇器,返回多個元素
d.$('#box>p').css('color','orange'); //子選擇器,相容IE6+
注:jquery內建有容錯的功能,這樣避免想JS那樣每次對節點的獲取進行有效的判斷,從而帶來不需要的麻煩
(2).進階選擇器
(3).高階選擇器
說明:1. $('#box p').css('color','red');
$('#box').find('p').css('color','red');這兩種方法等價,均是後代選擇器
2. $('#box>p').css('color','red');
$('#box').children('p').css('color','red');這兩種方法等價,均是子選擇器
3. $('#box+p').css('color','red');
$('#box').next('p').css('color','red'); 這兩種方法等價,均是next選擇器
4. $('#box~p').css('color','red');
$('#box').nextAll('p').css('color','red');這兩種方法等價,均是nextAll選擇器
注:這幾種寫法均支援IE6在find(),children,next,nextAll這四個方法中如果不傳參,就相當於傳遞了引數*,即任何節點。但是不建議這樣做,影響效能,還有可能在複雜的HTML結構中產生怪異的結果
5.其他補充方法
$('#box').prev('p').css('color','red'); //同級上一個元素
$('#box').prevAll('p').css('color','red'); //同級上面的所有元素
$('#box').prevUntil('p').css('color','red'); //同級的上非指定元素選定,遇到則停止
$('#box').nextUntil('p').css('color','red'); //同級的下非指定元素選定,遇到則停止
$('#box').siblings('p').css('color','red'); //同級的上下所有元素選定,集成了prevAll()和 nextAll()兩個功效
4.過濾選擇器
(1).基本過濾器
(2).內容過濾器
(3).可見性過濾器
(4).子元素過濾器
(5).其他方法