jQuery初學基礎常用內容——選擇器
阿新 • • 發佈：2018-11-28
接近半個月沒有更新部落格了，因為在學習Vue的一個小專案，如果要問我這個小專案做的如何，我能說的就是程式碼我給背下來了。背程式碼我個人認為並不是一個很好的方法，但是確實也是一種學習的途徑，起碼我從一開始的不理解，到最後可以理解程式碼為什麼要這麼寫。
好了，這次要寫的內容是JQ，為什麼是JQ？因為我最近心態不穩定，很多東西都學不進去（自學真痛苦啊都 = = ！），最後沒辦法，不能學不進去就玩遊戲吧，那就限定自己兩個小時，全部精力都集中在視訊或者學習的內容上（當然這個JQ之前學過一些），權當是複習鞏固了。
廢話不多說，進入正題。
什麼是JQ？書上網路上有很多解釋都比我的要好，但是就我個人的理解看來，JQ就是基於原生JS的簡化語言。
比如說我們在原生的JS中想要找到一個標籤，這個標籤的id我們再原生的JS中需要通過document.getElementById(id)
$('#id')，說了那麼多，JQ就是簡化了原生JS的各種繁瑣複雜的操作，就這麼簡單。下面我們來講解JQ如何使用。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="node_modules/jquery/dist/jquery.js"></script>//這裡引入的檔案就是JQ檔案，注意我們引入的JQ檔案一定要在我們自己的JS檔案之前，否則會被覆蓋。 <script src="JS/main.js"></script> </body> </html>
這裡給一個JQ檔案的下載連結（當然其他的依賴也可以下載到），我們可以直接在這個網站找到JQ檔案，直接引入JQ檔案的地址，或者下載使用。https://www.bootcdn.cn/
上文中的程式碼，我將JQ以及自己的JS檔案放在了body後面，這樣的做法我就不做過多的解釋了。
1、選擇器
在JQ中，對於標籤的選擇可以說是相當的便利，它的選擇方法與CSS的選擇器方法一樣。
//在html中相關內容 <div id=“id1”>1 <span>2<span> </div> <div class=“class1”>1</div> <div class=“class1”>1</div> <input type="number" /> <input type="text" />
//在JS中的相關內容
//程式碼中的$就是jQuery，JQ中就是這麼定義，所以。。。。
$('div') //這裡的就是選中所有的div
$('#id1') //選中id為id1的div
$('.class1') //選中class為class1的div
$('#id1 span')//選中id為id1的div下的span標籤
$('div:first')//選中第一個div
$(input[type=text]) //選中type為text的input標籤
PS：如果一定要在body前引入JQ檔案，那麼在JS檔案中寫JQ的時候如下
//js中相關程式碼
$(function(){
});
上面的這兩行程式碼等同於JS中的window.onload