什么是jquery
使用JavaScript庫封裝的一款高效簡潔的框架（是什么/概念）
優(yōu)化DOM操作柏卤、事件處理、動畫設(shè)計和Ajax交互后控，幫助開發(fā)者創(chuàng)建出高難度的交互頁面（有什么用/作用）
輕量級、強大的選擇器、出色的 DOM 操作的封裝走越、可靠的事件處理機制、完善的 Ajax耻瑟、出色的瀏覽器兼容性旨指、鏈?zhǔn)讲僮鞣绞剑槭裁从?特點）
JQuery選擇器
Jquery的選擇器大部分與CSS3.0一樣，例如juqery的標(biāo)簽選擇器${"div"}與css的標(biāo)簽選擇器div{}
JQuery選擇器案例
1.png
2.png
3.png
4.png
5.png
6.png
7.png
Jquery選擇器大全
具體請看選擇器總結(jié)文件(選擇器總結(jié)文件.docx)
樣式
8.png
$('div').css('border','10px blue solid');//賦值
alert($('div').css('border'));//取值
$('div').addClass('aa bb');
$('div').removeClass('bb');
事件
9.png
方式一: event()
$('div').click(function1);
$('div').click(function1,function2);
方式二: bind()
//綁定一個事件喳整，注意用事件名稱,function
$('input:eq(1)').bind('click',function(){
alert('hello jquery');
});
//綁定多個事件谆构，觸發(fā)同一個函數(shù)
$('input:eq(1)').bind('click blur',function(){
alert('hello jquery');
});
// 綁定多個事件，觸發(fā)不同的函數(shù),注意用{}擴展多個函數(shù)
$('div').bind(
{
mouseover:function(){
$(this).css('background','blue');
},
mouseleave:function(){
$(this).css('background','yellow');
}
}
);
方式三: on()
on的基本用法與bind類似
//綁定一個事件框都，注意用事件名稱,function
$('input:eq(1)').on('click',function(){
alert('hello jquery');
});
//綁定多個事件搬素，觸發(fā)同一個函數(shù)
$('input:eq(1)').on('click blur',function(){
alert('hello jquery');
});
// 綁定多個事件，觸發(fā)不同的函數(shù)
$('div').on({
// 注意用{}
mouseover:function(){
$(this).css('background','blue');
},
mouseleave:function(){
$(this).css('background','yellow');
}
});
on高級用法
$('p>span').on('click',function(){
alert('span');
});
//與上面的代碼等價
$('div').on('click','span',function(){
alert('span');
});
事件冒泡
event.target 指向了觸發(fā)事件的對象（事件源） this指向的是調(diào)用事件對象的本身
$('div').on('click',function(event){
alert('span');
event.stopProgation();
});
解綁事件
$('div').off('click');//解綁div的點擊事件
$('div').unbind('click');//解綁div的點擊事件
$('div').off();//解綁div的所有事件
$('div').unbind();//解綁div的所有事件
注意：無法將html標(biāo)簽上的事件進行解綁魏保，只能解綁通過jquery綁定的事件
屬性
通過attr(屬性名,屬性值)來賦值熬尺，通過attr(屬性名)來取值
10.png
$('input[type="button"]').attr("onclick","");
dom操作
11.png
// append添加到末尾
$('div').append('<span>這是第二個span</span>');
//$()可以將字符串內(nèi)容轉(zhuǎn)成jquery對象
$('<span>這是第二個span</span>').appendTo($('div'));
//prepend添加到開頭
$('div').prepend('<span>這是第三個span</span>');
$('<span>這是第四個span</span>').prependTo($('div'));
//wrap與wrapAll與
$('p').wrap('<div style="color:red"></div>');
$('p').wrapAll('<div style="color:red"></div>');
//wrapInner 將div下面的節(jié)點包裹一個div父節(jié)點
$('div').wrapInner('<div style="color:red"></div>');
//unwrap 去掉p的div父節(jié)點
$('p').unwrap('div');
//去掉p的父節(jié)點
$('p').unwrap();
元素遍歷
12.png
//子代 div所有子代span
$('div').children('span').css('color','red');
//后代 div所有后代span
$('div').find('span').css('color','red');
//找到span的父節(jié)點
$('span').parent().css('border','1px red solid');
//找到span的所有祖先節(jié)點
$('span').parents().css('border','1px red solid');
//找到span的所有div祖先節(jié)點
$('span').parents('div').css('border','1px red solid');
//找到span最近的div父節(jié)點
$('span').closest('div').css('border','1px red solid');
parent與closest的區(qū)別
13.png
//span2的前一個相鄰的span
$('#span2').prev('span').css('color','red');
//span1后一個相鄰的span
$('#span1').next('span').css('color','blue');
//span2的同輩span標(biāo)簽
$('#span2').siblings('span').css('color','blue');
//index就是元素的數(shù)組下標(biāo) element元素本身
$('span').each(function(index,element) {
if(index%2==0){
//$(this).css('color','red');
element.style="color:red";
}else{
$(this).css('color','blue');
}
});
jquery對象與dom對象相互轉(zhuǎn)換
//將dom對象轉(zhuǎn)成jquery
var div=document.getElementById('div');
var $div=$(div);
//將jquery對象轉(zhuǎn)成dom對象
var $div=$('div');
var div=$div[0];
