JQuery入門（一）JQuery初體驗
阿新 • • 發佈：2018-11-24
前言
本章將進入全新的章節學習，在這裡我們將學習JS的“輪子”JQuery。
方法
1.概念
相信大家經過前面的JS學習，在原生的JS中操作html元素如通過id獲取html物件是document.getElementById("id")來進行獲取，在JQuery庫中，我們只需要簡單的$("#id")即可，是不是很爽！
各大網站對JQuery的定義如下：
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 程式設計。
jQuery 很容易學習。
讀到這裡大家可以鬆口氣，因為它真的簡單且簡化了我們的程式設計，在我們不知道如何造輪子的時候最好學會用輪子！JQuery實際上也是JS它將底層的JS功能進行了封裝以供我們使用！web程式幾乎都用JQuery來操作html元素物件以及進行js程式設計！！！拋棄以前的純JS吧！ （這裡不是讓大家忘記，該會還是要會，博主之前還遇到過純JS寫的html網頁，所以還要懂的！）
2.JQuery庫的下載和引入
官方網址：https://jquery.com/，大家下載最新的版本即可！
下載壓縮版就行了，節省空間！
新建一個js檔案，將得到的程式碼複製到其中即可。我命名為jquery-3.3.1.min.js
將該js檔案引入我們的專案中，一般放入js資料夾下：
在html中引入該js檔案如下：
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
3.第一個JQuery程式
範例：使用JQuery為一個text文字框賦值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery</title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //使用JQuery為使用者名稱文字框賦值 $("#username").val("張三"); }); </script> </head> <body> <div style="background-color: blueviolet;"> <form action="#" method="post" id="ff"> <h5>註冊資訊</h5> 使用者名稱：<input type="text" name="username" id="username" value=""/><span id="usernameSpan"></span><br/> 性 別：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/> 愛 好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳 <input type="checkbox" name="hobby" value="棋牌" />棋牌<span></span><br/> 畢業院校：<select name="school" id="school"> <option value="--請選擇--">--請選擇--</option> <option value="清華大學">清華大學</option> <option value="北京大學">北京大學</option> <option value="挖掘機技術學院">挖掘機技術學院</option> </select><span></span><br/> 個人簡介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/> <input type="button" value="提交" onclick="sub();"/> <input type="reset" name="" id="" value="重置" /> </form> </div> </body> </html>
這樣，你就寫出了你的第一個JQuery程式碼！大家可以不用理解$()的含義，後面會做相應的介紹！
不過，你可以發現這種方式獲取和CSS的選擇器很像！