?您要知道!!

??jQuery是目前使用最廣泛的javascript函數(shù)庫(kù)。據(jù)統(tǒng)計(jì)，全世界排名前100萬(wàn)的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過(guò)其他庫(kù)。

? ?微軟公司甚至把jQuery作為他們的官方庫(kù)。對(duì)于網(wǎng)頁(yè)開(kāi)發(fā)者來(lái)說(shuō)，學(xué)會(huì)jQuery是必要的。因?yàn)樗屇懔私鈽I(yè)界最通用的技術(shù)，

? ?為將來(lái)學(xué)習(xí)更高級(jí)的庫(kù)打下基礎(chǔ)，并且確實(shí)可以很輕松地做出許多復(fù)雜的效果。

?

?

我們先來(lái)學(xué)習(xí)一下jQuery的語(yǔ)法結(jié)構(gòu):

$(selector).action();

1.工廠函數(shù)$()

在jQuery中,"$"美元符號(hào)等價(jià)于jQuery,即$()=jQuery(),$()的作用是將DOM對(duì)象轉(zhuǎn)化為jQuery對(duì)象,只有將DOM對(duì)象裝化為jQuery對(duì)象后,才能使用jQuery的方法

注意!!!!!!:

當(dāng)$()參數(shù)是DOM對(duì)象時(shí),該對(duì)象不需要使用雙引號(hào)包裹起來(lái),如果獲取的是document對(duì)象,則寫(xiě)作$(document)

2.選擇器

jQuery幾乎支持CSS中的所有選擇器,如:標(biāo)簽選擇器,類(lèi)選擇器,ID選擇器,后代選擇器

語(yǔ)法:

$(selector)

選擇表達(dá)式可以是CSS選擇器：

1 $(document)//選擇整個(gè)文檔對(duì)象
2 $('#myId')//選擇ID為myId的網(wǎng)頁(yè)元素
3 $('div.myClass')//選擇class為myClass的div元素
4 $('input[name=first]')//選擇name屬性等于first的input元素

(1).首先我們來(lái)學(xué)習(xí)jQuery的第一個(gè)方法addClass();

addClass()方法是jQuery中用于進(jìn)行CSS操作的方法之一,它的作用是向被選元素添加一個(gè)或多個(gè)樣式,它的語(yǔ)法結(jié)構(gòu)如下

語(yǔ)法 jQuery 對(duì)象.addClass([樣式名])
其中,樣式名可以是一個(gè)也可以是多個(gè),多個(gè)樣式名需要用空格隔開(kāi)

實(shí)現(xiàn)的功能：

增加一條樣式規(guī)則： .addClass(‘myClass’)

增加多條樣式規(guī)則： .addClass(‘myClass yourClass’)

(2).jQuery的css方法

語(yǔ)法:
css("屬性","屬性值");

?定義和用法

? css() 方法返回或設(shè)置匹配的元素的一個(gè)或多個(gè)樣式屬性。

實(shí)例 1

將所有段落的顏色設(shè)為紅色：

$("button").click(function(){$("p").css("color",function(){return "red";});});

實(shí)例 2

逐漸增加 div 的寬度：

$("div").click(function() {$(this).css("width", function(index, value) {return parseFloat(value) * 1.2;}); });

(3).jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換

jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象： 兩種轉(zhuǎn)換方式將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：[index]和.get(index); (1)jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象，可以通過(guò)[index]的方法，來(lái)得到相應(yīng)的DOM對(duì)象。 如：var $v =$("#v") ; //jQuery對(duì)象 var v=$v[0]; //DOM對(duì)象 alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中 (2)jQuery本身提供，通過(guò).get(index)方法，得到相應(yīng)的DOM對(duì)象 如：var $v=$("#v"); //jQuery對(duì)象 var v=$v.get(0); //DOM對(duì)象 alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象:?
對(duì)于已經(jīng)是一個(gè)DOM對(duì)象，只需要用$()把DOM對(duì)象包裝起來(lái)，就可以獲得一個(gè)jQuery對(duì)象了。$(DOM對(duì)象)?
如：var v=document.getElementById("v"); //DOM對(duì)象?
var $v=$(v); //jQuery對(duì)象?
轉(zhuǎn)換后，就可以任意使用jQuery的方法了。?
通過(guò)以上方法，可以任意的相互轉(zhuǎn)換jQuery對(duì)象和DOM對(duì)象。需要再?gòu)?qiáng)調(diào)注意的是：DOM對(duì)象才能使用DOM中的方法，jQuery對(duì)象是不可以用DOM中的方法。?

下面是其它的相關(guān)使用方法：
1、DOM對(duì)象轉(zhuǎn)jQuery對(duì)象?
普通的Dom對(duì)象一般可以通過(guò)$()轉(zhuǎn)換成jQuery對(duì)象。?

如：$(document.getElementById("msg"))?
返回的就是jQuery對(duì)象，可以使用jQuery的方法。?

2、jQuery對(duì)象轉(zhuǎn)DOM對(duì)象?
由于jQuery對(duì)象本身是一個(gè)集合。所以如果jQuery對(duì)象要轉(zhuǎn)換為Dom對(duì)象則必須取出其中的某一項(xiàng)，一般可通過(guò)索引取出。?
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]?

這些都是Dom對(duì)象，可以使用Dom中的方法，但不能再使用jQuery的方法。?

以下幾種寫(xiě)法都是正確的：?
$("#msg").html();?
$("#msg")[0].innerHTML;?
$("#msg").eq(0)[0].innerHTML;?
$("#msg").get(0).innerHTML;

?

轉(zhuǎn)載于:https://www.cnblogs.com/fanziyang/p/5511604.html

總結(jié)

以上是生活随笔為你收集整理的初识jQuery(适合初学者哟.........)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。