欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery學(xué)習(xí)筆記之入門(mén)

 更新時(shí)間：2023年06月20日 23:42:29   作者：南山隱士  
本文主要對(duì)jQuery的基礎(chǔ)知識(shí)進(jìn)行介紹，非常適合剛開(kāi)始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來(lái)看下吧

最近在學(xué)習(xí)jQuery，在網(wǎng)上看到有幾篇關(guān)于jQuery的文章，寫(xiě)的不錯(cuò)轉(zhuǎn)載過(guò)來(lái)跟大家分享一下；

一、JQuery是什么

JQuery是什么？始終是縈繞在我心中的一個(gè)問(wèn)題：

借鑒網(wǎng)上同學(xué)們的總結(jié)，可以從以下幾個(gè)方面觀察。

不使用JQuery時(shí)獲取DOM文本的操作如下：

document.getElementById('info').value = 'Hello World!';

使用JQuery時(shí)獲取DOM文本操作如下：

$('#info').val('Hello World!');

嗯，可以看出，使用JQuery的優(yōu)勢(shì)之一是可以使代碼更加簡(jiǎn)練，使開(kāi)發(fā)人員更加專(zhuān)注于邏輯本身。

二、JQuery能做什么

jQuery使用戶能更方便地處理HTML、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX交互。

jQuery庫(kù)包含以下功能：HTML元素選取、HTML元素操作、CSS操作、HTML事件函數(shù)、JavaScript特效和動(dòng)畫(huà)、HTML|DOM遍歷和修改、AJAX、Utilities。

jQuery使用戶方便快捷獲取DOM元素、動(dòng)態(tài)修改頁(yè)面樣式、動(dòng)態(tài)改變DOM內(nèi)容、響應(yīng)用戶的交互操作、為頁(yè)面添加動(dòng)態(tài)效果、統(tǒng)一Ajax操作、簡(jiǎn)化常見(jiàn)的JavaScript任務(wù)。

上述是對(duì)JQuery比較中肯的評(píng)價(jià)，節(jié)選其中的關(guān)鍵字可以粗略的觀察到：

方便的選取DOM元素，操作DOM元素。（HTML元素選取、HTML元素操作、獲取DOM元素、動(dòng)態(tài)修改頁(yè)面樣式、動(dòng)態(tài)改變DOM內(nèi)容）

響應(yīng)用戶操作。（HTML事件函數(shù)、JavaScript特效和動(dòng)畫(huà)、響應(yīng)用戶的交互操作、為頁(yè)面添加動(dòng)態(tài)效果）

簡(jiǎn)化AJAX操作。（方便地為網(wǎng)站提供AJAX交互、統(tǒng)一Ajax操作）

即：方便DOM的選取和操作、響應(yīng)用戶操作、簡(jiǎn)化AJax操作。

三、DOM是什么

上述提到了DOM元素，不了解，查閱總結(jié)如下：

DOM 全稱(chēng)是 Document Object Model，是文檔對(duì)象模型。

通過(guò)DOM元素，可以方便的操作HTML中的節(jié)點(diǎn)，比如獲取節(jié)點(diǎn)的內(nèi)容，添加某些元素，刪除某些元素。

也就是說(shuō)，DOM元素和HTML息息相關(guān)，它將HTML中的一個(gè)個(gè)標(biāo)簽封裝成DOM元素，以便于JavaScript進(jìn)行操作。

<html>
 <body>
  <div id="info">
   <p>Test</p>
  </div>
 <script>
  window.onload = function(){
   document.getElementById("info").innerHTML="success";
  }
 </script>
 </body>
</html>

其中document.getElementById("info")就是將id為info的標(biāo)簽封裝成為一個(gè)DOM元素，接下來(lái)便可以方便的操作這個(gè)DOM對(duì)象，例如修改它的文本內(nèi)容等等。

四、JQuery與DOM之間的關(guān)系

JQuery對(duì)象與DOM對(duì)象之間有什么區(qū)別？

先了解什么是JQuery對(duì)象：

JQuery對(duì)象就是用JQuery包裝DOM之后產(chǎn)生的對(duì)象。JQuery對(duì)象是JQuery獨(dú)有的，可以使用JQuery的各種方法。

$("#test").html();

意思是指：獲取ID為test的元素內(nèi)的html代碼。其中html()是jQuery里的方法 。

這段代碼的作用等同于用DOM實(shí)現(xiàn)代碼：

document.getElementById("id").innerHTML;

雖然jQuery對(duì)象是包裝DOM對(duì)象后產(chǎn)生的，但是jQuery無(wú)法使用DOM對(duì)象的任何方法，同理DOM對(duì)象也不能使用jQuery里的方法。

還需要注意一點(diǎn)的是：

用#id作為選擇器獲取得的是jQuery對(duì)象，document.getElementById("id")得到的DOM對(duì)象，這兩者并不等價(jià)。

另外，JQuery對(duì)象與DOM對(duì)象之間可以互相轉(zhuǎn)換。

JQuery對(duì)象 -> DOM對(duì)象

兩種轉(zhuǎn)換方式將一個(gè)JQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：[index]和.get(index);

jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象，可以通過(guò)[index]的方法，來(lái)得到相應(yīng)的DOM對(duì)象。

var v1 = $("#test") ; //jQuery對(duì)象
var v2 = $v1[0]; //DOM對(duì)象

通過(guò).get(index)方法，得到相應(yīng)的DOM對(duì)象。

var v1 = $("#test"); //jQuery對(duì)象
var v2 = v1.get(0); //DOM對(duì)象

DOM對(duì)象 -> JQuery對(duì)象

對(duì)于已經(jīng)是一個(gè)DOM對(duì)象，只需要用$()把DOM對(duì)象包裝起來(lái)，就可以獲得一個(gè)jQuery對(duì)象了。如$(document.getElementById("test"))

var v1=document.getElementById("test"); //DOM對(duì)象
var v2=$(v1); //jQuery對(duì)象

DOM對(duì)象轉(zhuǎn)換為JQuery對(duì)象之后就可以使用JQuery的方法了。

需要再次強(qiáng)調(diào)注意的是：DOM對(duì)象才能使用DOM中的方法，jQuery對(duì)象是不可以用DOM中的方法。

五、JQuery中的“$”有什么作用

這個(gè)問(wèn)題解決之后，還有一個(gè)疑問(wèn)：我們經(jīng)常在JQuery看見(jiàn)$('div')、$('#id')、$('.class')等類(lèi)似的代碼。那么其中的"$"究竟有什么作用呢？

$其實(shí)就是jQuery的別稱(chēng)。是jQuery提供的一個(gè)函數(shù)，用來(lái)將DOM元素、選擇器包裝成jQuery對(duì)象。

var v1 = $('#id');
var v2 = jQuery('#id');

以上兩者是等同的。

所以"$"其實(shí)是一個(gè)符號(hào)，$()代替了jQuery(),當(dāng)然你也可以使用其他的字符來(lái)代替"$"

var jq = jQuery.noConflict();
var v1 = jq('#id'); // 等同于var v1 = $('#id');

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

相關(guān)文章

最新評(píng)論