目錄
前言
1、 jQuery簡介
1.1、JavaScript庫
1.2、jQuery的概念
1.3、jQuery的優點
1.4、jQuery的入口函式
2、jQuery選擇器
2.1、jQuery基本選擇器
2.2、jQuery層次選擇器
2.3、jQuery篩選選擇器
3、jQuery中的排他思想
總結
前言
小編我又回來了，今天又是元氣滿滿的一天，今天又是好好學習的一天，小編我今天又來和大家做分享了，今天是小編接觸jQuery的第一天，了解到了jQuery之后我突然覺的JavaScript原生js一點也不香了，感覺有了jQuery小編我又可以偷懶了！我迫不及待的想要個大家分享了！快拿起你們的小本本，帶上你們聰明的大腦我們一起來看看吧！
1、 jQuery簡介
1.1、JavaScript庫
JavaScript庫：就是library，是一個封裝好的待定的集合（方法和函式），從封裝一大堆函式的角度理解庫，就是在這個庫中封裝了很多預先定義好的函式在里面，
簡單理解就是：一個JS檔案，里面對我們的原生js代碼進行了封裝，存放到里面，這樣我們就可以快速高效的使用這些封裝好的功能了，
常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實作的，我目前主要學習的是 jQuery，
1.2、jQuery的概念
- jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情，
- j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能，
- jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、影片設計和 Ajax 互動，
- 學習jQuery本質： 就是學習呼叫這些函式（方法），
- jQuery 出現的目的是加快前端人員的開發速度，我們可以非常方便的呼叫和使用它，從而提高開發效率，
在小編我看來jQuery與JavaScript的區別就像是電梯與樓梯，比如你樓修的高了，一個是電梯一個是樓梯，小編我不知道你們是選擇樓梯還是電梯，反正小編我是選擇電梯，原因是樓梯你爬的再快最后你還是爬不過電梯，第二就是因為小編懶，不想爬樓梯！哈哈哈！
1.3、jQuery的優點
- 輕量級，核心檔案才幾十kb，不會影響頁面加載速度，
- 跨瀏覽器兼容，基本兼容了現在主流的瀏覽器，
- 鏈式編程、隱式迭代，
- 對事件、樣式、影片支持，大大簡化了DOM操作，
- 支持插件擴展開發，有著豐富的第三方的插件，例如：樹形選單、日期控制元件、輪播圖等
- 免費、開源，
1.4、jQuery的入口函式
jQuery常見的兩種入口函式：
// 第一種: 簡單易用，
$(function () {
... // 此處是頁面 DOM 加載完成的入口
}) ;
// 第二種: 繁瑣，但是也可以實作
$(document).ready(function(){
... // 此處是頁面DOM加載完成的入口
});在一般情況下我們最常用的是第一種方法，因為他語言簡單好記！看來我們的程式員都是懶人，哈哈哈！
2、jQuery選擇器
2.1、jQuery基本選擇器
jQuery獲取元素語法格式：
$("選擇器") // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號 基本選擇器：
2.2、jQuery層次選擇器
層次選擇器：
2.3、jQuery篩選選擇器
篩選選擇器：
在jQuery中篩選代碼肯定不止這一點點，當然還有其他的，其他的類似DOM中的通過一個節點找另外一個節點，父、子、兄以外有所加強，
3、jQuery中的排他思想
當看到jQuery中的排他思想之后我發現它是真的讓我耳目一新的感覺，這個代碼量太少了，讓我找到新大陸，如獲至寶啊！因為在我們的原生js代碼中的排他思想我們需要去用for回圈去實作，當你絞盡腦汁寫完之后看到那代碼真的是心酸，但當我看完jQuery的排他思想后我發現我真的是恨自己為什么沒有早點知道jQuery這個東西，下面我給大家展示一下jQuery的排他思想案例吧！讓你們也一起看看！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jQuery/jquery.min.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
//隱式迭代給所有的按鈕都系結了點擊事件
$("button").click(function() {
//當前的元素變化背景顏色
$(this).css('background', 'pink');
//其余的兄弟去掉背景顏色
$(this).siblings("button").css("background", "");
});
});
</script>
</body>
</html>看到只有兩行的代碼，那些還在寫js原生代碼的小伙伴們你們哭了嗎？覺得心酸嗎?原生代碼好多行的邏輯在這里只需要兩行！你感動嗎？
總結
今天小編的分享就到這里了，學習了一天的jQuery還是識訓滿滿的，不知道小伙伴你們識訓了多少？但是今天的jQuery讓我感覺到了一個不一樣的世界，讓我覺得很有趣！愛了愛了，被jQuery圈粉了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404379.html
標籤：其他