簡介
jQuery是一款優秀的javaScript庫.jQuery已經集成了JavaScript、CSS、DOM和Ajax于一體的強大功能。它可以用最少的代碼, 完成更多復雜而困難的功能：
jQuery的主旨:write less, do more. 寫的更少, 干的更多。以更少的代碼,實現更多的功能
John Resig 2006年8月發布jQuery (22歲)
JQ特點
1、輕量級 2、強大的選擇器 3、出色的dom封裝 4、可靠的事件處理 5、瀏覽器兼容性強、
6、鏈式操作方式 (相同的對象直接進行操作 通過.) 7、隱式迭代（for循環）
jQuery代碼風格
在jQuery程序中,不管是頁面元素的選擇、內置的功能函數,都是美元符號“$”來起 始的。而這個“$”就是jQuery當中最重要且獨有的對象:jQuery對象
jQuery與javaScript加載模式對比
js window.onload必須等頁面全部加載（圖片，連接等）完，才能執行js代碼
jq $(document).ready()只需要等待網頁中的DOM結構 加載完畢,就能執行包裹的代碼 簡寫$(function () {});
為了解決沖突 var jq = $.noConflict(); jq(function () { alert(1); });
便不會因為$被替換沖突
jQ與js之間的轉化
var box_js = document.getElementById('box');
$(box_js).html()；jQ方法
box_js.innerHTML)： js方法
js—jQ $('#box')[0].innerHTML 或者 $('#box').get(0).innerHTML = box_js.innerHTML
jQ--js $(box_js)
操作css
$('#box').css({
width:100,
height:200,
background:'red'
}).css('height',100).css('background','red')鏈式操作;
操作類名
$('.box').addClass('red fs50'); 添加類名（class=red, class=fs50）
$('.box').removeClass('red fs50'); 移除class屬性
$('.box').toggleClass('red fs50'); 切換class屬性 前面兩個相互轉化
操作標簽內容
$('#box').text('<h1>我是一個大標題</h1>'); 原樣輸出 h1不會解析
$('#box').html('<h1>我是一個大標題</h1>'); 會解析內部的html標簽
基礎選擇器；
$('#box') id選擇器
$('box').css() class選擇器
$('p').css() 標簽選擇器
$('h1，p') 多個標簽選擇器（并集）
屬性選擇器
$('a[href]') 獲取所有具有href的標簽
$('a[href = "www.baidu.com"]')； 獲取href ='www.baidu.com'd的元素
$('a[href != "www.baidu.com"]')；獲取href =不是'www.baidu.com'd的元素
$('a[href^="www"]')；獲取屬性值以www開頭的對象
$('a[href$="cn"]')；獲取屬性值以cn結尾的對象
$('a[href*="520"]')；獲取屬性值包涵520的對象
$('a[href*="www"][title*="是"]')；獲取屬性值包涵www的對象并且title包含"是"的對象
篩選選擇器
$('li:first')；$('li:not(:eq(0))')==$('li:not(:first)')
$('li:last')； $('li:not(:last)')
$('li:even') 所有基數
$('li:odd') 所有偶數
$('li:gt(4)')； $('li:lt(4)'); $('li:eq(4)')
$(':header') 選擇所有標題 <h>標簽
父子選擇器
$('li').parent()； 父親
$('.box').children()；孩子
$('.box').find('span') 孩子找到指定的元素
$('.liItem').siblings()；兄弟 所有()里面可以添加特定的屬性
動畫
$('div').hide(） 隱藏
$('div').show(）展現
$('div').toggle() 切換 注意點所有（）里可以輸入2個參數 第一個時間（可以只有第一個），第二個函數（時間結束調用的方法）
$('div').hide(2000,function () {
//當動畫完成時自動調用;
alert('隱藏完成');
});
展示收起動畫
$('div').sildeUp(） 隱藏
$('div').slidedown(）展現
$('div').slideToggle() 切換 注意點所有（）里可以輸入2個參數 第一個時間（可以只有第一個），第二個函數（時間結束調用的方法）
$('div').slideToggle(2000,function () {
alert('1');
});
slideUp（）與show（）區別
slideUp動畫從上面一條邊拉下來，（）沒有參數也有一種漸變效果
show動畫從角慢慢張開；（）沒有參數時立馬出現；沒有漸變效果
動畫排隊：當執行多個動畫的時候，會產生排隊效果。會把多個動畫，添加到一個動畫隊列中。動畫隊列中，只要添加進去，就會等待完成。
stop（）用來停止當前的動畫執行后面的動畫
$('.first>li').hover(function () {
//動畫排除
//每一次動畫都會添加到一個隊列當中
//同時執行多個動畫時，可能會造成動畫排列。
//想要停止，使用stop
$(this).children('ul').stop().slideToggle();
// var index = $(this).index();//獲取索引
});
淡入淡出動畫
$('div').fadeIn（）淡入
$('div').fadeOut（） 淡出
$('div').fadeToggle() 注意點所有（）里可以輸入2個參數 第一個時間（可以只有第一個），第二個函數（時間結束調用的方法）
$('div').fadeTo(1000,0.3); **第一個參數時間；第二個是opacity
$(function () {
//彈出廣告
$('.ad').slideDown().fadeOut().fadeIn().delay(3000).slideUp();
//關閉廣告
$('.close').click(function () {
//開始動畫時， 要先停止動畫隊列。
$(this).parent().stop().slideUp();
});
$('.ad').slideDown.hide().show().delay(2000).slideUp
});
自定義動畫animate
$('div').animate({width:300 },1000,function () { alert('finish') });;
$('div').animate({width:'+=300' },1000,function () { alert('finish') });;
$('div').animate({width:'toggle' },1000,function () { alert('finish') });; 寬度有無切換
第一個參數 目標值（對象）；第二個參數；時間，第三個參數函數
each
var obj = [
{name:'gxq',age:'20'},
{name:'zs',age:'18'},
{name:'wc',age:'21'},
];
$.each(obj,function (key,value) {
console.log(value.name,value.age);
console.log($(value).text()); ach迭代出來的value 它是一個原生js對象，沒有辦法直接使用jQuery；想要使用必須得要轉成jQuery對象
}); each遍歷();第一個參數為對象（數組），后面function里面的參數第一個key;第二個為vaule；（數組的第一個索引；第二個值）
添加節點
ul內部添加
var tag = '<li>我是新的li</li>'
$(tag).prependTo($('ul')); 父子關系( tag是ul的子元素)
$('ul').prepend(tag); 內部添加第一個li之前； 父子關系( ul是tag的父元素元素)
區別：作用無區別； 僅僅是位置放置不同
$('ul').append(tag); 內部添加最后一個li之后
$(tag).appendTo('ul'); 添加節點到某個固定的節點之前
外部添加
var tag='<li>我是添加</li>'
$(tag).insertBefore('ul') = $('ul').before(tag) 添加ul之前
$(tag).insertAfter('ul')：= $('ul').after(tag) 添加ul之后
添加節點到某個固定的節點之后
兩者無區別;僅僅是位置不同而已
刪除節點
- $('li:last').remove(); 刪除節點；節點不在
- $('li).empty(); 清空節點；內容清空 節點還在
復制節點
- var newTag = $('h1').clone(true)； //當為true,代表復制所有，包括它注冊的事件；//不傳參為false 只復制標簽。事件不會復制
- $('.box').append(newTag);
替換節點
- var tag = <div>我是一個div</div>;
- $('h1').replaceWith($(tag));
事件對象； 事件冒泡
- $('button').on('click',{name:'gxq',age:'23'},function (event) {
event.stopPropagation(); //阻止時間冒泡
console.log(event.type); //click
console.log(event.target); // button標簽
console.log(event.data.name); 、// gxq
console.log(event); // 整個
});
默認行為 ； 自動觸發
- $('inpu[type=submit]').on('click',function (e) {
e.preventDefault(); // //阻止事件的默認行為。
return false // 也可以
});
- $(':submit').trigger('click'); //自動觸發但是有冒泡事件
- $(':submit').triggerHandler('click'); // //自動觸發但是有冒泡事件
事件委托
> $('button').click(function () {
var tag = '<div class="box1">1111</div> ';
var tag1 = '<div class="box2">1111</div> ';
$('.box').append(tag);
$('.box').append(tag1);
});
$('.box1').on('click',function (){
alert('1'); //不會觸發；代碼解析到這 ；box1還沒生成
});
> $('.box').on('click','.box1,.box2',function () {
alert('點了1'); //成功
})
>$('.box').click('.box1,.box2',function(){
alert('3') // 這個點擊box的任何位置都會跳出3
})
trigger自動觸發事件
<form action="03-刪除結點.html">
<input type="submit">
</form>
/*觸發事件
程序一執行就開始執行對應的事件
1.使用trigger會解發事件的默認行為. 2.使用trigger觸發事件時, 不能阻止事件冒泡
$(':submit').on('click',function () {
alert('提交');
});
$(':submit').trigger('click'); 一進頁面就觸發了點擊，而且跳轉
// $(':submit').triggerHandler('click'); 觸發點擊，但是清除默認事件不跳轉
鏈式操作
$(this).children('.sec').slideToggle().end().siblings().children('.sec').slideUp()
end() 可以結束前一段鏈式操作，又回到原始$(thiis)這個狀態操作
