jquery簡介

時間 2019-11-11

標籤 jquery 簡介欄目 JQuery 简体版

原文原文鏈接

注意：本教程參考自網上流傳的李興華老師的jquery開發框架視頻，可是苦於沒有相應的配套筆記，由我本人作了相應的整理.

本次學習的內容

主要來觀察一下jquery與傳統的javascript操做的區別javascript

具體內容

若是說如今要想實現頁面的動態操做，那麼天然能夠想象到要使用」JAVASCRIPT+DOM」操做技術來實現，可是問題是什麼，JavaScript+DOM的開發模式並不適合與全部的開發者，也就是說若是如今是一個非專業的技術人員，例如網頁美工，對於如今的開發要求來說，一個優秀的美工人員除了要求會使用HTML+DIV+CSS等基本操做以外，必需要可以掌握複雜的dom操做，因而這些人就廢了。而且就算是會使用咱們dom操做的開發人員，也會以爲異常的麻煩。例如若是要建立一個元素document.createElement(),隨後還要再使用appendChild()將此元素追加到咱們要操做的元素之中，然後才能顯示，而且若是少設計了一些屬性，那麼元素的顯示也不是咱們所但願的那樣。html

因此後來爲了簡化javascript+dom操做的難度，那麼後來推出了一個叫prototype開發框架，隨後在這個框架的基礎上，有推出了一個新的框架---jquery.其支持度更加普遍，因此在任何的開發之中（99%）都存在jquery的開發身影，若是不會jquery很難找到一份滿意的工做。java

首先jquery屬於第三方的開發框架包(*.js文件)，登陸www.jquery.com下載jquery的最新版本。可是在下載的時候很是有意思的是：jquery提供了兩類版本jquery

Jquery 1.x:全部瀏覽器都支持瀏覽器

Jquery 2.x:除了IE以外都支持app

爲了考慮到兼容性的問題，仍是建議使用jquery1.x的開發框架，這樣支持的瀏覽器會根據方便一些。之後在咱們學習的bootstarp開發框架也是用來jquery的技術。框架

若是要下載jquery實際上提供了兩種類型的版本：dom

壓縮版本(jquery-3.3.1.min.js)：刪除掉全部的註釋和空格信息(.min)函數

未壓縮版本(jquery-3.3.1.js)：主要是給用戶學習使用的，全部的註釋以及空格都會保留，學習

jquery使用

在項目的目錄之中建立一個js的文件目錄
隨後將jquery的開發包拷貝到目錄中
在須要使用JQuery的頁面位置使用<script>元素進行導入

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

範例：編寫第一個jquery程序

```
<html>
	<head>
		<title>jquery開發詳解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function show() {
				alert($(msg).val());
			}
		</script>
	</head>
	<body>
		<input type="text" name="msg" id="msg">
		<input type="button" value="顯示信息" onclick="show()">
	</body>
</html>
```
本程序中咱們所使用的$(msg).val()操做，替代了」document.getElementById(「msg」).value」。如今能夠感覺到jquery就是在簡化程序開發的dom操做。

jquery中最經常使用的語法形式就是」$(元素id)」,而val是一個操做函數用於取得各個表單組件的輸入內容。

在以前曾經使用過innerHTML操做設置」<span>」或」<div>」元素的內容，那麼這一操做如今也能夠簡化。
範例：設置元素中的顯示內容

<html>
	<head>
		<title>jquery開發詳解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function setContent() {
				$(msg).text("www.mldn.cn");
			}
		</script>
	</head>
	<body>
		<span id="msg"></span>
		<input type="button" value="顯示信息" onclick="setContent()">
	</body>
</html>

使用text()函數能夠設置指定id元素的顯示文本內容，可是須要注意的是，text()函數只可以設置普通文本，而不能設置HTML文本數據。

此時若是使用了text()函數設置了包含有html代碼的內容，則全部的html代碼中的標記都會自動使用轉義字符進行替代。可是所須要的是html效果，那麼可使用html()函數完成操做。

範例：設置html的顯示風格

<html>
	<head>
		<title>jquery開發詳解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function setContent() {
				$(msg).html("<h1>www.mldn.cn</h1>");
			}
		</script>
	</head>
	<body>
		<span id="msg"></span>
		<input type="button" value="顯示信息" onclick="setContent()">
	</body>
</html>