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基础的更多相关文章
- Hybrid App开发之jQuery选择器
前言: 前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器. 什么是选择器? JQuery选择器通过标签名.属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性 ...
- Hybrid App开发之JavaScript基础
前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- Hybrid App开发之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
- Hybrid App开发之Html基本标签使用
前言: 前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用. HTML的超链接 1.)创建一个超链接 <div> <p> <a href="ht ...
- iOS 开发之 GCD 基础
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- ios开发之OC基础-类和对象
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...
- ios开发之OC基础-oc小程序
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...
- ios开发之OC基础-ios开发学习路线图
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...
随机推荐
- 永久设置mysql中文乱码问题
1.进入mysql的命令窗口 输入 show variables like '%char%'; 查看当前编码是否为UTF-8 2.在上述命令的结果中我们可以看到Wamp的安装目录,找到这一目录,在里面 ...
- 关于quotename的用法
首先,sqlserver里的标识符有一定的规则,比如 你 create table abc 123(...) 那么中间含有空格,它不是符合规则的. 你会写做 create table [abc 12 ...
- 关于WordPress搬家方法步骤的整理
最近准备更换自己的博客服务器,所以需要将原来服务器上的所有东西都搬到新的服务器.为了数据的安全,在网上找了很多的资料.现在整理一下整个搬家过程的操作步骤.下面进入正题: 1.测试环境这次我使用的示例服 ...
- POJ1019-Number Sequence数学
题目链接:http://poj.org/problem?id=1019 题目大意: 题目的意思很清楚了,就是把数字的每一位都当成是单个的字母来对待,然后求第i位的数是哪一个.(1<=i<= ...
- Rabin-Karp字符串查找算法
1.简介 暴力字符串匹配(brute force string matching)是子串匹配算法中最基本的一种,它确实有自己的优点,比如它并不需要对文本(text)或模式串(pattern)进行预处理 ...
- Arduino UNO +ESP8266采集数据上传到贝壳网
集成电路设计大赛赛程将至,我现在还是毫无头绪,然后又报了一个互联网+,比赛报了,东西就必须出来,时间很紧的情况下,所以选择了开源的arduino的进行完成.从开始接触Arduino到完成工程,前前后后 ...
- shell群发邮件脚本
linux版本:CentOS 6.7 //可以使用lsb_release -a查看 一.修改/etc/mail.rc set from=123456@qq.com //你自己的真实邮箱 ...
- 在Linux下的找不同-打补丁
Q:为什么要找不同,为什么要打补丁? A: 在Linux应用中,作为DBA,我们知道MySQL跑在Linux系统之上,数据库最重要的追求就是性能,"稳"是重中之重,所以不能动不动就 ...
- carryLess小笔记001_Java中16进制与字符串之间的相互转换
笔者前几日在开服过程中需要将字符串转化成为16进制的字符串,在网上找到了一些方法尝试之后,均发现存在一个问题-->字符串转为16进制后再转回来,英文正常,中文出现乱码 经过考虑决定通过以下方式进 ...
- chroot jail
注意,原标题是:Linux Virtualization using Chroot Jail,我实在不知道怎么翻译,所以,自作主张,选了chroot jail作为标题.原文地址 chroot jail ...