jQuery快速学习
jQuery快速學習
1、$(document).ready 的作用是等頁面的文檔（document）中的節點都加載完畢后，再執行后續的代碼，因為我們在執行代碼的時候，可能會依賴頁面的某一個元素，我們要確保這個元素真正的的被加載完畢后才能正確的使用。
<!DOCTYPE html> <html> <head><meta charset="utf-8"/><title>第一個簡單的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("您好！通過慕課網學習jQuery才是最佳的途徑。");});</script> </head> <body><div></div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
2、jQuery對象與DOM對象是不一樣的?
可能一時半會分不清楚哪些是jQuery對象，哪些是DOM對象，下面重點介紹一下jQuery對象，以及兩者相互間的轉換。?
通過一個簡單的例子，簡單區分下jQuery對象與DOM對象：
- 1
普通處理，通過標準JavaScript處理：
var p = document.getElementById('imooc'); p.innerHTML = '您好！通過慕課網學習jQuery才是最佳的途徑'; p.style.color = 'red';- 1
- 2
- 3
jQuery的處理：
var $p = $('#imooc'); $p.html('您好！通過慕課網學習jQuery才是最佳的途徑').css('color','red');- 1
- 2
通過('#imooc')方法會得到一個('#imooc')方法會得到一個p的jQuery對象，$p是一個類數組對象。這個對象里面包含了DOM對象的信息，然后封裝了很多操作方法，調用自己的方法html與css，得到的效果與標準的JavaScript處理結果是一致的。
3、jQuery對象轉化成DOM對象?
jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為的是提供更好更方便快捷的DOM處理與開發中經常使用的功能。我們使用jQuery的同時也能混合JavaScript原生代碼一起使用。在很多場景中，我們需要jQuery與DOM能夠相互的轉換，它們都是可以操作的DOM元素，jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素。
如何把jQuery對象轉成DOM對象？?
利用數組下標的方式讀取到jQuery中的DOM對象
HTML代碼
<div>元素一</div> <div>元素二</div> <div>元素三</div>- 1
- 2
- 3
JavaScript代碼
var $div = $('div') //jQuery對象 var div = $div[0] //轉化成DOM對象 div.style.color = 'red' //操作dom對象的屬性- 1
- 2
- 3
通過jQuery自帶的get()方法
var $div = $('div') //jQuery對象 var div = $div.get(0) //通過get方法，轉化成DOM對象- 1
- 2
4、DOM對象轉化成jQuery對象?
HTML代碼
- 1
- 2
- 3
JavaScript代碼
var div = document.getElementsByTagName('div'); //dom對象 var $div = $(div); //jQuery對象 var $first = $div.first(); //找到第一個div元素 $first.css('color', 'red'); //給第一個元素設置顏色- 1
- 2
- 3
- 4
通過getElementsByTagName獲取到所有div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象，通過調用jQuery對象中的first與css方法查找第一個元素并且改變其顏色。
5、jQuery選擇器之id選擇器?
id選擇器：一個用來查找的ID，即元素的id屬性
- 1
id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的
6、jQuery選擇器之類選擇器?
類選擇器，顧名思義，通過class樣式類名來獲取節點?
描述：
- 1
不難想到$(“.class”).css()方法內部肯定是帶了一個隱式的循環處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，后續我們還會慢慢的學到其他的優勢。
7、jQuery選擇器之元素選擇器?
元素選擇器：根據給定（html）標記名稱選擇所有的元素
- 1
- 2
等同與
var divs = document.getElementsByTagName('div');- 1
8、jQuery選擇器之全選擇器（*選擇器）?
在CSS中，經常會在第一行寫下這樣一段樣式
- 1
通配符意味著給所有的元素設置默認的邊距。jQuery中我們也可以通過傳遞選擇器來選中文檔頁面中的元素
$( "*" )- 1
9、jQuery選擇器之層級選擇器?
文檔中的所有的節點之間都是有這樣或者那樣的關系。我們可以把節點之間的關系可以用傳統的家族關系來描述，可以把文檔樹當作一個家譜，那么節點與節點直接就會存在父子，兄弟，祖孫的關系了。?
選擇器中的層級選擇器就是用來處理這種關系
子元素 后代元素 兄弟元素 相鄰元素
通過一個列表，對比層級選擇器的區別?
10、jQuery選擇器之基本篩選選擇器?
很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規范，而是jQuery自己為了開發者的便利延展出來的選擇器?
篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭?
通過一個列表，看看基本篩選器的描述：?
?
用法
- 1
- 2
11、jQuery選擇器之內容篩選選擇器?
基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器，當然其規則也會體現在它所包含的子元素或者文本內容上?
內容過濾器描述如下表：?
?
注意事項：?
1. :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素?
2. 如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。?
3. :parent與:empty是相反的，兩者所涉及的子元素，包括文本節點
12、jQuery選擇器之可見性篩選選擇器?
元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden?
描述如下?
總結
以上是生活随笔為你收集整理的jQuery快速学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一流投资人会关注什么样的区块链初创公司？
- 下一篇： jQuery快速入门