初識JQuery。
JQuery是在JavaScript的基礎上進行了封裝,之前在學習JavaScript時候,有三種在html文件中引用js的方法,其中<script src=xxx.js ></script> 這種方法中的xxx.js檔案就可以看做是一個小的jquery,也就是說,jquery是javaScript的指令碼庫(函式庫)。
而我們一般用的這個指令碼庫,並不需要我們自己去寫,JQuery官網上可以下載到,裡面基本上囊括了我們經常會用到的方法,當然如果有需要可以自定義方法到juqery.js檔案中,這個文章後面會講到。
和JavaScript外部引用方式一樣,jquery也是通過<srcipt src ="xxx.js URL">
- 引用JQuery官網的最新線上版本
<script src="https://jquery.com/jquery.min.js"></script>
1.必須在網的條件下進行
2.必須保證URL地址是正確的,更改域名後便會訪問不到
3.實時更新,無需下載最新版本,新增功能便可以使用
- 引用本地的JQuery指令碼
<script src="js/jquery-1.11.1/jquery.min.js"></script>
1.穩定,無需網路,隨時隨地訪問
2.如果需要新版本的功能,則需要下載最新版本替換舊版本
說到版本問題,官網上有兩種常用的版本,一種是min版(壓縮版),一種是uncompressed(未壓縮版),兩種版本實現的效果是一樣的。
不同點:檔案大小,有無註釋,程式碼的格式是否規範。
舉一個簡單例子說明一下jquery中的基本語法格式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初識JQuery</title> <script src="../JQuery/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); </script> </head> <body> <p>一點,我就消失了</p> </body> </html>
$(document)是jquery是HTML的文件物件;
ready()事件在文件物件就緒時觸發,這個和onload作用效果是一樣的,但是要比onload載入更快;
$("p")是一個JQuery選擇器,用來選中文件中的p標籤,
$("p").click為當前選中的物件新增一個click事件,
$("this")表示當前的HTML物件,這裡指的是p標籤,
hide()方法為實現效果,將p標籤在單擊後內容隱藏。
DOM物件要區分於JQuery物件
//通過js獲取的物件是DOM物件
var domObj=document.getElementById("id");
//通過jquery獲取的物件是jquery物件
var jqObj=$("#id");
//DOM物件向JQuery物件的轉化
var jqObj=$(domObj);
DOM物件是W3C標準,適用於JQuery和Javascript;但JQuery物件只能在JQuery程式中使用。