# 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"
}
```
