jQuery學習筆記之入門
最近在學習jQuery，在網上看到有幾篇關于jQuery的文章，寫的不錯轉載過來跟大家分享一下；
一、JQuery是什么
JQuery是什么？始終是縈繞在我心中的一個問題：
借鑒網上同學們的總結，可以從以下幾個方面觀察。
不使用JQuery時獲取DOM文本的操作如下：
document.getElementById('info').value = 'Hello World!';
使用JQuery時獲取DOM文本操作如下：
$('#info').val('Hello World!');
嗯，可以看出，使用JQuery的優(yōu)勢之一是可以使代碼更加簡練，使開發(fā)人員更加專注于邏輯本身。
二、JQuery能做什么
jQuery使用戶能更方便地處理HTML、events、實現(xiàn)動畫效果，并且方便地為網站提供AJAX交互。
jQuery庫包含以下功能：HTML元素選取、HTML元素操作、CSS操作、HTML事件函數(shù)、JavaScript特效和動畫、HTML|DOM遍歷和修改、AJAX、Utilities。
jQuery使用戶方便快捷獲取DOM元素、動態(tài)修改頁面樣式、動態(tài)改變DOM內容、響應用戶的交互操作、為頁面添加動態(tài)效果、統(tǒng)一Ajax操作、簡化常見的JavaScript任務。
上述是對JQuery比較中肯的評價，節(jié)選其中的關鍵字可以粗略的觀察到：
方便的選取DOM元素，操作DOM元素。（HTML元素選取、HTML元素操作、獲取DOM元素、動態(tài)修改頁面樣式、動態(tài)改變DOM內容）
響應用戶操作。（HTML事件函數(shù)、JavaScript特效和動畫、響應用戶的交互操作、為頁面添加動態(tài)效果）
簡化AJAX操作。（方便地為網站提供AJAX交互、統(tǒng)一Ajax操作）
即：方便DOM的選取和操作、響應用戶操作、簡化AJax操作。
三、DOM是什么
上述提到了DOM元素，不了解，查閱總結如下：
DOM 全稱是 Document Object Model，是文檔對象模型。
通過DOM元素，可以方便的操作HTML中的節(jié)點，比如獲取節(jié)點的內容，添加某些元素，刪除某些元素。
也就是說，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對象之間有什么區(qū)別？
先了解什么是JQuery對象：
JQuery對象就是用JQuery包裝DOM之后產生的對象。JQuery對象是JQuery獨有的，可以使用JQuery的各種方法。
$("#test").html();
意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法 。
這段代碼的作用等同于用DOM實現(xiàn)代碼：
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對象是一個數(shù)據對象，可以通過[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提供的一個函數(shù)，用來將DOM元素、選擇器包裝成jQuery對象。
var v1 = $('#id');
var v2 = jQuery('#id');以上兩者是等同的。
所以"$"其實是一個符號，$()代替了jQuery(),當然你也可以使用其他的字符來代替"$"
var jq = jQuery.noConflict();
var v1 = jq('#id'); // 等同于var v1 = $('#id');以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得總結【經典收藏】
這篇文章主要介紹了15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得,詳細總結分析了jQuery常用的開發(fā)技巧,需要的朋友可以參考下2016-05-05
將JQuery1.2.6升級到JQuery1.4，有幾天下班沒有關閉ajax輪詢網頁，第二天早上來，內存耗盡，發(fā)現(xiàn)此內存泄漏在IE6上不存在(IE7未測試),IE8上存在2010-10-10
淺析jQuery移動開發(fā)中內聯(lián)按鈕和分組按鈕的編寫
這篇文章主要介紹了jQuery移動開發(fā)中內聯(lián)按鈕和分組按鈕的編寫方法,基于jQuery mobile這個jQuery針對移動開發(fā)版的庫,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細介紹了jQuery事件用法，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
這篇文章主要介紹了JQuery勾選指定name的復選框集合并顯示的方法,涉及jQuery表單元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
對于我們的用途，jQuery是一個更合適。 該js中 的功能更難以配置，這是需要我們的處理的，這是很難定義。2010-08-08
jQuery.getScript加載同域JS為xhr請求，導致firebug不能正常讀取js，因此不能夠斷點該js2012-02-02
這篇文章主要為大家詳細介紹了使用jQuery實現(xiàn)購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了jQuery對象$.html的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
在眾多的表格插件中，jqgrid的特點是非常鮮明的，所以jqgrid表格插件用處非常廣泛，本篇文章給大家介紹通過點擊jqgrid表格彈出需要的表格數(shù)據，需要的朋友參考下2015-12-12