成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術教程 ? jQuery學習筆記之入門
全站頭部文字 我要出現在這里
jQuery學習筆記之入門 670 2024-02-09   

最近在學習jQuery,在網上看到有幾篇關于jQuery的文章,寫的不錯轉載過來跟大家分享一下;

一、JQuery是什么

JQuery是什么?始終是縈繞在我心中的一個問題:

借鑒網上同學們的總結,可以從以下幾個方面觀察。

不使用JQuery時獲取DOM文本的操作如下:

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

使用JQuery時獲取DOM文本操作如下:

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

嗯,可以看出,使用JQuery的優勢之一是可以使代碼更加簡練,使開發人員更加專注于邏輯本身。

二、JQuery能做什么

jQuery使用戶能更方便地處理HTML、events、實現動畫效果,并且方便地為網站提供AJAX交互。

jQuery庫包含以下功能:HTML元素選取、HTML元素操作、CSS操作、HTML事件函數、JavaScript特效和動畫、HTML|DOM遍歷和修改、AJAX、Utilities。

jQuery使用戶方便快捷獲取DOM元素、動態修改頁面樣式、動態改變DOM內容、響應用戶的交互操作、為頁面添加動態效果、統一Ajax操作、簡化常見的JavaScript任務。

上述是對JQuery比較中肯的評價,節選其中的關鍵字可以粗略的觀察到:

方便的選取DOM元素,操作DOM元素。(HTML元素選取、HTML元素操作、獲取DOM元素、動態修改頁面樣式、動態改變DOM內容)

響應用戶操作。(HTML事件函數、JavaScript特效和動畫、響應用戶的交互操作、為頁面添加動態效果)

簡化AJAX操作。(方便地為網站提供AJAX交互、統一Ajax操作)

即:方便DOM的選取和操作、響應用戶操作、簡化AJax操作。

三、DOM是什么

上述提到了DOM元素,不了解,查閱總結如下:

DOM 全稱是 Document Object Model,是文檔對象模型。

通過DOM元素,可以方便的操作HTML中的節點,比如獲取節點的內容,添加某些元素,刪除某些元素。

也就是說,DOM元素和HTML息息相關,它將HTML中的一個個標簽封裝成DOM元素,以便于JavaScript進行操作。

<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的標簽封裝成為一個DOM元素,接下來便可以方便的操作這個DOM對象,例如修改它的文本內容等等。

四、JQuery與DOM之間的關系

JQuery對象與DOM對象之間有什么區別?

先了解什么是JQuery對象:

JQuery對象就是用JQuery包裝DOM之后產生的對象。JQuery對象是JQuery獨有的,可以使用JQuery的各種方法。

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

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

這段代碼的作用等同于用DOM實現代碼:

document.getElementById("id").innerHTML;

雖然jQuery對象是包裝DOM對象后產生的,但是jQuery無法使用DOM對象的任何方法,同理DOM對象也不能使用jQuery里的方法。

還需要注意一點的是:

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

另外,JQuery對象與DOM對象之間可以互相轉換。

JQuery對象 -> DOM對象

兩種轉換方式將一個JQuery對象轉換成DOM對象:[index]和.get(index);

jQuery對象是一個數據對象,可以通過[index]的方法,來得到相應的DOM對象。

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

通過.get(index)方法,得到相應的DOM對象。

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

DOM對象 -> JQuery對象

對于已經是一個DOM對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。如$(document.getElementById("test"))

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

DOM對象轉換為JQuery對象之后就可以使用JQuery的方法了。

需要再次強調注意的是:DOM對象才能使用DOM中的方法,jQuery對象是不可以用DOM中的方法。

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

這個問題解決之后,還有一個疑問:我們經常在JQuery看見$('div')、$('#id')、$('.class')等類似的代碼。那么其中的"$"究竟有什么作用呢?

$其實就是jQuery的別稱。是jQuery提供的一個函數,用來將DOM元素、選擇器包裝成jQuery對象。

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

以上兩者是等同的。

所以"$"其實是一個符號,$()代替了jQuery(),當然你也可以使用其他的字符來代替"$"

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

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



主站蜘蛛池模板: 雾里看花电视剧剧情介绍| 调音师结局剧情大解析| 袁隆平电影| 西游记tvb| 啵乐乐| 密探| 诗歌繁星| 洪金宝电影| 无锡电视台| 画魂缠身 电影| 杀破狼3国语在线观看| 1—36集电视剧在线观看| 鸣鸟不飞oad| 喜羊羊第一部全集免费| 八仙过海 电影| 低糖食物一览表| 寄宿生韩国电影| 《流感》高清在线观看| 暴风雨的儿女| 女性吃鹅肝的好处与功效| 刘浩存《一秒钟》舞蹈| 凌晨晚餐| 相识电影| 九九九九九九九九九九热| 英雄第二季| 我自己说了算作文| 38在线电影| 刘德华表里不一| 魔影| 电影四渡赤水| 爱奴 电影| 白丝美女被挠脚心| 小女孩屁股| 电影《uhaw》完整版| 任喜宝| 折叠画| 黑势力| 散文诗二首批注| 手纹线| 斧头(俄罗斯电影) 战争片| 四年级科学上册教学计划(新教科版)|

!!!站長長期在線接!!!

網站、小程序:定制開發/二次開發/仿制開發等

各種疑難雜癥解決/定制接口/定制采集等

站長微信:lxwl520520

站長QQ:1737366103