JQuery認識

月光派件中。發表於2020-10-03
jQuery

JQuery

什麼是jQuery

它通過封裝原生的 JavaScript 函式得到一整套定義好的方法。

jQuery的作用

1.像 CSS 那樣訪問和操作 DOM
2.修改 CSS 控制頁面外觀
3.簡化 JavaScript 程式碼操作
4.事件處理更加容易
5.各種動畫效果使用方便
6.讓 Ajax 技術更加完美
7.基於 jQuery 大量外掛
8.自行擴充套件功能外掛

Query的優點

以更少的程式碼、實現更多的功能

jQuery的引入方式

  1. 本地引入（外連結）
    <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
  2. 網址引入
    百度：
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    又拍雲：
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    新浪：
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    Google 谷歌
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    $(function(){})類似window.onload,告訴瀏覽器先載入html和css在載入js程式碼

本地引入和網站的引入的區別：

本地引入的優缺點：
優點：
1：本地引入JQ載入的時候速度更快.
2：本地引入更加穩定。
缺點：
1：但是會增加專案的體積，本地引入的庫或者框架或者插架太多讓網站開啟速度變慢。

網站引入的優缺點：
優點：
1：不必擔心增加專案的體積。
缺點：
1：引入有時會不穩定。

擴充：

寫法不同（參考4擴充html頁面）

jq庫的版本：

舊版本和新本版的問題。
舊版本更穩定，相容性更好。
新版本只是增加了一些新的方法，最新版本不建議用，因為穩定性不好。
jq 2.0以上版本不在支援ie6/7/8瀏覽器。

如果想了解學習jq，建議去jq官網自學API

$==document.getElementById(); $('屬性')

本地引入JQ庫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">點選</button>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<!--我們本地引入JQ庫就像引入本地js一樣就行-->
	<script type="text/javascript">
//		var obtn=document.getElementById('btn');
//		btn.οnclick=function(){
//			alert(1)
//		}

		$(function(){
			$('#btn').click(function(){
				alert(2)
			})
		})
	</script>
</html>

網站引入JQ

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button class="btn">點選</button>
	</body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!--
		1：家裡必須有網
	-->
	<script type="text/javascript">
		$('.btn').click(function(){
			alert('你好')
		})
	</script>
</html>

相關文章