目錄
一、jQuery基礎
1.定義
2.種差（內涵)
3.下載
4.參考
5.jQuery 語法
實體:
6.檔案就緒函式
實體：
檔案就緒函式簡潔寫法：
二、jQuery選擇器：
作用：
定義:
種差（內涵)：
分類：
（1）基本選擇器
1.1 ID選擇器
1.2 class類選擇器
案例：
代碼除錯及jQuery與其它庫的沖突：
為什么要進行代碼除錯？
如何除錯JavaScript代碼?
Chrome 瀏覽器除錯工具-Elements界面：
Chrome 瀏覽器除錯工具-Console界面：
Chrome 瀏覽器除錯工具-Sources界面：
Chrome 瀏覽器除錯工具-Network界面：
Sources資源頁面的斷點除錯：
為什么jQuery庫與其它庫同時使用存在沖突？
如何解決jQuery與其它庫的沖突？
如同一個專案中有多個版本的jQuery：（相當于給$重命名）
如何解決jQuery與其它庫的沖突？
一、jQuery基礎
1.定義
jQuery是一個快速、簡潔、開源的JavaScript類別庫
2.種差（內涵)
（1）封裝JavaScript常用的功能代碼
（2）提供—種簡便的javaScript設計模式
（3）優化了HTML檔案操作、事件處理、影片設計和Ajax互動
3.下載
jQuery官網www.jquery.com
4.參考
（1）使用<script>標簽參考jQuery庫
參考下載jQuery:（下載好放本地，效率更高）
<head>
<script src="jquery-3.3.3.min.js"></script>
</head>
（2）參考百度CDN:（現下載，會使網頁加載速度慢）
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
5.jQuery 語法
$(selector).action()
美元符號定義jQuery
選擇符()里"查詢"和"查找"HTML元素
jQuery 的 action()執行對元素的操作
實體:
$("p").hide()-隱藏所有<p>元素
$("#test").hide()-隱藏所有id="test"的元素
6.檔案就緒函式
jQuery陳述句一般位于document ready函式中
$(document).ready(
function(){
開始寫jQuery 代碼.….
}
);
整個頁面加載結束后才執行jQuery，才能獲得頁面元素，所以這行代碼的意思指頁面加載結束后執行的
實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淳淳練習</title>
<!-- 匯入jQuery庫 -->
<script src="js/jquery-2.1.1.js"></script>
<!-- 檔案就緒（網頁元素都已經加載成功后） -->
<script>
//檔案就緒
$(document).ready(
function(){
//找到div：$("div")
//.text()獲取里面的內容
//$("div").text();相當于document.getElementsByTagName("div").text;
var str=$("div").text();
//var可以省略宣告一個變數儲存
//text()作用是獲取或設定頁面的文本內容
//將結果列印到控制臺
console.log(str);
//更改文本內容
$("div").text("淳淳最棒了")
}
);
</script>
</head>
<body>
<!-- 獲得頁面中一個div里面的值，并且將值列印到控制臺 -->
<div>hello 淳淳滴 jQuery</div>
</body>
</html>
檔案就緒函式簡潔寫法：
$(function(){
//開始寫jQuery代碼...
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淳淳練習</title>
<!-- 匯入jQuery庫 -->
<script src="js/jquery-2.1.1.js"></script>
<!-- 檔案就緒（網頁元素都已經加載成功后） -->
<script>
//檔案就緒
$(function(){
//找到div：$("div")
//.text()獲取里面的內容
//$("div").text();相當于document.getElementsByTagName("div").text;
var str=$("div").text();
//var可以省略宣告一個變數儲存
//text()作用是獲取或設定頁面的文本內容
//將結果列印到控制臺
console.log(str);
//更改文本內容
$("div").text("淳淳最棒了")
}
);
</script>
</head>
<body>
<!-- 獲得頁面中一個div里面的值，并且將值列印到控制臺 -->
<div>hello 淳淳滴 jQuery</div>
</body>
</html>
二、jQuery選擇器：
作用：
快速查找
定義:
是使用jQuery語法對頁面中的元素實作查找的模式，
種差（內涵)：
1、jQuery提供
2、jQuery選擇器繼承了CSS與Path語言的部分語法
3、允許通過標簽名、屬性名或內容對DOM元素進行快速、準確的選擇，
分類：
基本選擇器
層次選擇器
過慮選擇器
屬性選擇器
（1）基本選擇器
基本選擇器是JQuery最常用的選擇器,也是最簡單的選擇器，它通過元素id、class和標簽名來查找DOM元素
1.1 ID選擇器
jQuery的#id選擇器(ID選擇器)用于：根據id屬性值獲取對應的元素(最多一個元素)，將其封裝為jQuery物件并回傳，
語法:
//這里的id指的是具體的id屬性的值
$( "#id" )
回傳值:
回傳封裝了指定id的DOM元素的jQuery物件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淳淳練習</title>
<!-- 匯入jQuery庫 -->
<script src="js/jquery-2.1.1.js"></script>
<!-- 檔案就緒（網頁元素都已經加載成功后） -->
<script>
//檔案就緒
$(function(){
//ID選擇器的使用
//$("#cc")相當于document.getElementById()
$("#cc").text("淳淳要努力");
}
);
</script>
</head>
<body>
<!-- 獲得頁面中一個div里面的值，并且將值列印到控制臺 -->
<div>hello 淳淳滴 jQuery</div>
<span id="cc"></span>
</body>
</html>
1.2 class類選擇器
jQuery的.className選擇器(類選擇器)用于：根據css類名className獲取所有匹配的元素，將其封裝為jQuery物件并回傳，
語法:
//這里的className指的是具體的CSS類名
$( ".className" )
回傳值:
回傳封裝了帶有指定css類名的所有DOM元素的jQuery物件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淳淳練習</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
//檔案就緒
$(function(){
//類選擇器
$(".bb").text("你好淳淳");
//改變style
$(".bb").css("background","red");
});
</script>
</head>
<body>
<div class="bb">
hello jquery
</div>
</body>
</html>
案例：
使用jquery基本選擇器來完成不同按鈕背景顏色不同的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淳淳練習</title>
<style type="text/css">
/* 初始化 */
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
img{
display: block;
}
.clearfix::after{
display: block;
content: '';
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>
//檔案就緒
$(function(){
//可以改變任何屬性
$("input").attr("style","margin-left: 5px;float:left;");
$(".an6").attr("value","淳淳");
//只能改變style屬性
$(".an1").css("background","red");
$(".an2").css("background","yellow");
$(".an3").css("background","blue");
$(".an4").css("background","green");
$(".an5").css("background","red");
$(".an6").css("background","orange");
$("#nan").css("float","none");
$("#nv").css("float","none");
//推薦用于修改非布爾型別的，可以用，但不推薦
//$("#nan").attr("checked","true");
//jQuery1.6版本以后推出的，一般用于修改值為true或false的元素屬性，比如：單選按鈕、復選框、下拉按鈕的選中框
$("#nan").prop("checked","true");
});
</script>
</head>
<body>
<input type="button" value="默認" class="an1"/>
<input type="button" value="確認" class="an2"/>
<input type="button" value="自定義文案" class="an3"/>
<input type="button" value="自定義icon" class="an4"/>
<input type="button" value="右側顯示" class="an5"/>
<input type="button" value="不顯示" class="an6"/>
男：<input type="radio" name="sex" id="nan" value="" />
女：<input type="radio" name="sex" id="nv" value="" />
</body>
</html>
代碼除錯及jQuery與其它庫的沖突：
為什么要進行代碼除錯？
通常，javaScrit出現錯誤，不會提示資訊,無法找到錯誤的位置，
代碼可能包含語法錯誤、邏輯錯誤、這些錯誤比較難于發現，
如何除錯JavaScript代碼?
瀏覽器都內置了除錯工具，內置的除錯工具可以開始或關閉，嚴重的錯誤資訊會發送給用戶，
瀏覽器啟用除錯工具一般是按下F12鍵（或者右鍵->檢查，或者Fn+F12）
elements：這是當前頁面的html代碼
console：這是控制臺，主要看頁面有沒有錯誤資訊
sources：包含當前頁面的檔案：比如html、css、JS、img檔案等等
network：查看瀏覽器與后臺互動發送的請求資訊
Chrome 瀏覽器除錯工具-Elements界面：
選擇元素可以修改樣式， 方便除錯頁面樣式
Chrome 瀏覽器除錯工具-Console界面：
Chrome 瀏覽器除錯工具-Sources界面：
Sources js資源頁面：這個頁面內我們可以找到當前瀏覽器頁面中的js 源檔案，方便我們查看和除錯
Sources Panel 的左側分別是 Sources 和 Content scripts和 Snippets
Chrome 瀏覽器除錯工具-Network界面：
Network網路請求標簽頁：可以看到所有的資源請求，包括網路請求，圖片資源，html,css，js文 件等請求
Sources資源頁面的斷點除錯：
找到要除錯的檔案，然后在內容源代碼左側的代碼標記行處點擊 即可打上一個斷點
右側最上面一排分別是：暫停/繼續、單步執行(F10快捷鍵)、單步跳入此執行塊 (F11快捷鍵)、單步跳出此執行塊、禁用/啟用所有斷點，
為什么jQuery庫與其它庫同時使用存在沖突？
都使用 $() 作為核心函式，
如在同一頁面都引入jQuery和prototype庫就有可能導致腳 本停止運行，
<script src="jquery.js"></script>
<script src="prototype.js"></script>
如何解決jQuery與其它庫的沖突？
如同一個專案中有多個版本的jQuery：（相當于給$重命名）
語法: jQuery.noConflict(rem
| 引數 | 描述 |
| removeAll | 布林值，是否徹底移交對變數jQuery的控制權，默認為false， |
說明：
jQuery.noConflict()函式的回傳值是jQuery型別，回傳變數jQuery的參考，
該方法釋放 jQuery 對 $ 變數的控制，
該方法也可用于為 jQuery變數規定新的自定義名稱，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淳淳練習</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
//$重命名
var jq360=jQuery.noConflict();
//檔案就緒
jq360(function(){
//類選擇器
jq360(".bb").text("你好淳淳");
//改變style
jq360(".bb").css("background","red");
});
</script>
</head>
<body>
<div class="bb">
hello jquery
</div>
</body>
</html>
如何解決jQuery與其它庫的沖突？
使用jQuery.noConflict()方法讓出jQuery對$符的控制權：
① 同一頁面匯入jQuery多個版本沖突解決方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304949.html
標籤：其他
上一篇：js 中的不同的資料型別之間作比較時的“隱式轉換規則”（詳細！！！）
下一篇：前端電子屏數字展示效果組件開發