大致介紹

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

jQuery是什么？

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

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

jQuery對(duì)象和DOM對(duì)象

我們?cè)诰帉懩_本時(shí)，可能會(huì)同時(shí)用到原生JavaScript和jQuery，那么這時(shí)就會(huì)存在一些問題。要解決這些問題就先得認(rèn)識(shí)jQuery對(duì)象和DOM對(duì)象

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

jQuery對(duì)象：通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象

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

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

jQuery對(duì)象和DOM對(duì)象是可以互相轉(zhuǎn)化的

jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象有兩種方法：

1、[index]

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

2、get(index)

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

DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象有一種方法：$(DOM對(duì)象)

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

jQuery選擇器

jQuery中的選擇器完全繼承了CSS的風(fēng)格

逐一來看

基本選擇器

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

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

改變所有p標(biāo)簽和class為one的div的背景色

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

層次選擇器

選取div里的所有span元素

$('div span');

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

$('div > span');

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

$('.one + div');

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

$('.one ~ div');

過濾選擇器

1、基本過濾選擇器

選取所有<div>元素中第一個(gè)<div>元素

$('div:first');

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

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

選取索引是偶數(shù)的的<div>元素

$('div:even');

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

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

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

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

選取所有標(biāo)題元素，例如h1、h2等

$(':header');

選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素

$(':animated');

選取獲取當(dāng)前焦點(diǎn)的元素

$(':focus');

2、內(nèi)容過濾選擇器

選取含有文本“堅(jiān)持”的<div>元素

$('div:contains('堅(jiān)持')');

選取不包含子元素或者文本的<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結(jié)尾的<div>元素

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

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

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

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

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

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

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

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

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

5、子元素過濾器

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

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

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

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

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

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

6、表單對(duì)象屬性過濾選擇器

選取id為"form1"表單內(nèi)的所有可用元素

$('#form1:enabled');

選取id為"form1"表單內(nèi)的所有不可用元素

$('#form1:disabled');

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

$('input:checked');

選取所有被選中的選項(xiàng)元素

$('select option:selector');

表單選擇器

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

$(':input');

選取所有的單行文本框

$(':text');

選取所有的不可見的元素

 $(':hidden');

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

參考資料：鋒利的jQuery(第二版) http://www.dbjr.com.cn/books/92918.html

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！　　　

最新評(píng)論