jQuery
Query是目前使用最廣泛的javascript函數(shù)庫(kù)弃秆。據(jù)統(tǒng)計(jì)次企，全世界排名前100萬(wàn)的網(wǎng)站虽画，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過(guò)其他庫(kù)贩据。微軟公司甚至把jQuery作為他們的官方庫(kù)栋操。
jQuery的版本分為1.x系列和2.x、3.x系列饱亮，1.x系列兼容低版本的瀏覽器矾芙，2.x、3.x系列放棄支持低版本瀏覽器近上，目前使用最多的是1.x系列的剔宪。
jquery是一個(gè)函數(shù)庫(kù)，一個(gè)js文件壹无，頁(yè)面用script標(biāo)簽引入這個(gè)js文件就可以使用葱绒。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
JQ入口函數(shù)
將獲取元素的語(yǔ)句寫(xiě)到頁(yè)面頭部，會(huì)因?yàn)樵剡€沒(méi)有加載而出錯(cuò)格遭，jquery提供了ready方法解決這個(gè)問(wèn)題哈街，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
可以簡(jiǎn)寫(xiě)為：
<script type="text/javascript">
$(function(){
......
});
</script>
JQ選擇器
jquery選擇器可以快速地選擇元素拒迅，選擇規(guī)則和css樣式相同骚秦，使用length屬性判斷是否選擇成功她倘。
$('#myId') //選擇id為myId的網(wǎng)頁(yè)元素
$('.myClass') // 選擇class為myClass的元素
$('li') //選擇所有的li元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
$('input[name=first]') // 選擇name屬性等于first的input元素
對(duì)選擇集進(jìn)行過(guò)濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').eq(5); //選擇第6個(gè)div元素
選擇集進(jìn)行轉(zhuǎn)移
$('#box').prev(); //選擇id是box的元素前面緊挨的同輩元素
$('#box').prevAll(); //選擇id是box的元素之前所有的同輩元素
$('#box').next(); //選擇id是box的元素后面緊挨的同輩元素
$('#box').nextAll(); //選擇id是box的元素后面所有的同輩元素
$('#box').parent(); //選擇id是box的元素的父元素
$('#box').children(); //選擇id是box的元素的所有子元素
$('#box').siblings(); //選擇id是box的元素的同級(jí)元素
$('#box').find('.myClass'); //選擇id是box的元素內(nèi)的class等于myClass的元素
判斷是否選擇到了元素
jquery有容錯(cuò)機(jī)制，即使沒(méi)有找到元素作箍，也不會(huì)出錯(cuò)硬梁，可以用length屬性來(lái)判斷是否找到了元素,length等于0，就是沒(méi)選擇到元素胞得，length大于0荧止，就是選擇到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個(gè)div</div>
JQ樣式操作
操作行間樣式
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設(shè)置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"})
操作樣式類(lèi)名
$("#div1").addClass("divClass2") //為id為div1的對(duì)象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id為div1的對(duì)象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個(gè)樣式
$("#div1").toggleClass("anotherClass") //重復(fù)切換anotherClass樣式
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<input type="button" value="按鈕" />
<input type="button" value="按鈕" />
<input type="button" value="按鈕" />
<input type="button" value="按鈕" />
</body>
<script>
$('input').click(function() {
// this 當(dāng)前的事件源 點(diǎn)擊那個(gè)選擇那個(gè)
$(this).css({
'background': 'pink'
})
// 返回當(dāng)前點(diǎn)擊的索引值
alert($(this).index())
})
</script>
</html>
排他思想
<!--<!DOCTYPE html>-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
span {
width: 100px;
height: 100px;
background: #ccc;
font-size: 50px;
text-align: center;
margin: 50px;
display: inline-block;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>
<script>
// 排他思想 當(dāng)前變化阶剑，其余恢復(fù)原形
$('span').click(function() {
// 自己高亮
$(this).css({
'background': 'pink'
})
// 其余恢復(fù)原狀
$(this).siblings().css({
'background': '#ccc'
})
})
</script>
</html>
JQ動(dòng)畫(huà)
通過(guò)animate方法可以設(shè)置元素某屬性值上的動(dòng)畫(huà)跃巡，可以設(shè)置一個(gè)或多個(gè)屬性值，動(dòng)畫(huà)執(zhí)行完成后會(huì)執(zhí)行一個(gè)函數(shù)牧愁。
animate參數(shù)：
參數(shù)一：要改變的樣式屬性值素邪，寫(xiě)成字典的形式
參數(shù)二：動(dòng)畫(huà)持續(xù)的時(shí)間，單位為毫秒猪半，一般不寫(xiě)單位
參數(shù)三：動(dòng)畫(huà)曲線(xiàn)兔朦，默認(rèn)為‘swing’，緩沖運(yùn)動(dòng)磨确，還可以設(shè)置為‘linear’沽甥，勻速運(yùn)動(dòng)
參數(shù)四：動(dòng)畫(huà)回調(diào)函數(shù)，動(dòng)畫(huà)完成后執(zhí)行的匿名函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<input type="button" value="變形" />
<div></div>
</body>
<script>
$('input').click(function() {
$('div').animate({
'width': '500px',
'height': '500px'
}, 2000, 'linear',function(){
// 回調(diào)函數(shù)乏奥，當(dāng)動(dòng)畫(huà)執(zhí)行完之后摆舟，會(huì)調(diào)用這里的程序
alert('執(zhí)行完畢')
})
})
</script>
</html>
JQ特殊效果
顯示隱藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<input type="button" value='隱藏' />
<input type="button" value='顯示隱藏' />
<input type="button" value='顯示隱藏切換' />
<hr />
<img src="img/tim4.jpg" />
</body>
<script>
//隱藏
$('input').eq(0).click(function() {
$('img').hide(500)
})
//顯示
$('input').eq(1).click(function() {
$('img').show(500)
})
// 顯示隱藏切換
$('input').eq(2).click(function() {
$('img').toggle(500)
})
</script>
</html>
淡入淡出切換
<script>
//淡入
$('input').eq(0).click(function() {
$('img').fadeOut(2000)
})
//淡出
$('input').eq(1).click(function() {
$('img').fadeIn(2000)
})
// 顯示隱藏切換
$('input').eq(2).click(function() {
$('img').fadeToggle(2000)
})
</script>
卷起動(dòng)畫(huà)
需要設(shè)置寬高
<script>
//向上卷起
$('input').eq(0).click(function() {
$('img').slideUp(2000)
})
//向下拉伸
$('input').eq(1).click(function() {
$('img').slideDown(2000)
})
// 切換
$('input').eq(2).click(function() {
//stop():停止排隊(duì)機(jī)制
$('img').stop().slideToggle(2000)
})
</script>
JQ屬性設(shè)置
1、html() 取出或設(shè)置html內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<h1>文字</h1>
</body>
<script>
// 獲取HTML內(nèi)容
alert($('h1').html())
// 設(shè)置html內(nèi)容
$('h1').html('我是JQ生成的')
</script>
</html>
??2英融、prop() 取出或設(shè)置某個(gè)屬性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- title='' 提示信息-->
<a href="#" title="百度很好">百度</a>
<input type="text" value="文字" />
</body>
<script>
// 設(shè)置屬性
$('a').prop({
'href': 'http://www.baidu.com',
'title': '谷歌表示不服'
})
// 獲取屬性
alert($('a').prop('href'))
// 獲取value的值
alert($('input').val())
</script>
</html>
焦點(diǎn)事件
獲取盏檐、失去焦點(diǎn)事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
input {
/*去掉輪廓線(xiàn)*/
outline: none;
}
</style>
</head>
<body>
<input type="text" />
</body>
<script>
// 自動(dòng)觸發(fā)焦點(diǎn)事件
$('input').focus()
// 獲得焦點(diǎn)事件
$('input').focus(function() {
// 當(dāng)點(diǎn)擊文本框后歇式，文本框形狀改變
$(this).css({
'border': '4px solid pink'
})
})
//失去焦點(diǎn)事件
$('input').blur(function() {
// 當(dāng)點(diǎn)擊文本框以外的地方后驶悟，文本框形狀改變
$(this).css({
'border': '1px solid #ccc'
})
})
</script>
</html>
移入、移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<input type="button" value="按鈕" />
</body>
<script>
// 移入
$('input').mouseenter(function() {
alert('移入')
})
// 移出
$('input').mouseleave(function() {
alert('移出')
})
// 移入移出簡(jiǎn)寫(xiě)
$('input').hover(function() {
alert('移入')
}, function() {
alert('移出')
})
</script>
</html>
總結(jié)
blur() 元素失去焦點(diǎn)
focus() 元素獲得焦點(diǎn)
click() 鼠標(biāo)單擊
mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）
mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)）
mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)）
mouseleave() 鼠標(biāo)離開(kāi)（離開(kāi)子元素不觸發(fā)）
hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)
ready() DOM加載完成
submit() 用戶(hù)遞交表單
正則
1材失、什么是正則表達(dá)式：
能讓計(jì)算機(jī)讀懂的字符串匹配規(guī)則痕鳍。
2、正則表達(dá)式的寫(xiě)法：
var re=new RegExp('規(guī)則', '可選參數(shù)');
var re=/規(guī)則/參數(shù);
3龙巨、規(guī)則中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a(chǎn)’笼呆，/a,b/ 匹配字符 ‘a(chǎn),b’
2）轉(zhuǎn)義字符匹配：
\d 匹配一個(gè)數(shù)字，即0-9
\D 匹配一個(gè)非數(shù)字旨别，即除了0-9
\w 匹配一個(gè)單詞字符（字母诗赌、數(shù)字、下劃線(xiàn)）
\W 匹配任何非單詞字符秸弛。等價(jià)于[^A-Za-z0-9_]
\s 匹配一個(gè)空白符
\S 匹配一個(gè)非空白符
\b 匹配單詞邊界
\B 匹配非單詞邊界
. 匹配一個(gè)任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配純數(shù)字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false
4铭若、量詞：對(duì)左邊的匹配字符定義個(gè)數(shù)
? 出現(xiàn)零次或一次（最多出現(xiàn)一次）
- 出現(xiàn)一次或多次（至少出現(xiàn)一次）
- 出現(xiàn)零次或多次（任意次）
{n} 出現(xiàn)n次
{n,m} 出現(xiàn)n到m次
{n,} 至少出現(xiàn)n次
5洪碳、任意一個(gè)或者范圍
[abc123] : 匹配‘a(chǎn)bc123’中的任意一個(gè)字符
[a-z0-9] : 匹配a到z或者0到9中的任意一個(gè)字符
6、限制開(kāi)頭結(jié)尾
^ 以緊挨的元素開(kāi)頭
$ 以緊挨的元素結(jié)尾
7叼屠、修飾參數(shù)：
g： global瞳腌，全文搜索，默認(rèn)搜索到第一個(gè)結(jié)果接停止
i： ingore case镜雨，忽略大小寫(xiě)嫂侍，默認(rèn)大小寫(xiě)敏感
8、常用函數(shù)
test
用法：正則.test(字符串) 匹配成功荚坞，就返回真挑宠，否則就返回假
正則默認(rèn)規(guī)則
匹配成功就結(jié)束，不會(huì)繼續(xù)匹配颓影，區(qū)分大小寫(xiě)
常用正則規(guī)則
//用戶(hù)名驗(yàn)證：(數(shù)字字母或下劃線(xiàn)6到20位)
var reUser = /^\w{6,20}$/;
//郵箱驗(yàn)證：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密碼驗(yàn)證：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手機(jī)號(hào)碼驗(yàn)證：
var rePhone = /^1[34578]\d{9}$/;
事件冒泡
什么是事件冒泡
在一個(gè)對(duì)象上觸發(fā)某類(lèi)事件（比如單擊onclick事件）痹栖，如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序瞭空，如果沒(méi)有定義此事件處理程序或者事件返回true揪阿，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外咆畏，直至它被處理（父級(jí)對(duì)象所有同類(lèi)事件都將被激活）南捂，或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）旧找。
事件冒泡的作用
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上溺健，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件钮蛛。
阻止事件冒泡
事件冒泡機(jī)制有時(shí)候是不需要的鞭缭，需要阻止掉，通過(guò) event.stopPropagation() 來(lái)阻止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
.grandfather {
width: 400px;
height: 400px;
background: pink;
}
.father {
width: 300px;
height: 300px;
background: green;
}
.son {
width: 150px;
height: 150px;
background: purple;
position: absolute;
top: 420px;
left: 0px;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
</div>
</body>
<script>
// 事件冒泡 當(dāng)子集和長(zhǎng)輩都寫(xiě)了觸發(fā)事件魏颓，點(diǎn)擊子集后岭辣，長(zhǎng)輩也會(huì)觸發(fā)
$('.grandfather').click(function() {
alert('grandfather')
})
$('.father').click(function() {
alert('father')
// 阻止表單提交 阻止事件冒泡
return false
})
$('.son').click(function() {
alert('son')
return false
})
</script>
</html>
Dom操作
Dom操作也叫做元素節(jié)點(diǎn)操作，它指的是改變html的標(biāo)簽結(jié)構(gòu)甸饱，它有兩種情況：
1沦童、移動(dòng)現(xiàn)有標(biāo)簽的位置
2、將新創(chuàng)建的標(biāo)簽插入到現(xiàn)有的標(biāo)簽中
1叹话、創(chuàng)建新標(biāo)簽
var $div = $('<div>'); //創(chuàng)建一個(gè)空的div
var $div2 = $('<div>這是一個(gè)div元素</div>');
2偷遗、移動(dòng)或者插入標(biāo)簽的方法
1)、append()和appendTo()：在現(xiàn)存元素的內(nèi)部驼壶，從后面放入元素
<body>
<ul>
<li>默認(rèn)的0</li>
<li>默認(rèn)的1</li>
<li>默認(rèn)的2</li>
<li>默認(rèn)的3</li>
</ul>
</body>
<script>
// 創(chuàng)建一個(gè)節(jié)點(diǎn) （創(chuàng)建一個(gè)標(biāo)簽）
var oLi = '<li>JQ生成的</li>'
// $('ul').html($('ul').html()+oLi)
//在元素內(nèi)部最后追加數(shù)據(jù)
$('ul').append(oLi)
</script>
2)氏豌、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面放入元素
3)热凹、after()和insertAfter()：在現(xiàn)存元素的外部泵喘，從后面放入元素
4)瞭吃、before()和insertBefore()：在現(xiàn)存元素的外部，從前面放入元素
3涣旨、刪除標(biāo)簽
$('#div1').remove();
事件委托委托
事件委托就是利用冒泡的原理歪架，把事件加到父級(jí)上，通過(guò)判斷事件來(lái)源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)矫俺，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作攒霹。
一般綁定事件的寫(xiě)法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托寫(xiě)法
$(function(){
// 事件委托寫(xiě)法
// $(點(diǎn)擊元素的父集).delegate('需要點(diǎn)擊的元素','執(zhí)行的事件',function(){
// 執(zhí)行的程序 })
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
JQuery數(shù)據(jù)交互
JavaScript對(duì)象
javascript中的對(duì)象，可以理解成是一個(gè)鍵值對(duì)的集合浆洗，鍵是調(diào)用每個(gè)值的名稱(chēng)催束，值可以是基本變量，還可以是函數(shù)和對(duì)象伏社。
創(chuàng)建javascript對(duì)象有兩種方法：
一種是通過(guò)頂級(jí)Object類(lèi)來(lái)實(shí)例化一個(gè)對(duì)象抠刺，然后在對(duì)象上面添加屬性和方法：
var person = new Object();
// 添加屬性：
person.name = 'tom';
person.age = '25';
// 添加方法：
person.sayName = function(){
alert(this.name);
}
// 調(diào)用屬性和方法：
alert(person.age);
person.sayName();
一種是通過(guò)對(duì)象直接量的方式創(chuàng)建對(duì)象：
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 調(diào)用屬性和方法：
alert(person2.age);
person2.sayName();
json
json是 JavaScript Object Notation 的首字母縮寫(xiě)，單詞的意思是javascript對(duì)象表示法摘昌，這里說(shuō)的json指的是類(lèi)似于javascript對(duì)象的一種數(shù)據(jù)格式對(duì)象速妖，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的xml數(shù)據(jù)格式聪黎。
json數(shù)據(jù)對(duì)象類(lèi)似于JavaScript中的對(duì)象罕容，但是它的鍵對(duì)應(yīng)的值里面是沒(méi)有函數(shù)方法的，值可以是普通變量稿饰，不支持undefined锦秒，值還可以是數(shù)組或者json對(duì)象。
與JavaScript對(duì)象寫(xiě)法不同的是喉镰，json對(duì)象的屬性名稱(chēng)和字符串值需要用雙引號(hào)引起來(lái)旅择，用單引號(hào)或者不用引號(hào)會(huì)導(dǎo)致讀取數(shù)據(jù)錯(cuò)誤。
json格式的數(shù)據(jù)：
{
"name":"tom",
"age":18
}
json的另外一個(gè)數(shù)據(jù)格式是數(shù)組梧喷，和javascript中的數(shù)組字面量相同:
["tom",18,"programmer"]
還可以是更復(fù)雜的數(shù)據(jù)機(jī)構(gòu)：
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":'North Andover, MA'
}
}
ajax
ajax一個(gè)前后臺(tái)配合的技術(shù)砌左，它可以讓javascript發(fā)送http請(qǐng)求，與后臺(tái)通信铺敌，獲取數(shù)據(jù)和信息。ajax技術(shù)的原理是實(shí)例化xmlhttp對(duì)象屁擅，使用此對(duì)象與后臺(tái)通信偿凭。jquery將它封裝成了一個(gè)函數(shù)$.ajax()，我們可以直接用這個(gè)函數(shù)來(lái)執(zhí)行ajax請(qǐng)求派歌。
ajax需要在服務(wù)器環(huán)境下運(yùn)行弯囊。
$.ajax使用方法
常用參數(shù)：
1痰哨、url 請(qǐng)求地址
2、type 請(qǐng)求方式匾嘱，默認(rèn)是'GET'斤斧，常用的還有'POST'
3、dataType 設(shè)置返回的數(shù)據(jù)格式霎烙，常用的是'json'格式撬讽，也可以設(shè)置為'html'
4、data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)
5悬垃、success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
6游昼、error 設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)
7、async 設(shè)置是否異步尝蠕，默認(rèn)值是'true'烘豌，表示異步
以前寫(xiě)法：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服務(wù)器超時(shí)，請(qǐng)重試看彼！');
}
});
推薦寫(xiě)法：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服務(wù)器超時(shí)廊佩，請(qǐng)重試！');
});
簡(jiǎn)寫(xiě)：
$.ajax按照請(qǐng)求方式可以簡(jiǎn)寫(xiě)成$.get或者$.post方式
$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
