Hybrid App开发之jQuery基础_H5之家 - 中国HTML5教程资源分享第一站

> 脚本语言 > >

Hybrid App开发之jQuery基础 2017-06-17 15:52　出处：清屏网　人气：　

前言：

前面学习了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样式