1. 程式人生 > >初識JQuery。

初識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程式中使用。