1. 程式人生 > >jQuery入門基礎知識學習筆記

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).其他方法