97超碰制服,91女的被大急把操

環(huán)境搭建

進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.com/download/ ，這里需要注意 jQuery 分 2 個(gè)系列版本 1.x 與 2.x，主要的區(qū)別在于 2.x 不再兼容 IE6、7、8瀏覽器，這樣做的目的是為了兼容移動(dòng)端開(kāi)發(fā)。由于減少了一些代碼，使得該版本比 jQuery 1.x 更小、更快。
如果開(kāi)發(fā)者比較在意老版本 IE 用戶，只能使用 jQuery 1.9 及之前的版本了。我們這本課程為了兼容性問(wèn)題，使用的是 1.9 版本。jQuery 每一個(gè)系列版本分為：壓縮版(compressed) 與開(kāi)發(fā)版(development)，我們?cè)陂_(kāi)發(fā)過(guò)程中使用開(kāi)發(fā)版（開(kāi)發(fā)版本便于代碼修改及調(diào)試），項(xiàng)目上線發(fā)布使用壓縮版（因?yàn)閴嚎s版本體積更小，效率更快）。
jQuery是一個(gè)JavaScript腳本庫(kù)，不需要特別的安裝，只需要我們?cè)陧?yè)面 <head> 標(biāo)簽內(nèi)中，通過(guò) script 標(biāo)簽引入 jQuery 庫(kù)即可。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>環(huán)境搭建</title>
</head> 
<body>
    <script type="text/javascript"> alert($) </script>
</body>
</html>

alert 彈出以上信息，說(shuō)明環(huán)境已經(jīng)搭建成功了。

jQueryHelloWorld體驗(yàn)

當(dāng)頁(yè)面加載完成后，在頁(yè)面中以居中的方式顯示“您好！通過(guò)慕課網(wǎng)學(xué)習(xí) jQuery 才是最佳的途徑”字樣。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一個(gè)簡(jiǎn)單的jQuery程序</title>
    <style type="text/css">
        div{
            padding:8px 0px;
            font-size:12px;
            text-align:center;
            border:1px solid #888;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                    $("div").html("您好！通過(guò)慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑。");
            });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

代碼分析：
$(document).ready 的作用是等頁(yè)面的文檔（document）中的節(jié)點(diǎn)都加載完畢后，再執(zhí)行后續(xù)的代碼，因?yàn)槲覀冊(cè)趫?zhí)行代碼的時(shí)候，可能會(huì)依賴頁(yè)面的某一個(gè)元素，我們要確保這個(gè)元素真正的的被加載完畢后才能正確的使用。

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

對(duì)于才開(kāi)始接觸jQuery庫(kù)的初學(xué)者，我們需要清楚認(rèn)識(shí)一點(diǎn)：
jQuery對(duì)象與DOM對(duì)象是不一樣的
可能一時(shí)半會(huì)分不清楚哪些是jQuery對(duì)象，哪些是DOM對(duì)象，下面重點(diǎn)介紹一下jQuery對(duì)象，以及兩者相互間的轉(zhuǎn)換。
通過(guò)一個(gè)簡(jiǎn)單的例子，簡(jiǎn)單區(qū)分下jQuery對(duì)象與DOM對(duì)象：
<p id=”imooc”></p>
我們要獲取頁(yè)面上這個(gè)id為imooc的p元素，然后給這個(gè)文本節(jié)點(diǎn)增加一段文字：“您好！通過(guò)慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑”，并且讓文字顏色變成紅色。
普通處理，通過(guò)標(biāo)準(zhǔn)JavaScript處理：

var p = document.getElementById('imooc');
p.innerHTML = '您好！通過(guò)慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑';
p.style.color = 'red';
通過(guò)原生DOM模型提供的document.getElementById(“imooc”) 方法獲取的DOM元素就是一個(gè)DOM對(duì)象，再通過(guò)innerHTML與style屬性處理文本與顏色。
jQuery的處理：
var $p = $('#imooc');
$p.html('您好！通過(guò)慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑').css('color','red');

通過(guò)$('#imooc')方法會(huì)得到一個(gè)$p的jQuery對(duì)象，$p是一個(gè)類數(shù)組對(duì)象。這個(gè)對(duì)象里面包含了DOM對(duì)象的信息，然后封裝了很多操作方法，調(diào)用自己的方法html與css，得到的效果與標(biāo)準(zhǔn)的JavaScript處理結(jié)果是一致的。
通過(guò)標(biāo)準(zhǔn)的JavaScript操作DOM與jQuyer操作DOM的對(duì)比，我們不難發(fā)現(xiàn)：

通過(guò)jQuery方法包裝后的對(duì)象，是一個(gè)類數(shù)組對(duì)象。它與DOM對(duì)象完全不同，唯一相似的是它們都能操作DOM。
通過(guò)jQuery處理DOM的操作，可以讓開(kāi)發(fā)者更專注業(yè)務(wù)邏輯的開(kāi)發(fā)，而不需要我們具體知道哪個(gè)DOM節(jié)點(diǎn)有那些方法，也不需要關(guān)心不同瀏覽器的兼容性問(wèn)題，我們通過(guò)jQuery提供的API進(jìn)行開(kāi)發(fā)，代碼也會(huì)更加精短。

jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象

jQuery庫(kù)本質(zhì)上還是JavaScript代碼，它只是對(duì)JavaScript語(yǔ)言進(jìn)行包裝處理，為的是提供更好更方便快捷的DOM處理與開(kāi)發(fā)中經(jīng)常使用的功能。我們使用jQuery的同時(shí)也能混合JavaScript原生代碼一起使用。在很多場(chǎng)景中，我們需要jQuery與DOM能夠相互的轉(zhuǎn)換，它們都是可以操作的DOM元素，jQuery是一個(gè)類數(shù)組對(duì)象，而DOM對(duì)象就是一個(gè)單獨(dú)的DOM元素。

如何把jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象？
利用數(shù)組下標(biāo)的方式讀取到j(luò)Query中的DOM對(duì)象

HTML代碼
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代碼
var $div = $('div') //jQuery對(duì)象
var div = $div[0] //轉(zhuǎn)化成DOM對(duì)象，取到div[0]這個(gè)元素
div.style.color = 'red' //操作dom對(duì)象的屬性

用jQuery找到所有的div元素（3個(gè)），因?yàn)閖Query對(duì)象也是一個(gè)數(shù)組結(jié)構(gòu)，可以通過(guò)數(shù)組下標(biāo)索引找到第一個(gè)div元素，通過(guò)返回的div對(duì)象，調(diào)用它的style屬性修改第一個(gè)div元素的顏色。這里需要注意的一點(diǎn)是，數(shù)組的索引是從0開(kāi)始的，也就是第一個(gè)元素下標(biāo)是0
通過(guò)jQuery自帶的get()方法
jQuery對(duì)象自身提供一個(gè).get() 方法允許我們直接訪問(wèn)jQuery對(duì)象中相關(guān)的DOM節(jié)點(diǎn)，get方法中提供一個(gè)元素的索引：

var $div = $('div') //jQuery對(duì)象
var div = $div.get(0) //通過(guò)get方法，轉(zhuǎn)化成DOM對(duì)象
div.style.color = 'red' //操作dom對(duì)象的屬性

其實(shí)我們翻開(kāi)源碼，看看就知道了，get方法就是利用的第一種方式處理的，只是包裝成一個(gè)get讓開(kāi)發(fā)者更直接方便的使用。

DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象

相比較jQuery轉(zhuǎn)化成DOM，開(kāi)發(fā)中更多的情況是把一個(gè)dom對(duì)象加工成jQuery對(duì)象。$(參數(shù))是一個(gè)多功能的方法，通過(guò)傳遞不同的參數(shù)而產(chǎn)生不同的作用。
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個(gè)DOM對(duì)象，jQuery方法會(huì)把這個(gè)DOM對(duì)象給包裝成一個(gè)新的jQuery對(duì)象
通過(guò)$(dom)方法將普通的dom對(duì)象加工成jQuery對(duì)象之后，我們就可以調(diào)用jQuery的方法了
HTML代碼
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代碼

var div = document.getElementsByTagName('div'); //dom對(duì)象
var $div = $(div); //jQuery對(duì)象，不帶括號(hào)
var $first = $div.first(); //找到第一個(gè)div元素
$first.css('color', 'red'); //給第一個(gè)元素設(shè)置顏色

通過(guò)getElementsByTagName獲取到所有div節(jié)點(diǎn)的元素，結(jié)果是一個(gè)dom合集對(duì)象，不過(guò)這個(gè)對(duì)象是一個(gè)數(shù)組合集(3個(gè)div元素)。通過(guò)$(div)方法轉(zhuǎn)化成jQuery對(duì)象，通過(guò)調(diào)用jQuery對(duì)象中的first與css方法查找第一個(gè)元素并且改變其顏色。

jQuery選擇器之id選擇器

頁(yè)面的任何操作都需要節(jié)點(diǎn)的支撐，開(kāi)發(fā)者如何快速高效的找到指定的節(jié)點(diǎn)也是前端開(kāi)發(fā)中的一個(gè)重點(diǎn)。jQuery提供了一系列的選擇器幫助開(kāi)發(fā)者達(dá)到這一目的，讓開(kāi)發(fā)者可以更少的處理復(fù)雜選擇過(guò)程與性能優(yōu)化，更多專注業(yè)務(wù)邏輯的編寫。
jQuery幾乎支持主流的css1~css3選擇器的寫法，我們從最簡(jiǎn)單的也是最常用的開(kāi)始學(xué)起
id選擇器：一個(gè)用來(lái)查找的ID，即元素的id屬性
$( "#id" )
id選擇器也是基本的選擇器，jQuery內(nèi)部使用JavaScript函數(shù)document.getElementById()來(lái)處理ID的獲取。原生語(yǔ)法的支持總是非常高效的，所以在操作DOM的獲取上，如果能采用id的話盡然考慮用這個(gè)選擇器
值得注意：
id是唯一的，每個(gè)id值在一個(gè)頁(yè)面中只能使用一次。如果多個(gè)元素分配了相同的id，將只匹配該id選擇集合的第一個(gè)DOM元素。但這種行為不應(yīng)該發(fā)生;有超過(guò)一個(gè)元素的頁(yè)面使用相同的id是無(wú)效的

jQuery選擇器之類選擇器

類選擇器，顧名思義，通過(guò)class樣式類名來(lái)獲取節(jié)點(diǎn)
描述：
$( ".class" )
類選擇器，相對(duì)id選擇器來(lái)說(shuō)，效率相對(duì)會(huì)低一點(diǎn)，但是優(yōu)勢(shì)就是可以多選
同樣的jQuery在實(shí)現(xiàn)上，對(duì)于類選擇器，如果瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數(shù)來(lái)實(shí)現(xiàn)的
右邊實(shí)現(xiàn)一個(gè)原生getElementsByClassName()函數(shù)的實(shí)現(xiàn)代碼與jQuery實(shí)現(xiàn)代碼的比較
我們不難發(fā)現(xiàn)：
jQuery除了選擇上的簡(jiǎn)單，而且沒(méi)有再次使用循環(huán)處理
不難想到$(".imooc").css()方法內(nèi)部肯定是帶了一個(gè)隱式的循環(huán)處理，所以使用jQuery選擇節(jié)點(diǎn)，不僅僅只是選擇上的簡(jiǎn)單，同時(shí)還增加很多關(guān)聯(lián)的便利操作，后續(xù)我們還會(huì)慢慢的學(xué)到其他的優(yōu)勢(shì)。

jQuery選擇器之元素選擇器

元素選擇器：根據(jù)給定（html）標(biāo)記名稱選擇所有的元素
描述：
$( "element" )
搜索指定元素標(biāo)簽名的所有節(jié)點(diǎn)，這個(gè)是一個(gè)合集的操作。同樣的也有原生方法getElementsByTagName()函數(shù)支持
右邊編輯器代碼所示：
第一組：通過(guò)getElementsByTagName方法得到頁(yè)面所有的<div>元素
var divs = document.getElementsByTagName('div');
divs是dom合集對(duì)象，通過(guò)循環(huán)給每一個(gè)合集中的<div>元素賦予新的boder樣式
第二組：同樣的效果，$("p")選取所有的<p>元素，通過(guò)css方法直接賦予樣式

jQuery選擇器之全選擇器（*選擇器）
在CSS中，經(jīng)常會(huì)在第一行寫下這樣一段樣式

{padding: 0; margin: 0;}
通配符意味著給所有的元素設(shè)置默認(rèn)的邊距。jQuery中我們也可以通過(guò)傳遞選擇器來(lái)選中文檔頁(yè)面中的元素
描述：
$( "" )
拋開(kāi)jQuery，如果要獲取文檔中所有的元素，通過(guò)document.getElementsByTagName()中傳遞""同樣可以獲取到
不難發(fā)現(xiàn)，id、class、tag都可以通過(guò)原生的方法獲取到對(duì)應(yīng)的節(jié)點(diǎn)，但是我們還需要考慮一個(gè)兼容性的問(wèn)題，我這里順便提及一下，比如:

IE會(huì)將注釋節(jié)點(diǎn)實(shí)現(xiàn)為元素，所以在IE中調(diào)用getElementsByTagName里面會(huì)包含注釋節(jié)點(diǎn)，這個(gè)通常是不應(yīng)該的
getElementById的參數(shù)在IE8及較低的版本不區(qū)分大小寫
IE7及較低的版本中，表單元素中，如果表單A的name屬性名用了另一個(gè)元素B的ID名并且A在B之前，那么getElementById會(huì)選中A
IE8及較低的版本，瀏覽器不支持getElementsByClassName

jQuery選擇器之層級(jí)選擇器

文檔中的所有的節(jié)點(diǎn)之間都是有這樣或者那樣的關(guān)系。我們可以把節(jié)點(diǎn)之間的關(guān)系可以用傳統(tǒng)的家族關(guān)系來(lái)描述，可以把文檔樹(shù)當(dāng)作一個(gè)家譜，那么節(jié)點(diǎn)與節(jié)點(diǎn)直接就會(huì)存在父子，兄弟，祖孫的關(guān)系了。
選擇器中的層級(jí)選擇器就是用來(lái)處理這種關(guān)系
子元素后代元素兄弟元素相鄰元素
通過(guò)一個(gè)列表，對(duì)比層級(jí)選擇器的區(qū)別

仔細(xì)觀察層級(jí)選擇器之間還是有很多相似與不同點(diǎn)
$(“.prev ~ sibling”)
不要忘了開(kāi)頭有一個(gè)點(diǎn)。選擇的是prev后面的sibling元素。

層級(jí)選擇器都有一個(gè)參考節(jié)點(diǎn)
后代選擇器包含子選擇器的選擇的內(nèi)容
一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容
相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個(gè)父元素下

jQuery選擇器之基本篩選選擇器

很多時(shí)候我們不能直接通過(guò)基本選擇器與層級(jí)選擇器找到我們想要的元素，為此jQuery提供了一系列的篩選選擇器用來(lái)更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規(guī)范，而是jQuery自己為了開(kāi)發(fā)者的便利延展出來(lái)的選擇器
篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號(hào)“：”開(kāi)頭，通過(guò)一個(gè)列表，看看基本篩選器的描述：

注意事項(xiàng)：

:eq(), :lt(), :gt(), :even, :odd 用來(lái)篩選他們前面的匹配表達(dá)式的集合元素，根據(jù)之前匹配的元素在進(jìn)一步篩選，注意jQuery合集都是從0開(kāi)始索引
gt是一個(gè)段落篩選，從指定索引的下一個(gè)開(kāi)始，gt(1) 實(shí)際從2開(kāi)始

jQuery選擇器之內(nèi)容篩選選擇器

基本篩選選擇器針對(duì)的都是元素DOM節(jié)點(diǎn)，如果我們要通過(guò)內(nèi)容來(lái)過(guò)濾，jQuery也提供了一組內(nèi)容篩選選擇器，當(dāng)然其規(guī)則也會(huì)體現(xiàn)在它所包含的子元素或者文本內(nèi)容上
內(nèi)容過(guò)濾器描述如下表：

注意事項(xiàng)：

:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同樣認(rèn)為是符合條件的。
:parent與:empty是相反的，兩者所涉及的子元素，包括文本節(jié)點(diǎn)

jQuery選擇器之可見(jiàn)性篩選選擇器

元素有顯示狀態(tài)與隱藏狀態(tài)，jQuery根據(jù)元素的狀態(tài)擴(kuò)展了可見(jiàn)性篩選選擇器:visible與:hidden
描述如下：

這2個(gè)選擇器都是 jQuery 延伸出來(lái)的，看起來(lái)比較簡(jiǎn)單，但是元素可見(jiàn)性依賴于適用的樣式
:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等
我們有幾種方式可以隱藏一個(gè)元素：

CSS display的值是none。
type="hidden"的表單元素。
寬度和高度都顯式設(shè)置為0。
一個(gè)祖先元素是隱藏的，該元素是不會(huì)在頁(yè)面上顯示
CSS visibility的值是hidden
CSS opacity的指是0
如果元素中占據(jù)文檔中一定的空間,元素被認(rèn)為是可見(jiàn)的。
可見(jiàn)元素的寬度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。
不在文檔中的元素是被認(rèn)為是不可見(jiàn)的，如果當(dāng)他們被插入到文檔中，jQuery沒(méi)有辦法知道他們是否是可見(jiàn)的，因?yàn)樵乜梢?jiàn)性依賴于適用的樣式
書(shū)寫格式：show(“ : visible”)

jQuery選擇器之屬性篩選選擇器

屬性選擇器讓你可以基于屬性來(lái)定位一個(gè)元素?？梢灾恢付ㄔ撛氐哪硞€(gè)屬性，這樣所有使用該屬性而不管它的值，這個(gè)元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。
描述如下：

瀏覽器支持：

?   [att=val]、[att]、[att|=val]、[att~=val]  屬于CSS 2.1規(guī)范
?   [ns|attr]、[att^=val]、[att*=val]、[att$=val] 屬于CSS3規(guī)范
?   [name!="value"]  屬于jQuery 擴(kuò)展的選擇器
CSS選擇器無(wú)論CSS2.1版本還是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下瀏覽器才不支持
在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實(shí)用的
[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說(shuō)input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件

jQuery選擇器之子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規(guī)則比起其它的選擇器稍微要復(fù)雜點(diǎn)
子元素篩選選擇器描述表：

注意事項(xiàng)：

:first只匹配一個(gè)單獨(dú)的元素，但是:first-child選擇器可以匹配多個(gè)：即為每個(gè)父級(jí)元素匹配第一個(gè)子元素。這相當(dāng)于:nth-child(1)
:last 只匹配一個(gè)單獨(dú)的元素， :last-child 選擇器可以匹配多個(gè)元素：即，為每個(gè)父級(jí)元素匹配最后一個(gè)子元素
如果子元素只有一個(gè)的話，:first-child與:last-child是同一個(gè)
:only-child匹配某個(gè)元素是父元素中唯一的子元素，就是說(shuō)當(dāng)前子元素是父元素中唯一的元素，則匹配
jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來(lái)自CSS規(guī)范，所以n值是“索引”，也就是說(shuō)，從1開(kāi)始計(jì)數(shù)，:nth-child(index)從1開(kāi)始的，而eq(index)是從0開(kāi)始的
nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算，后者從后往前計(jì)算
jQuery選擇器之表單元素選擇器
無(wú)論是提交還是傳遞數(shù)據(jù)，表單元素在動(dòng)態(tài)交互頁(yè)面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個(gè)類型的表單元素
表單選擇器的具體方法描述：

注意事項(xiàng)：
除了input篩選選擇器，幾乎每個(gè)表單類別篩選器都對(duì)應(yīng)一個(gè)input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')
例子
$(':input')
$('input:text')
$('input:password')
$('input:radio')

jQuery選擇器之表單對(duì)象屬性篩選選擇器

除了表單元素選擇器外，表單對(duì)象屬性篩選選擇器也是專門針對(duì)表單元素的選擇器，可以附加在其他選擇器的后面，主要功能是對(duì)所選擇的表單元素進(jìn)行篩選
表單篩選選擇器的描述：

注意事項(xiàng)：

選擇器適用于復(fù)選框和單選框，對(duì)于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中，選擇器:checked可能會(huì)錯(cuò)誤選取到<option>元素，所以保險(xiǎn)起見(jiàn)換用選擇器input:checked，確保只會(huì)選取<input>元素
例子
$('input:enabled')
$('input:disabled')

jQuery選擇器之特殊選擇器this

相信很多剛接觸jQuery的人，很多都會(huì)對(duì)$(this)和this的區(qū)別模糊不清，那么這兩者有什么區(qū)別呢？
this是JavaScript中的關(guān)鍵字，指的是當(dāng)前的上下文對(duì)象，簡(jiǎn)單的說(shuō)就是方法/屬性的所有者
下面例子中，imooc是一個(gè)對(duì)象，擁有name屬性與getName方法,在getName中this指向了所屬的對(duì)象imooc

var imooc = {
    name:"慕課網(wǎng)",
    getName:function(){
        //this,就是imooc對(duì)象
        return this.name;
    }
}
imooc.getName(); //慕課網(wǎng)

當(dāng)然在JavaScript中this是動(dòng)態(tài)的，也就是說(shuō)這個(gè)上下文對(duì)象都是可以被動(dòng)態(tài)改變的(可以通過(guò)call,apply等方法)，具體的大家可以查閱相關(guān)資料
同樣的在DOM中this就是指向了這個(gè)html元素對(duì)象，因?yàn)閠his就是DOM元素本身的一個(gè)引用
假如給頁(yè)面一個(gè)P元素綁定一個(gè)事件:

p.addEventListener('click',function(){
    //this === p
    //以下兩者的修改都是等價(jià)的
    this.style.color = "red";
    p.style.color = "red";
},false);

通過(guò)addEventListener綁定的事件回調(diào)中，this指向的是當(dāng)前的dom對(duì)象，所以再次修改這樣對(duì)象的樣式，只需要通過(guò)this獲取到引用即可
this.style.color = "red"
但是這樣的操作其實(shí)還是很不方便的，這里面就要涉及一大堆的樣式兼容，如果通過(guò)jQuery處理就會(huì)簡(jiǎn)單多了，我們只需要把this加工成jQuery對(duì)象
換成jQuery的做法：

$('p').click(function(){
    //把p元素轉(zhuǎn)化成jQuery的對(duì)象
    var $this= $(this) 
    $this.css('color','red')
})

通過(guò)把$()方法傳入當(dāng)前的元素對(duì)象的引用this，把這個(gè)this加工成jQuery對(duì)象，我們就可以用jQuery提供的快捷方法直接處理樣式了
總體：
this，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象，可以調(diào)用html對(duì)象所擁有的屬性和方法。
$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jQuery的方法和屬性值。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

jQuery基礎(chǔ)與選擇器

jQuery基礎(chǔ)與選擇器

環(huán)境搭建

jQueryHelloWorld體驗(yàn)

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

jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象

DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象

jQuery選擇器之id選擇器

jQuery選擇器之類選擇器

jQuery選擇器之元素選擇器

jQuery選擇器之層級(jí)選擇器

jQuery選擇器之基本篩選選擇器

jQuery選擇器之內(nèi)容篩選選擇器

jQuery選擇器之可見(jiàn)性篩選選擇器

jQuery選擇器之屬性篩選選擇器

jQuery選擇器之子元素篩選選擇器

jQuery選擇器之表單對(duì)象屬性篩選選擇器

jQuery選擇器之特殊選擇器this

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

jQuery基礎(chǔ)與選擇器

環(huán)境搭建

jQueryHelloWorld體驗(yàn)

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

jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象

DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象

jQuery選擇器之id選擇器

jQuery選擇器之類選擇器

jQuery選擇器之元素選擇器

jQuery選擇器之層級(jí)選擇器

jQuery選擇器之基本篩選選擇器

jQuery選擇器之內(nèi)容篩選選擇器

jQuery選擇器之可見(jiàn)性篩選選擇器

jQuery選擇器之屬性篩選選擇器

jQuery選擇器之子元素篩選選擇器

jQuery選擇器之表單對(duì)象屬性篩選選擇器

jQuery選擇器之特殊選擇器this

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av