大致介紹

終于開始了我的jQuery學習之路！感覺不能再拖了，要邊學習原生JavaScript邊學習jQuery

jQuery是什么？

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設　計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。（來自百度-_-）

jQuery對象和DOM對象

我們在編寫腳本時，可能會同時用到原生JavaScript和jQuery，那么這時就會存在一些問題。要解決這些問題就先得認識jQuery對象和DOM對象

DOM對象：通過例如getElementById方法獲取到DOM樹中的元素就是DOM對象

jQuery對象：通過jQuery包裝DOM對象后產生的對象

注意：jQuery對象和DOM對象不能使用對方的任何方法

 // 錯誤 $('div').innerHTML; // 錯誤 document.getELementsByTagName('div')[0].html();　

jQuery對象和DOM對象是可以互相轉化的

jQuery對象轉成DOM對象有兩種方法：

1、[index]

 var $div = $('div');//jQuery對象 var div = $div[0];//DOM對象

2、get(index)

 var $div = $('div');//jQuery對象 var div = $div.get(0);//DOM對象

DOM對象轉成jQuery對象有一種方法：$(DOM對象)

 var div = document.getELementsByTagName('div')[0];//DOM對象 var $div = $(div);//jQuery對象

jQuery選擇器

jQuery中的選擇器完全繼承了CSS的風格

逐一來看

基本選擇器

改變id為div1的所有div的背景色

$('#div1').css('background','#bbffaa');

改變所有p標簽和class為one的div的背景色

$('p,.one').css('background','#bbffaa');

層次選擇器

選取div里的所有span元素

$('div span');

選取div下元素名是span的子元素

$('div > span');

選取class是one的下一個<div>同輩元素

$('.one + div');

選取class是one的后面的所有的<div>同輩元素

$('.one ~ div');

過濾選擇器

1、基本過濾選擇器

選取所有<div>元素中第一個<div>元素

$('div:first');

選取class不是one的<div>元素

$('div:not(.one)');

選取索引是偶數的的<div>元素

$('div:even');

選取索引等于2的<div>元素

$('div:eq(2)');

選取索引大于2的<div>元素

$('div:gt(2)');

選取所有標題元素，例如h1、h2等

$(':header');

選取當前正在執行動畫的所有元素

$(':animated');

選取獲取當前焦點的元素

$(':focus');

2、內容過濾選擇器

選取含有文本“堅持”的<div>元素

$('div:contains('堅持')');

選取不包含子元素或者文本的<div>元素

$('div:empty');

選取含有<p>元素的<div>元素

$('div:has(p)');

選取含有子元素或者文本的元素

$('div:parent');

3、可見性過濾選擇器

選取所有不可見的元素。包括<input type="hidden" />,<div style="display:none">和<div style="overflow:hidden">

$(':hidden');

選取所有可見的<div>元素

$('div:visible');

4、屬性過濾選擇器

選取有id屬性的元素

$('div[id]');

選取id等于myId的<div>元素

$('div[id="myId"]');

選取id值不等于myId的<div>元素

$('div[id!="myId"]');

選取id值以my開頭的<div>元素

$('div[id^="my"]');

選取id值以my結尾的<div>元素

$('div[id$="my"]');

選取id值含有my的<div>元素

$('div[id*="my"]');

選取屬性title等于en或者以en為前綴（en后跟一個連字符'-'）的元素

$('div[title|="en"]');

選取屬性title中用空格分隔的值中包含字符en的<div>元素

$('div[title~="en"]');

選取擁有屬性id并且屬性title以en為前綴的<p>元素

$('p[id][title|="en"]');

5、子元素過濾器

選取每個class為one的<div>父元素下的第2個子元素

$('div.one :nth-child(2)');

選取每個class為one的<div>父元素下的第1個子元素

$('div.one :first-child');

選取<ul>中是唯一子元素的<li>元素

$('ul li:only-child');

6、表單對象屬性過濾選擇器

選取id為"form1"表單內的所有可用元素

$('#form1:enabled');

選取id為"form1"表單內的所有不可用元素

$('#form1:disabled');

選取所有被選中的<input>元素

$('input:checked');

選取所有被選中的選項元素

$('select option:selector');

表單選擇器

選取所有的<input>、<textarea>、<select>和<button>元素

$(':input');

選取所有的單行文本框

$(':text');

選取所有的不可見的元素

 $(':hidden');

其余的選擇方法都可以通過單詞了解到意思（例如 ：submit 就是選擇所有的提交按鈕）就不再贅述。

參考資料：鋒利的jQuery(第二版) //m.survivalescaperooms.com/books/92918.html

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！