jQuery簡介
- jQuery設計宗旨是“Write Less,Do More”，就是說用更少的代碼，做更多的事情。
- jQuery項目主要由 jQuery Core(核心庫)、jQuery UI(界面庫)、Sizzle(CSS選擇器) 和 QUnit(測試套件) 四部分組成。
- jQuery的特性：
- jQuery為頻繁的DOM操作，針對瀏覽器兼容性提供了解決方案，并封裝了更為簡約的API；
- 支持鏈式操作，讓JS代碼書寫更優雅；
- jQuery將與之相關的方法和屬性，都封裝在jQuery對象中，避免造成全局變量污染；
- 最后不得不提的是jQuery的擴展，即便現在angularJS、vueJS橫行的年代，很多時候也不得不借助豐富的jQuery插件；
- jQuery相關網址：
jQuery HelloWorld
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq hello</title>
</head>
<body>
<!-- 導入jQuery庫 -->
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
console.log('jquery is ready!');
});
</script>
</body>
</html>
- $是jQuery的別名，
$()等同于jQuery()。
- 由于jQuery無可避免需要操作DOM文檔，所以應該在DOM載入之后再執行jQuery代碼。換句話說，所有jQuery相關操作應該再DOM ready事件觸發后才進行。
//匹配到document節點后，綁定ready事件（也可簡寫成以上helloworld的方式）
$(document).ready(function(){
//jQuery do something
});
jQuery對象和DOM對象
- 很多初學者會在打開一個js文件后，困惑這究竟是JavaScript原生代碼還是jQuery代碼。是由于沒區分JavaScript DOM API和jQuery API的差異，那什么是jQuery對象，什么是DOM對象呢？
區別
- DOM(Document Object Model)文檔對象模型主要依賴原生JavaScript暴露的接口來訪問和操作。比如
getElementByTagName()、getElementById()等內置的方法。而jQuery對象是對DOM對象進行一層包裝，更準確的說，jQuery對象將一個或多個DOM對象封裝后產生一個新對象。
- 由于jQuery對象和DOM對象存在差異，所以直接用jQuery對象調用DOM對象的方法是錯誤的，反之亦然。
jQuery對象轉DOM對象
- 上面提到，jQuery對象是包含一個或多個DOM對象的類數組對象。所以直接通過數組下標從jQuery對象獲取DOM對象：
//實際上jQuery validate表單驗證插件的源碼也是這么寫的
var li = $li[0];
- 除此之外，還可以通過jQuery對象提供的get方法來獲取：
var li = $li.get(0);
DOM對象轉jQuery對象
- 相對來說，DOM對象轉成jQuery對象就比較簡單了，直接調用jQquery的構造函數即可：
//可以傳遞單個或多個DOM對象
var li = document.getElementByTagName('li');
var $li = $(li);
jQuery ready()和JavaScript load()事件比較
HTML文檔的加載順序：
- 解析HTML結構
- 加載外部javascript腳本和css樣式文件
- 解析并執行javascript腳本
- 構造HTML DOM模型
- 加載外部圖片等外部文件
- 頁面加載完畢
-
jQuery.ready()事件是DOM結構繪制完畢就觸發，而原生的load()事件要等待所有資源準備好之后才觸發。換句話說，如果頁面需要加載大量的外部文件時，需要等待很長時間才執行load()方法，而jQuery.ready()則不需等待所有資源加載完畢。
- 另外，
jQuery.ready()事件可以定義多次。
jquery構造函數
- jQuery把所有的操作都封裝在一個jQuery構造函數中，形成了統一的操作入口，簡化了操作門檻。jQuery構造函數主要的調用方式有如下四種：
/***
*
* 方式一：jQuery(expression)
* 參數傳入一個表達式的字符串，通過表達式匹配文檔的元素，最終會把找到的元素封裝成jQuery對象返回。
*/
jQuery('#testDiv');
/***
*
* 方式二：jQuery(html)
* 參數傳入HTML字符串，jQuery將創建一個對應結構的DOM節點的jQuery對象
*/
jQuery('<input type="text">');
/***
*
* 方式三：jQuery(elements)
* 參數傳入一個或多個DOM元素，jQuery將其封裝成jQuery對象并返回
*/
jQuery('li').css('backgroud-color','#FFF');
/***
*
* 方式四：jQuery(fn)
* 傳入一個函數，其等價于`$(document).ready()`處理函數
*/
$(function(){
$('ul').css('color','red');
});
jQuery鏈式語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 鏈式操作</title>
<style type="text/css">
.txt{
display: block;
}
</style>
</head>
<body>
<span class="txt">我是一段文本內容</span>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
//創建四個按鈕
$('<input type="button" value="click me">'+
'<input type="button" value="triggle click">'+
'<input type="button" value="detach handler">'+
'<input type="button" value="show/hide text">').appendTo($('body'));
//為第一個按鈕綁定click事件
$('input[type="button"]').eq(0).click(function(){
alert('click me!');
//為第二個按鈕綁定click事件，觸發第一個按鈕的點擊
}).end().eq(1).click(function(){
$('input[type="button"]:eq(0)').trigger('click');
//為第三個按鈕綁定click事件，解除第一個按鈕的點擊事件
}).end().eq(2).click(function(){
$('input[type="button"]:eq(0)').unbind('click');
//為第四個按鈕綁定toggle事件，隱藏或顯示文本內容
}).end().eq(3).click(function(){
$('.txt').toggle('slow');
});
});
</script>
</body>
</html>
- jQuery提供了
end()、eq()、filter()等方法來進行鏈式操作。但為了代碼的可閱讀性，建議同一行調用的方法不超過3個，如果代碼過長可考慮換行或者縮進。
jQuery選擇器
- 不可否認，強大的選擇器也是jQuery能成為最流行的js框架的原因之一。試想如果jQuery的選擇器仍像原生JS
getElementById()那么孱弱，你會在項目中使用jQuery嗎？
- jQuery選擇器，實際上就是一個表示特殊語義的字符串，它支持id、tagName、css1~3和xpath表達式。然后調用jquery構造函數將該字符串傳入，就能選擇DOM對象，封裝成jQuery對象。
jquery選擇器的過濾和選擇
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
