Hybrid App開發之jQuery基礎
阿新 • • 發佈：2017-06-13
簡單 代碼 前言 tdi ner user 總結 func pre
前言：
前面學習了JavaScript/Html/Css的基礎知識，今天學習一下常用js框架jQuery的使用進行快速的開發。
JQuery的基本功能：
- 方位和操作DOM元素
- 控制頁面樣式
- 對頁面事件的處理
- 大量插件在頁面中的運用
- 與ajax技術的完美結合
首先先編寫一個jquery程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶信息</title> <script type="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { alert("歡迎來到Jquery編程世界"); }); //等價於傳統凡事 window.onload=function () { alert("歡迎來到Jquery編程世界"); };//等價於 $(function () { alert("歡迎來到Jquery編程世界"); }); </script> </head> <body> </body> </html>
在網頁加載完畢是會彈出對話框提示。
通過上面額示例，可以看出JQuery的代碼風格
- 使用$符號
- 事件操作采用鏈式調用
JQuery的簡單應用
1、）JQuery訪問DOM對象
先看下什麽是DOM對象
DOM（Document Object Model即文本對象模型），每個頁面就是一個DOM對象，通過傳統的JavaScript的訪問頁面中的元素，就是訪問DOM對象。
在了解一下什麽是jQuery對象？
在JQuery庫中通過本身自帶的方法獲取頁面元素的對象，這些對象我們稱之為JQuery對象。
舉例對比一下兩者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { //傳統的JavaScript方式 var firstDiv=document.getElementById("first_div"); var secondDiv=document.getElementById("second_div"); secondDiv.innerHTML=firstDiv.innerHTML; //JQuery方式 firstDiv=$("#first_div"); secondDiv=$("#innerHTML"); secondDiv.html(firstDiv.html()); }); </script> </head> <body> <div id="first_div"> <p> 這是第一行 </p> </div> <div id="second_div"> <p> </p> </div> </body> </html>
2、）JQuery控制DOM對象
寫一個簡單的小例子說明一下，比如我們寫一個網頁用戶輸入姓名，年齡，性別然後提交，將信息顯示在一個div中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>填寫用戶信息</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //jquery寫法 $(function () { $("#submitUserData").click(function () { var name=$("#userName").val(); var age=$("#userAge").val(); var sex=$("#male").is(":checked") ?‘男‘:‘女‘; var isMarried=$("#isMarried").is(":checked")?"已婚":"未婚"; var userInfoData= "<p>姓名："+name+"<br>" +"年齡："+age+"<br>" +"性別："+sex+"<br>" +"婚否："+isMarried+"<br></p>"; var userInfoDiv= $("#userInfoDiv"); userInfoDiv.html(userInfoData); }); }); //傳統寫法 function submitUserData() { var name=document.getElementById("userName").value; var age=document.getElementById("userAge").value; var sex=document.getElementById("male").checked ?‘男‘:‘女‘; var isMarried=document.getElementById("isMarried").checked?"已婚":"未婚"; var userInfoData= "<p>姓名："+name+"<br>" +"年齡："+age+"<br>" +"性別："+sex+"<br>" +"婚否："+isMarried+"<br></p>"; var userInfoDiv= document.getElementById("userInfoDiv"); userInfoDiv.innerHTML=userInfoData; } </script> </head> <body> <div> <h3>請輸入以下信息</h3> 輸入姓名：<input type="text" name="userName" id="userName"><br> 輸入年齡：<input type="number" name="userAge" id="userAge"><br> 選擇性別：<input type="radio" name="sex" id="male" checked> 男 <input type="radio" name="sex" id="female">女<br> 是否已婚：<input type="checkbox" name="isMarried" id="isMarried"><br> <input type="submit" id="submitUserData" onclick="submitUserData()"> </div> <div id="userInfoDiv"> </div> </body> </html>
3、）JQuery控制CSS樣式
和上面一樣，直接寫個小例子，看下如何控制css樣式的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery控制css樣式</title> <style type="text/css"> .normal{ color: black; width: 150px; height: 30px; padding: 5px; } .clicked{ color: blue; width: 150px; height: 30px; padding: 5px; } </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //JQuery寫法 $(function () { $("#changeCssBtn").click(function () { $(this).toggleClass("clicked") }); }); //傳統寫法 function changeCssBtnClick() { var className= document.getElementById("changeCssBtn").className; if(className=="clicked"){ document.getElementById("changeCssBtn").className="normal"; }else{ document.getElementById("changeCssBtn").className="clicked"; } } </script> </head> <body> <div > <button id="changeCssBtn" class="normal" onclick="changeCssBtnClick()">點擊修改css樣式</button> </div> </body> </html>
總結：
今天簡單學習一下JQuery的基礎及簡單使用。
Hybrid App開發之jQuery基礎