# jQuery基础
jQuery是一个非常优秀的JavaScript框架
通用功能实现完毕,编写自己的特殊功能
jQuery特点:
* 支持CSS3技术
* 实现浏览器兼容性,跨域浏览器. 从2.0版本开始,不在支持IE678
* 代码越小越少,功能越多越好
* AJAX异步请求
## 基础语法
```javascript
<script type="text/javascript">
/**
* 使用jQuery框架
* 先调用核心函数: jQuery()
* 核心函数的参数,传递自己编写匿名函数
* 会在页面加载完成后调用匿名函数
* 核心函数名字可以简写为$
*/
$( function(){
alert("jquery");
});
/*window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}*/
</script>
```
## DOM对象和jQuery对象
### DOM对象
document对象获取的页面元素,称为DOM对象, document.getElementById()
### jQuery对象
使用jQuery方式获取的页面元素,称为jQuery对象, $("#id")
注意: DOM对象和jQuery对象不通用的
```javascript
function fn(){
//dom方式,获取文本框输入的内容
var user = document.getElementById("user");
alert(user.value);
//jQuery方式,获取文本框输入的内容
var $user = $("#user");
alert( $user.val() );
}
```
### DOM对象和jQuery对象互转
```javascript
<script type="text/javascript">
function fn(){
//dom方式,获取文本框输入的内容
var user = document.getElementById("user");
//alert(user.value);
//jQuery方式,获取文本框输入的内容
var $user = $("#user");
//alert( $user.val() );
//DOM对象转成jQuery对象,穿马甲
//alert( $(user).val() )
//jQuery对象转成DOM对象,脱马甲
//jQuery对象本质上是个数组,数组存储的元素是DOM对象
alert ( $user[0].value );
}
</script>
```
## jQuery选择器
选择器作用: 快速的精准的定位到页码中的html元素
和css选择器一致的
### 基本选择器
* **元素选择器 $("标签名")**
* **id选择器 $("#id属性值")**
* **class选择器 $(".class属性值")**
```javascript
<script type="text/javascript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
//jQuery对象调用函数(事件函数)
$("#b1").click( function(){
//css函数,操作样式表,CSS的属性和属性值
$("#one").css("background-color","red");
});
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div").css("background-color","red");
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$(".mini").css("background-color","red");
});
// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function(){
/* $("span").css("background-color","red");
$("#two").css("background-color","red");*/
$("#two ,span").css("background-color","red");
});
</script>
```
### 层次选择器
* **$("A B")获取A元素的所有后代B元素**
* $("A>B")获取A元素的所有后代子元素B
* $("A+B")获取A元素的同级的后面的下一个B元素
* $("A~B")获取A元素的同级后面的所有B元素
```javascript
<script type="text/javascript">
//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function(){
$("body div").css("background-color","red");
})
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("body>div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("#two~div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色" id="b5"/>
$("#b5").click(function(){
/**
* id="two" 所有的兄弟元素
* 即有哥哥,也有弟弟
*/
$("#two").siblings("div").css("background-color","red");
});
</script>
```
### 属性选择器
* **获得有属性名的元素：$("A[属性名]")**
* **获得属性名 等于 值 元素：$("A[属性名=值]")**
* 获得属性名 不等于 值 元素：$("A[属性名!=值]")
* 获得属性名 以 值 9开头 元素：$("A[属性名^=值]")
* 获得属性名 以 值 结尾 元素：$("A[属性名$=值]")
* 获得属性名 含有 值 元素：$("A[属性名*=值]")
* **复合属性选择器，多个属性同时过滤：$("A[属性名!=值][属性名!=值][属性名!=值]")
```javascript
<script type="text/javascript">
//<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function(){
//属性选择器,选择带有title
$("div[title]").css("background-color","red");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function(){
//获取属性值是test的元素
$("div[title=test]").css("background-color","red");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function(){
//属性值不等于test
$("div[title!=test]").css("background-color","red");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function(){
//属性值以te开始的
$("div[title^=te]").css("background-color","red");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function(){
//属性值是est结束的
$("div[title$=est]").css("background-color","red");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function(){
//属性值含有es的
$("div[title*=es]").css("background-color","red");
});
// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function(){
$("div[id][title*=es]").css("background-color","red");
});
</script>
```
### 过滤选择器
* 获得选择的元素中的第一个元素： :first
* 获得选择的元素中的最后一个元素： :last
* 不包括指定内容的元素例如： :not(selecter)
* **偶数，从 0 开始计数： :even**
* **奇数，从 0 开始技术： :odd**
* 指定第几个： :eq(index)
* 大于n个： :gt(index)
* 小于n个： :lt(index)
* 获得标题 （<h1> /<h2> ....） :header --- 固定写法
* 获得动画的 :animated ---固定写法 正在执行的动画
```javascript
<script type="text/javascript">
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","red");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function(){
//所有标题,特指的h1-h6标签 选择器 :header
$(":header").css("background-color","red");
});
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色" id="b10"/>
$("#b10").click(function(){
//选择正在执行动画的,选择器 animated
$(":animated").css("background-color","red");
});
function abc(){
$("#mover").slideUp(3000);
}
abc();
</script>
```
### 表单选择器
* 可用： :enabled
* 不可用： :disabled
* **选中（单选radio ，多选checkbox）： :checked**
* **选择（下列列表 <select>）： :selected**
```javascript
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//获取多个input标签属性值是 enabled, type属性值是text 返回数组
var inputs = $("input[type=text]:enabled");
for(var i=0;i<inputs.length;i++){
//jQuery对象就是个数组,遍历出来,数组的元素是DOM对象
alert ( $(inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//获取多个input标签属性值是disabled,返回数组
var inputs = $("input[type=text]:disabled");
for(var i=0;i<inputs.length;i++){
$(inputs[i]).val("修改后的");
}
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
var inputs = $("input:checked");
alert(inputs.length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
/*
* html()==DOM对象的innerHTML
* text()==DOM对象的innerText
*/
$("#b4").click(function(){
var inputs = $("option:selected");
for(var i=0;i<inputs.length;i++){
alert( $(inputs[i]).text());
}
});
</script>
```
## jQuery的DOM操作
jQuery函数的特点:
函数支持方法的调用链,链式编程
函数支持多种调用方式, css(属性名,属性值)赋值, css(属性名)取值\
### DOM操作一
```javascript
<script type="text/javascript">
//页面加载完成
$(function(){
//获取张三
//dom对象获取值,value属性, jQuery获取值val()函数
//alert( $("#myinput").val());
//获取标题文本
//dom对象使用属性innerText,jQuery使用的是text()函数
alert( $("#mydiv").text() );
//获取mydiv的后的所有内容
//dom对象使用属性innerHTML,jQuery使用的是html()函数
alert( $("#mydiv").html() );
});
</script>
```
### DOM操作二
```javascript
<script type="text/javascript">
/**
* 属性操作:
* DOM对象函数 setAttribute,getAttribute
* jQuery中函数 attr(属性名,属性值) attr(属性名)
*/
//获取北京节点的name属性值
//alert( $("#bj").attr("name") );
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
alert( $("#hobby").prop("checked"));
/**
* jQuery新增函数
* prop property
* prop函数适用于,固有属性:
* checked=checked selected=selected
*
* attr函数适用于其他的属性
*/
</script>
```
### DOM操作三
```javascript
<script type="text/javascript">
//<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass("second");
});
//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
$("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function(){
alert( $("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function(){
$("#one").css("background-color","green");
});
</script>
```
### DOM操作四
```javascript
<script type="text/javascript">
/**将反恐放置到city的后面*/
//$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
</script>
```
### DOM操作五
```javascript
<script type="text/javascript">
//删除<li id="bj" name="beijing">北京</li>
/**
* DOM中,删除节点,需要父节点删除子节点(浏览器支持)
* jQuery支持自杀
*/
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
//测试(id='city')并没有被删除
$("#city").empty()
</script>
```
## 隔行变色案例
```javascript
<script type="text/javascript">
$(function(){
/**
* 偶数行背景色: even
* 奇数行背景色: odd
*/
$("tr:gt(1):even").css("background-color","blanchedalmond");
$("tr:gt(1):odd").css("background-color","brown");
});
</script>
```
### 全选和全不选
```javascript
<script type="text/javascript">
/**
* 点击事件实现功能
* 全选和全不选:
* 所有的分选框的属性 checked = 总选框的属性checked
* checked属于固有属性,函数prop
*/
function selectAll(){
//获取总选框
//var zong = $("#zong").prop("checked");
//获取分选框
$(".itemSelect").prop("checked",$("#zong").prop("checked") );
}
</script>
```
### 定时广告
```javascript
<script type="text/javascript">
/**
* 页面打开后3秒,显示广告
* 动画效果,观看3秒中
*/
$(function(){
setTimeout(function(){
$("#guanggao").slideDown(3000);
},3000);
setTimeout(function(){
$("#guanggao").slideUp(3000);
},9000);
});
</script>
```
# jQuery高级
## jQuery遍历
### 传统遍历
```javascript
<script type="text/javascript">
/**
* 传统形式遍历
*/
window.onload = function(){
//dom对象获取所有的标签option
var options = document.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
alert(options[i].innerHTML);
}
}
</script>
```
### jQuery对象遍历
jQuery对象调用函数each
$("").each( 自己定义的函数 回调函数 )
回调函数 : 函数是自己定义的,但不是自己调用
```javascript
<script type="text/javascript">
$(function(){
//jQuery方式获取option标签
var $option = $("option");
//jQuery对象调用函数each
/**
* 匿名函数,回调函数
* each函数调用
* 参数: 索引, 遍历到的元素
* each遍历数组,遍历一次调用一次匿名函数
*/
$option.each(function(index,element){
//alert(index+"==="+element);
//jQuery对象本质数组,遍历的元素DOM对象
alert( $(element).html() );
});
});
</script>
```
### jQuery全局函数each遍历
jQuery框架定义函数,each
不需要jQuery对象调用, $调用的
$.each()
```javascript
<script type="text/javascript">
$(function(){
//jQuery方式获取option标签
var $option = $("option");
var options = document.getElementsByTagName("option");
//jQuery符号$直接调用全局函数each
/**
* 全局函数each的参数
* 被遍历的对象
* 回调函数,传递索引和元素
* 好处: 遍历的容器可以是jQuery对象,也可以是DOM对象
*/
$.each(options, function(index,element) {
alert( $(element).html());
});
});
</script>
```
## jQuery的事件
jQuery绑定事件,事件名字没有on
常用事件:
* click 点击事件
* blur 失去焦点
* change 内容改变
* keyup 键盘弹起
* mouseover 鼠标悬停
* mouseout 鼠标离开
### DOM对象绑定事件
```javascript
<script type="text/javascript">
window.onload = function(){
//获取按钮
var btn = document.getElementById("btn");
//DOM对象的事件属性
btn.onclick = function(){
alert("按钮被点击");
}
}
</script>
```
### jQuery对象绑定事件
jQuery对象中函数,实现对一个事件源同时绑定多个事件
bind函数,实现绑定事件
```javascript
<script type="text/javascript">
$(function(){
//获取按钮,jQuery对象调用函数 bind
/*$("#btn").bind("click",function(){
alert("按钮被点击");
});*/
/*
* 函数bind同时绑定多个事件
* bind( {
* "事件类型":function(){},
* "事件类型":function(){}
* } );
*/
$("#btn").bind({
"click":function(){
alert("绑定点击事件");
},
"mouseover":function(){
alert("绑定鼠标悬停事件");
}
});
});
</script>
```
### jQuery解绑事件
jQuery对象的函数 unbind
```javascript
<script type="text/javascript">
$(function(){
$("#btn").bind({
"click":function(){alert("点击事件")},
"mouseover":function(){alert("鼠标悬停")}
});
$("#unbtn").click(function(){
//解除按钮btn的事件绑定
//unbind()什么参数不传递,解除所有事件
//$("#btn").unbind();
//解除点击事件
//$("#btn").unbind("click");
//解除多个事件
$("#btn").unbind("click mouseover");
})
});
</script>
```
## 省市联动案例
```javascript
<script type="text/javascript">
function selectCity(value){
/**
* value是传递的标签option的value的属性值
* 作为索引使用,到二维数组中,找出对应市
* 遍历一维数组
* 追加到标签 select中
*/
var citys = [
["海淀","昌平","朝阳"],["长春","吉林","延边"],["南京","徐州","苏州"]
];
var city = citys[value];
//获取市区标签
var cityId = $("#cityId");
//拼接字符串的操作
var s = "<option >----请-选-择-市----</option>";
//jQuery全局函数each遍历
$.each(city, function(index,element) {
s+="<option >" +element+ "</option>";
});
//字符串放在标签
cityId.html(s);
}
</script>
```
## 左右互选案例
```javascript
<script type="text/javascript">
$(function(){
//左向右移动,被选中的,按钮绑定事件
$("#add").click(function(){
//获取选中的,层次选择器,后代子标签
$("#second").append($("#first option:selected"));
});
//左向右移动,全部,按钮绑定事件
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
//右向做移动,选择的
$("#remove").click(function(){
$("#first").append($("#second option:selected"));
});
//右向左移动,全部的
$("#remove_all").click(function(){
$("#first").append($("#second option"));
});
});
</script>
```
## validate表单验证插件
插件:
基于一个功能开发的另一个功能,插件
validate基于jQuery开发的一个功能,表单验证功能
对原有的jQuery功能进行扩展,插件不能独立使用
### 表单验证案例
```javascript
<script type="text/javascript">
$(function(){
$("#empForm").validate({
//表单验证的规则
rules:{
//真实姓名,必须填写
realname:"required",
//登录名,必须填写,长度5-8
username:{
required:true,
rangelength:[5,8]
},
//密码规则,必须填写,长度6-12
psw:{
required:true,
rangelength:[6,12]
},
//确认密码,必须填写,和密码一致
psw2:{
required:true,
equalTo:"#psw"
},
//性别规则,必须选择一个
gender:"required",
//年龄规则,必须填写,范围26-50之间
age:{
required:true,
range:[26,50]
},
//学历规则,必须选一个
edu:"required",
//生日规则,必须填写,格式正确,合法
birthday:{
required:true,
dateISO:true,
date:true
},
//爱好规则,必须选一个
checkbox1:"required",
//邮箱规则,必须填写,符号邮件地址规则
email:{
required:true,
email:true
}
},
//验证消息
messages:{
//真实姓名消息
realname:"请填写真实姓名",
//登录名消息
username:{
required:"必须填写登录名",
rangelength:"用户名长度必须5-8位"
},
//密码消息
psw:{
required:"必须填写密码",
rangelength:"密码长度必须6-12位"
},
//确认密码消息
psw2:{
required:"必须填写密码",
equalTo:"两次密码不一致"
},
//姓名消息
gender:"必须选",
//年龄消息
age:{
required:"必须填写年龄",
range:"年龄必须在26-50之间"
},
//学历消息
edu:"请选择一个学历",
//生日消息
birthday:{
required:"必须填写生日",
dateISO:"日期格式不正确",
date:"日期不存在"
},
//爱好消息
checkbox1:"请选择一个爱好",
//邮箱消息
email:{
required:"必须填写邮箱",
email:"邮箱格式不正确"
}
}
});
});
</script>
```
### 自定义验证规则
标准语法规则, jQuery选择符号$调用插件属性validator
属性调用插件函数 addMethod()
参数:
* 规则名
* 回调函数
```javascript
<script type="text/javascript">
/*
* 匿名函数中具有三个参数
* value : 文本框输入的值
* element : 文本框标签对象
* param : 规则后面的参数 range:[5,10]
*/
//自定义身份证号的15位规则
$.validator.addMethod("cart15",function(value,element,param){
//文本框输入的值 value判断
if(value.length==18)
return true;
//定义15位规则,全数字
var reg=/^[0-9]{15}$/;
return reg.test(value);
});
//自定义身份证号的是18位规则
$.validator.addMethod("cart18",function(value,element,param){
if(value.length==15)
return true;
//定义18位规则,前17个数字,最后一位可以是数字,可以是X
var reg = /^[0-9]{17}[0-9X]{1}$/;
return reg.test(value);
});
//自定义身份证的长度规则
$.validator.addMethod("cartlength",function(value,element,param){
if(value.length == 15 || value.length==18)
return true;
return false;
});
```
```javascript
//身份证号规则
cart:{
required:"必须填写身份证号",
cartlength:"身份证号码长度只能是15或18位",
cart15:"15位格式全数字",
cart18:"18位格式全数字,最后一位可以是X"
}
```
