一、JS基本選擇器是JQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素id、class 和標簽名來查找DOM元素。這個非常重要，下面的內容都是以此為基礎，逐級提高的。

1).“$(“#id”)”，獲取id指定的元素，id是全局唯一的，所以它只有一個成員。

2).“$(“.class”)”，獲取class指定的元素，不同的元素可以具有相同的class屬性，所以它可能具有多個成員。

3).“$(“element”)”，獲取element（元素名，比如div、table等）指定的元素，它可能具有多個成員。

4).“$(“*”)”，獲取所有元素，相當于document。

5).“$(“selector1,selector2,…,selectorN”)”，將每個選擇器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。

二、層次選擇器

什么是層次？層次就是父子關系、兄弟關系的節點。所以，層次選擇器就是用來獲取指定元素的父子節點、兄弟節點。

1).“$(“ancestor descendant”)”，獲取ancestor元素下邊的所有元素。

2).“$(“parent > child”)”，獲取parent元素下邊的所有子元素（只包含第一層子元素）。

3).“$(“pre + next”)”，獲取緊隨pre元素的后一個兄弟元素。

4).“$(“pre ~ siblings”)”，獲取pre元素后邊的所有兄弟元素。

想要使用jQuery從select元素中刪除options元素，可以先使用jQuery選擇器從select中選擇需要刪除的options元素，然后使用JQuery的remove()方法從HTML文檔中刪除該選項。

remove()方法用于法移除被選元素，包括所有的文本和子節點。該方法也會移除被選元素的數據和事件。

Query編寫插件的兩種方法

1.添加jQuery對象級的插件，是給jQuery類添加方法

寫法：

;(function($){

$.fn.extend({

"函數名":function(自定義參數){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.函數名=function(自定義參數){

//這里寫插件代碼

}

})(jQuery);

調用方法：$("#id").函數名(參數);

2.jQuery類級別的插件，相當于添加靜態方法

;(function($){

$.extend({

"函數名":function(自定義參數){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.函數名=function(自定義參數){

//這里寫插件代碼

}

})(jQuery);

調用方法：$.函數名(參數);

jquery插件的種類：

1.對象級別的插件開發，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

2.一種是類級別的插件開發，即給jQuery添加新的全局函數，相當于給jQuery類本身添加方法，jQuery的全局函數就是屬于jQuery命 名空間的函數，封裝全局函數的插件

3.選擇器插件

jQuery插件機制

jQuery為開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object); 給jQuery對象添加方法。

jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法，可以理解為添加靜態方法。

這兩個方法都接受一個參數，類型為Object，Object對應的"名/值對"分別代表"函數或方法體/函數主體"。

fn 是什么東西呢？

查看jQuery代碼，就不難發現：

jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... };

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然javascript沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個封裝得非常好的類，比如 我們用 語句 $("#btn1") 會生成一個 jQuery類的實例。

jQuery.fn.extend(object)， 對jQuery.prototype進行擴展，就是為jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。即：$("#id").object();

jQuery.extend()方法除了可以擴展jQuery對象外，還可以擴展已有的Object對象，經常被用于設置插件方法的一系列默認參數，可以很方便的用傳入的參數來覆蓋默認值

jQuery.extend(object1,object2)object1默認參數值，object2傳入的參數值；詳細說明，請點擊這里

var settions ={validate:false,limit:5,name="foo"};

var options ={validate:true,name="bar"};

var newOptions=jQuery.extend(settings,options);

結果為：

newOptions = {validate:true,limit:5,name="bar"};

function foo(options){

options = jQuery.extend({

name="bar",

length:5,

dataType="xml" /*默認參數*/

},options /*options 為傳遞的參數*/

);

}

如果用戶調用foo()方法的時候，在傳遞的參數options對象中設置了相應的值，

那么就使用設置的值，否則使用默認值，調用方法：

foo({name:"a",length:4,dataType:"json"});

foo({name:"a"});

foo();

編寫jQuery插件

封裝jQuery對你方法的插件，首先需要在javaScript文件里搭好框架，代碼如下：

;(function($){

//這里寫插件代碼

})(jQuery);

1.對象級別的插件開發，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

由于是對jQuery對象的方法擴展，因此采用擴展第1類（封裝對象方法）插件的方法jQuery.fn.extend()來編寫

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.color=function(value){

//這里寫插件代碼

}

})(jQuery);

這里的方法提供一個參數value,如果調用方法時傳入value，那么就用這個值來設置字體顏色,否則就是獲取匹配無此的字體顏色的值

;(function($){

$.fn.extend({

"color":function(value){

return this.css("color",value);

}

});

})(jQuery);

插件內部的this指向的是jQuery對象，而非普通的DOM對象。接下來注意的是，插件如果不需要返回字符串之類的特定值，應當使其具有可鏈接性。

為此，直接返回這個this這個對象，由于css()方法也會返回調用它的對象，即此外的this，因此可以將代碼寫成上面的形式;

調用時可直接寫成：$("div").color("red");

另外如果要定義一組插件，可以使用如下所示寫法：

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

},

"border":function(value){

//這里寫插件代碼

},

"background":function(value){

//這里寫插件代碼

}

});

})(jQuery);

2.封裝全局函數的插件

這類插件是在jQuery命名空間內部添加一個函數。這類插件很簡單，只是普通的函數，沒有特別需要注意的地方。

例如新增兩個函數，用于去除左側和右側的空格。

首先構建一個Object對象，把函數名和函數都放進去，其中的名/值對分別為函數名和函數主體

然后利用jQuery.extend()方法直接對jQuery對象進行擴展

jQuery代碼如下：

;(function($){

$.extend({

ltrim:function(text){

return (text||"").replace(/^\s+g,"");

},

rtrim:function(text){

return (text||"").replace(/\s+$/g,"");

}

});

})(jQuery);

或者

;(function($){

$.ltrim=function(text){

return (text||"").replace(/^\s+g,"");

},

$.rtrim=function(text){

return (text||"").replace(/\s+$/g,"");

}

})(jQuery);

*(text||"")部分是用于防止傳遞進來的text這個字符串變量處于未定義的特殊狀態，如果text是undeined，則返回字符串""，否則返回字符串text。

這個處理是為了保證接下來的字符串替換方法replace()方法不會出錯

*運用了正則表達式替換首末的空格

調用函數：

$("trimTest").val(

jQuery.trim(" test ")+"\n"+

jQuery.ltrim(" test ")+"\n"+

jQuery.rtrim(" test ")

);

運行代碼后，文本框中第一行字符串左右兩側的空格都被刪除。

第二行的字符串只有左側的空格被刪除。

第三行的字符串只有右側的空格被刪除。

3.自定義選擇器

Jquery使用addClass()與removeClass()來動態的添加或移出一個css類，例如：

1.$(“#para1”).addClass('highlight');添加一個“highlight”css類給id為para1的元素。

2.$(‘#para1’).removeClass(‘'highlight');從id為para1的元素中移出一個‘highlight’css類。具體實例代碼如下：<html><head><styletype="text/css">.highlight{background:green;}</style><scripttype="text/javascript"src="jquery-1.

3.2.min.js"></script></head><body><h1>jQueryadd/removecssclassexample</h1><pid="para1">Thisisparagraph1</p><p>Thisisparagraph2</p><p>Thisisparagraph3</p><p>Thisisparagraph4</p><buttonid="addClass">Addhighlight</button><buttonid="removeClass">Removehighlight</button><scripttype="text/javascript">$("#addClass").click(function(){$('#para1').addClass('highlight');});$("#removeClass").click(function(){$('#para1').removeClass('highlight');});</script></body></html>初始的效果：點擊addhighlight后的效果圖：點擊removehighlight后的效果圖：