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的選擇器很像!