一）什么是jQuery？
【以封裝的思想，重構<<圖片顯示和隱藏>>】
第三方組織預先寫好的一些實用JS文件、類，方法，都統稱為JS實用庫，免費放在網上，同時配有相關的學習文檔和案例，
像以上實用庫有很多，其它在JavaEE領域比較著名是的jQuery。

*二）為什么要使用jQuery？
（1）jQuery是目標是讓程序員寫少代碼，做多事情
（2）jQuery庫，壓縮后，容量較小，不會占用系統過多資料，WEB頁面加載的速度相對較快
（3）jQuery庫，兼容各大主流瀏覽器，它是美國人開發的，主要依據美國人當時的瀏覽器環境
（4）jQuery庫，能完成原DOM能完成的所有操作，而且比DOM完成的更優
（5）jQuery庫，文檔和案例非常全，便于程序員學習
（6）jQuery庫，推薦為每一個標簽，取一個id屬性
（7）jQuery庫，不是萬能的，它只對JavaScript中的部份內容進行封裝，而其它的部份，依然要使用傳統方式
因此，項目中的jQuery代碼是一個雜合體。

三）jQuery的開發步驟？
（1）通過<script>標簽，引用第三方js庫，注意引用庫的路徑問題
（2）調用jQuery庫中相關的方法API，來完成業務操作

四）DOM對象和jQuery對象相互轉換
（1）什么是DOM對象
通過DOM的API，返回的對象，就叫做DOM對象，例如：document.getElementById("divID")：返回值：DOM對象

（2）什么是jQuery對象
A)通過jQuery的API，返回的對象，就叫做jQuery對象，例如：$("#divID")：返回值：jQuery對象
B)$(dom對象)，返回值就是jQuery對象，例如：$(document)，$(this)

（3）DOM對象轉成jQuery對象
$(dom對象)->jQuery對象

（4）jQuery對象轉成DOM對象
A)jQuery對象[0]->dom對象
B)jQuery對象.get(0)->dom對象

注意：dom對象只能調用dom的api
jquery對象也只能調用jquery的api
不能混調

五）DOM對象與jQuery對象對錯誤的顯示
（1）DOM對象的三種基本定位方式
A)document.getElementById()
B)document.getElementsByName()
C)document.getElementsByTagName()

（2）jQuery對象的三種基本定位方式
A)id屬性，例如：$("#id")
B)標簽名，例如：$("input")
C)樣式名，例如：$(".oneClass")

（3）DOM對象出錯的顯示
在不做判斷的情況下，dom出錯后，無顯示

（4）jQuery對象出錯的顯示
在不做判斷的情況下，jquery出錯后，有顯示,顯示為"undefined"

*六）jQuery九類選擇器【在網頁中，【查找】你需要的節點】(參見jQueryAPI.chm手冊)
（1）基本選擇器[selector_1.html]
$("#id")
$("div")
$(".oneClass")
$("p,div,span")
$("#id,div,.oneClass")

（2）層次選擇器[selector_2.html]
$("form input")：祖先 后代
$("form>input"):父親>直接小孩
$("form+input")：兄弟的第一個，只包括form元素下面
$("form~input")：所有兄弟，只包括form元素下面的

（3）增強基本選擇器[selector_3.html]
$("ul li:first")
$("ul li:last")
$("table tr:even")
$("table tr:odd")
$("table tr:eq(0)")
$("table tr:gt(0)")
$("table tr:lt(2)")
$(":header")
$(":checkbox:not(:checked)")選擇所有未選中的復選框。

（4）內容選擇器[selector_4.html]
$("div:contains('John')
$("p:empty")
$("div:has('p')
$("p:parent")

（5）可見性選器[selector_5.html]
$("table tr:hidden")
$("table tr:visible")

（6）屬性選擇器[selector_6.html]
$("div[id]")
$("input[name='newsletter']")
$("input[name!='newsletter']")
$("input[name^='news']")
$("input[name$='letter']")
$("input[name*='e']")
$("input[id][name$='letter']")

（7）子元素選擇器[selector_7.html]
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)")，索引，從1開始

（8）表單選擇器[selector_8.html]
（9）表單對象屬性選擇器[selector_9.html]
$("input:enabled")
$("input:disabled")
$(":checkbox:checked")
$(":checkbox:not(:checked)
$("select option:selected")

*七）jQuery中常用方法（上）【在網頁中，【操作】你需要的節點】
jquery對象.size()-------------dom對象.length
jquery對象.html()-------------dom對象.innerHTML，不能用于XML
jquery對象.val()--------------dom對象.value
jquery對象.css("back-ground","blue")
jquery對象.addClass("onClass")
jquery對象.attr("checked","checked")

轉載于:https://www.cnblogs.com/friends-wf/p/3808791.html

總結

以上是生活随笔為你收集整理的jquery 入门与知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。