Jquery技术
Jquery技术
一、Jquery基础
1.1、Jquery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
jQuery官网： http://jquery.com
1.2、初识Jquery应用
$("tr:even").css("background-color","#e8f0f2");
1.3、jQuery能做什么
1. 访问和操作DOM元素
2. 控制页面样式
3. 对页面事件进行处理
4. 扩展新的jQuery插件
5. 与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
1.4、jQuery优势
1. 体积小，压缩后只有100KB左右
2. 丰富而强大的选择器
3. 出色的DOM封装
4. 可靠的事件处理机制
5. 出色的浏览器兼容性
6. 使用隐式迭代简化编程
7. 丰富的插件支持
1.5、jQuery库文件
Jquery库文件分为开发版和发布版：
如何引入Jquery库文件：
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
二、Jquery基本语法
2.1、使用jQuery弹出提示框
<script>
$(document).ready(function() {
alert("我欲奔赴沙场征战jQuery，势必攻克之！");
});
</script>
$(document).ready()与window.onload类似，但是也有区别
2.2、jQuery语法结构
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
2.3、Jquery操作页面元素
2.3.1、addClass( )添加样式
jQuery 对象.addClass([样式名]);
2.3.2、css( )元素样式
css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
2.3.3、设置元素的显示和隐藏
$(selector).show( );
$(selector).hide( );
演示案例：【仿京东左侧菜单】
2.4、Jquery代码风格
“$” 等同于 "Jquery"
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})
链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
$("h2").css("background-color","#ccffff").next().css("display","block");
隐式迭代
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});
三、DOM对象和jQuery对象
3.1、DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
3.2、DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$(“#title”).html( ); 等同于 document.getElementById("title").innerHTML;
注意！
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用。
3.3、DOM对象转jQuery对象
使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); ---DOM对象
var $txtName =$(txtName); ---Jquery对象
注意！
jQuery对象命名一般约定以$开头。
3.4、jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的方式得到相应的DOM对象
var $txtName =$ ("#txtName");
var txtName =$txtName[0];
通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName");
var txtName =$txtName.get(0);
四、Jquery选择器
jQuery选择器类似于CSS选择器，用来选取网页中的元素
jQuery选择器功能强大，种类也很多，分类如下:
- CSS选择器选取元素
- 基本选择器
- 层次选择器
- 属性选择器
- 过滤选择器选择元素
- 基本过滤选择器
- 可见性过滤选择器
4.1、CSS选择器选取元素
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
演示案例：【基本选择器】
层次选择器通过DOM 元素之间的层次关系来获取元素
演示案例：【层次选择器】
属性选择器通过HTML元素的属性来选择元素
演示案例：【属性选择器】
4.2、过滤选择器选择元素
过滤选择器: 就是通过特定的过滤规则来筛选出所需的元素
主要分类：
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
基本过滤选择器
演示案例：【基本过滤选择器】
可见性过滤选择器 :通过元素显示状态来选取元素
演示案例：【可见性过滤选择器】
五、Jquery事件
5.1、鼠标事件
5.2、表单事件
1、focus() 获得焦点,适用于所有元素
2、blur() 失去焦点，适用于所有元素
3、change() 当内容改变时触发 只适用于 input textarea select
4、select() 选中元素中的文本内容时触发 只适用于 input type="text" textarea
5、submit() 当用户试图提交表单时触发，只能绑定在form
六、Jquery操作DOM
6.1、样式操作
- css( )获取和设置样式
- addClass( )追加样式
- removeClass( )移除样式
6.2、内容操作
-
html( )代码操作（文本内容和html元素）
-
text( )内容操作(只关心文本内容)
-
val( )属性值操作
6.3、属性操作
-
attr( )获取和设置元素属性
-
removeAttr( )删除元素属性
七、表单验证
7.1、表单选择器
表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素
演示案例：【表单选择器】
表单属性过滤选择器
演示案例：【表单过滤选择器】
7.2、验证实例
使用String 对象验证邮箱
实现思路：
使用val( )方法获取文本框的值
使用indexOf() 来判断字符串是否包含“@”和“.”，并且保证@是在.之前的位置
使用方法submit( )提交表单
根据返回值是true还是false来决定是否提交表单
$(document).ready(function(){
$("form").submit(function(){
var mail = $("#myform :text").val();
if (mail=="") {//检测Email是否为空
alert("Email不能为空");
return false;
}
if (mail.indexOf("@") == -1) {
alert("Email格式不正确\n必须包含@");
return false;
}
if (mail.indexOf(".") == -1) {
alert("Email格式不正确\n必须包含.");
return false;
}
return true;
})
})
演示案例：【验证休闲网登录页面】
文本框内容的验证
需求：
1、密码必须要填写，并且保证密码长度至少是6位；
2、重复的密码和设置的密码要保持一致；
3、姓名必须要填写，并且不能包含数字；
实现思路:
使用String对象的length属性验证密码的长度
验证判断两次输入密码是否一致
使用length属性获取文本长度，再使用for循环和substring( )方法依次截断单个字符，最后判断每个字符是否是数字
var pwd = $("#pwd").val();
if (pwd == "") {
alert("密码不能为空");
return false;
}
if (pwd.length < 6) {
alert("密码必须等于或大于6个字符");
return false;
}
var repwd = $("#repwd").val();
if (pwd != repwd) {
alert("两次输入的密码不一致");
return false;
}
var user = $("#user").val();
if (user == "") {
alert("姓名不能为空");
return false;
}
"admin"
for (var i = 0; i < user.length; i++) {
var j = user.substring(i, i + 1);
if (isNaN(j) == false) {
alert("姓名中不能包含数字");
return false;
}
}
注意！
isNaN（参数）：判断参数是否是一个数字，返回的是一个boolean类型；
演示案例：【体闲网注册验证】
文本输入提示特效
实现思路
把错误信息显示在<span>中，然后使用html()方法，设置<span>和</span>之间的内容
编写脚本验证函数
鼠标失去焦点时（blur事件）调用验证函数
演示案例：【文本输入提示特效】
正则表达式验证邮政编码和手机号码
中国的邮政编码都是6位
手机号码都是11位，并且第1位都是1
var regCode=/^\d{6}$/;
var regMobile=/^1\d{10}$/;
演示案例：【验证邮编和手机号码】
验证年龄
对年龄进行验证，年龄必须在0－120之间
[0--9] \d
[10--99] [1-9] \d
[100-120]--- 不能全部按照三位数的格式来进行定义
[100-119] : 1[0-1]\d
120
0-9这个范围是一位，正则表达式为\d
10-99这个范围都是两位数，正则表达式为[1-9]\d
100-119这个范围是三位数，正则表达式为1[0-1]\d
所有年龄的个位都是0-9，当百位是1，十位是0-1，正则表达式为(1[0-1]|[1-9])?\d
年龄120是单独的一种情况，需要单独列出来
var reg = /^......$/;
reg.test(数据)
函数的结果是boolean类型： true（匹配成功） 、 false（匹配失败）。
注意！
在正则对象中有一个方法经常使用： reg.test(数据) ，检验数据是否匹配这个正则格式，返回的是boolean类型。
演示案例：【验证年龄】
八、Jquery实现Ajax
8.1、Jquery实现Ajax简介
jquery 库中已经封装了ajax请求的方法。
jquery.ajax([settings])。发请求并且能得知成功还是失败。
type:类型，"POST"或者"GET"，默认是"GET"。
url:发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。
success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。
8.2、实现Get请求
$(document).ready(function(){
$("#searchBtn").click(function(){
$.ajax({
type:"GET",
url:" https://api.passport.xxx.com/checkNickname?username="+mylogin.username+"&token="+mylogin.token+"&nickname="+nickname+"&format=jsonp&cb=?",
dataType:"json",
success:function(data){
//data就是从服务器端获取到的数据
},
error:function(jqXHR){
console.log("Error: "+jqXHR.status);
}
});
});
});
注意！
在实现get请求的过程中，进行参数的传递使用的是url地址后面进行附加形式。
8.3、实现Post请求
function dologin(qrid,username,token){
$.ajax({
url:"http://api.passport.pptv.com/v3/login/qrcode.do",
type:"post",
dataType:"jsonp",
data:{from:"clt",qrid:qrid,username:username,token:token},
success:function(data){
//data就是服务器端返回的数据信息
}
});
}
注意！
针对POST请求，我们是通过data属性以对象的形式来进行参数的传递。
8.4、总结
在使用Jquery实现Ajax请求的时候需要注意的地方：
1、针对get形式的请求，我们传递参数是在url地址后面进行附加；
2、针对post形式的请求，使用的是data以对象的形式进行传递；
3、dataType指定的是服务器端返回的结果的预期类型，如果非json格式，建议大家不写（智能匹配），如果是json格
式建议写上json格式的指定；
4、如果dataType指定的是json格式，那么直接在success函数中返回的就是一个json对象；
