Hybrid App开发之jQuery基础
Posted 总李写代码
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hybrid App开发之jQuery基础相关的知识,希望对你有一定的参考价值。
前言:
前面学习了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基础的主要内容,如果未能解决你的问题,请参考以下文章