13-2 jquery介紹
1 什麼是 jQuery
jQuery 是 js 的一個庫，封裝了咱們開發過程當中經常使用的一些功能，方便咱們調用，提升開發效率。css
js庫是把咱們經常使用的功能放到一個單獨的文件中，咱們用的時候，直接引用到頁面裏便可。html
關於jQuery的相關資料：jquery
官網：http://jquery.com/編程
官網API文檔：http://api.jquery.com/api
漢化API文檔：http://www.css88.com/jqapi-1.9/數組
2 jQuery 的兩大特色app
鏈式編程：好比.show()和.html()能夠連寫成.show().html()。ide
隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用咱們本身再進行循環，簡化咱們的操做，方便咱們調用。函數
3 使用 jQuery 的基本步驟htm
（1）引包
（2）入口函數
（3）功能實現代碼（事件處理）
導包的代碼必定要放在js代碼的最上面。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>引入jquery</title> 6 </head> 7 <body> 8 <script src="jquery-3.3.1.min.js"></script> 9 10 <div id="app"></div>11 <div class="box"></div>12 <div class="box"></div>13 <script>14 console.log($('#app'));15 console.log($('.box'));16 console.log($('div'));17 $('div').css({18 'width': '200px',19 'height': '200px',20 "background-color":'red',21 'margin-top':'20px'22 })23 24 </script>25 26 27 </body>28 </html>
View Code
4 入口函數
原生 js 的入口函數指的是：window.onload = function() {}; 以下：
//原生 js 的入口函數。頁面上全部內容加載完畢，才執行。
//不只要等文本加載完畢，並且要等圖片也要加載完畢，才執行函數。
window.onload = function () {
alert(1);
}
而 jQuery的入口函數，有如下幾種寫法：
寫法一：
//1.文檔加載完畢，圖片不加載的時候，就能夠執行這個函數。
$(document).ready(function () {
alert(1);
})
寫法二：（寫法一的簡潔版）
//2.文檔加載完畢，圖片不加載的時候，就能夠執行這個函數。
$(function () {
alert(1);
});
寫法三：
//3.文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。
$(window).ready(function () {
alert(1);
})
jQuery入口函數與js入口函數的區別：
區別一：書寫個數不一樣：
Js 的入口函數只能出現一次，出現屢次會存在事件覆蓋的問題。
jQuery 的入口函數，能夠出現任意屢次，並不存在事件覆蓋問題。
區別二：執行時機不一樣：
Js的入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成。
文檔加載的順序：從上往下，邊解析邊執行。
5 js中的DOM對象 和 jQuery對象 比較
經過 jQuery 獲取的元素是一個數組，數組中包含着原生JS中的DOM對象。舉例：
針對下面這樣一個div結構：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div
經過原生 js 獲取這些元素節點的方式是：
var myBox = document.getElementById("app"); //經過 id 獲取單個元素
var boxArr = document.getElementsByClassName("box"); //經過 class 獲取的是僞數組
var divArr = document.getElementsByTagName("div"); //經過標籤獲取的是僞數組
經過 jQuery 獲取這些元素節點的方式是：（獲取的都是數組）
1 //獲取的是數組，裏面包含着原生 JS 中的DOM對象。2 console.log($('#app'));3 console.log($('.box'));4 console.log($('div'));
兩者相互轉換
一、 DOM 對象 轉爲 jQuery對象：
$(js對象);
二、jQuery對象 轉爲 DOM 對象：
jquery對象[index]; //方式1（推薦） jquery對象.get(index); //方式2
jQuery對象轉換成了 DOM 對象以後，能夠直接調用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
總結：若是想要用哪一種方式設置屬性或方法，必須轉換成該類型。
- 1. 22.jQuery介紹
- 2. jQuery Validate 介紹
- 3. jQuery 介紹
- 4. jQuery介紹
- 5. jQuery介紹（上篇）
- 6. jquery入門介紹
- 7. jQuery 模塊介紹
- 8. JQuery簡要介紹
- 9. jQuery 3教程(一)：jQuery介紹
- 10. jquery的each()詳細介紹
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • jQuery Mobile 簡介 - jQuery Mobile 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 22.jQuery介紹
- 2. jQuery Validate 介紹
- 3. jQuery 介紹
- 4. jQuery介紹
- 5. jQuery介紹（上篇）
- 6. jquery入門介紹
- 7. jQuery 模塊介紹
- 8. JQuery簡要介紹
- 9. jQuery 3教程(一)：jQuery介紹
- 10. jquery的each()詳細介紹