jQuery基礎(chǔ)
什么是JQ？一個(gè)優(yōu)秀的JS庫，大型開發(fā)必備
JQ的好處？
一簡化JS的復(fù)雜操作
二不再需要關(guān)心兼容性
三提供大量實(shí)用方法
如何學(xué)習(xí)JQ？
一www.jquery.com
二JQ只是輔助工具，要正確面對(duì)
三需要分階段學(xué)習(xí)
JQ設(shè)計(jì)思想？
選擇網(wǎng)頁元素 模擬CSS選擇元素 獨(dú)有表達(dá)式選擇器 多種篩選方法
JQ寫法 方法函數(shù)化 鏈?zhǔn)讲僮? 取值賦值合體
JQ與JS關(guān)系 可以共存，不能混用
模擬CSS選擇元素的示例yp
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
總結(jié)：選擇一組元素后省略了循環(huán)
獨(dú)有表達(dá)式選擇的示例
$('li:first').css('background','red');
$('li:last').css('background','red');
$('li:eq(2)').css('background','red'); //從0開始
$('li:even').css('background','red'); //奇數(shù)行
$('li:odd').css('background','red'); //偶數(shù)行
多種篩選方法的示例
$(‘li.box’).css('background','red');
$('li').filter('.box').css('background','red'); //過濾出帶有.box的li
$('li').filter('[title=hello]').css('background','red'); //篩選出title屬性為hello的li
方法函數(shù)化的示例
原生：window.onload = function(){};
JQ: $(function(){}); jQ的源碼中相當(dāng)于有一個(gè)function $(){}這個(gè)函數(shù)
原生：innerHTML = 123;
jQ: html(123); jQ的源碼中相當(dāng)于有一個(gè)function html(){}這個(gè)函數(shù)
原生：onclick = function(){};
JQ：click(function(){})； jQ的源碼中相當(dāng)于有一個(gè)function click(){}這個(gè)函數(shù)
原生：window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){alert( this.innerHTML );};
};
JQ：$(function(){
$('#div1').click(function(){alert( $(this).html() );});
});
總結(jié)：原生中的賦值，大多由JQ中的傳參來完成。
調(diào)用時(shí)一定帶上括號(hào)。eg:html();$('ul').children().css('background','red');
鏈?zhǔn)讲僮鞯氖纠?/p>
$('#div1').html('hello').css('background','red').click(function(){
alert(123);});
取值賦值合體的示例
$('#div1').html('hello'); //賦值
alert( $('#div1').html() ); //取值
css('width','200px') //賦值
alert(css('width') ) //取值
總結(jié)：alert( $('li').html() ); //當(dāng)一組元素的時(shí)候，取值是一組中的第一個(gè)
$('li').html('hello'); //當(dāng)一組元素的時(shí)候,賦值是一組中的所有元素,省略了循環(huán)
可以共存，不能混用的示例
alert( $(this).html() ); //jq的寫法
alert( this.innerHTML ); //js的寫法
alert( $(this).innerHTML ); //錯(cuò)誤的
alert( this.html() ); //錯(cuò)誤的
$()下的常用方法
has() 專對(duì)這個(gè)元素里面的
$('div').has('span').css('background','red');//包含span元素的div變紅
$('div').has('.box').css('background','red');
not() 是filter的反義詞
$('div').not('.box').css('background','red'); //類名不是.box的div變紅
filter() 專對(duì)當(dāng)前這個(gè)元素自身的,對(duì)一組元素時(shí)行過濾
$('div').filter('.box').css('background','red');//類名是.box的div變紅
next() 下一個(gè)兄弟結(jié)點(diǎn)
prev() 上一個(gè)兄弟結(jié)節(jié)
find()
$('div').find('h2').css('background','red');//找div下面的h2
eq() 充當(dāng)下標(biāo)的作用，從0開始
$('div').find('h2').eq(1).css('background','red');//一組元素中的第二個(gè)
index()索引,索引就是當(dāng)前元素在所有兄弟節(jié)點(diǎn)中的位置
alert($(‘#h’).index());
attr()
alert($('div').attr('title'));
$('div').attr('title','456');
$('div').attr('class','box');
總結(jié)：
1filter與has的區(qū)別
filter和not是針對(duì)前面這個(gè)元素的，而has是看這個(gè)元素里面的東西的
html:<div>div1<span class="box">span</span></div>
<div class="box">div2</div>
Js: $('div').has('.box').css('background','red'); //div1變紅
$('div').filter('.box').css('background','red'); //div2變紅
2關(guān)于next
html:<div>div1</div>
<div>div2</div>
<span>span</span>
Js: $('div').next().css('background','red');
//div2和span都變紅，理解為分別讓div1和div2的下一個(gè)兄弟節(jié)點(diǎn)都變紅
3find與has的區(qū)別
has()后代中如果有符合篩選條件的，會(huì)將整個(gè)后代作為一個(gè)整體，對(duì)這個(gè)整體進(jìn)行操作；
find()篩選出符合條件的后代，對(duì)篩選出的dom單獨(dú)進(jìn)行操作。
$('div').find('h2').css('background','red');
//在div里面找h2，讓div里面的h2 變紅
$('div').has('h2').css('background','red');
//在div里面是否包含h2,如果包含,讓div變紅
應(yīng)用---編寫選項(xiàng)卡
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
});
});
總結(jié)：1省略循環(huán) 2eq($(this).index())
jQuery方法之屬性操作
addClass()
$('div').addClass('box2 box4');
removeClass()
$('div').removeClass('box1');
width()： 純寬width
innerWidth()：width + padding
outerWidth()：width + padding + border
outerWidth(true)：width + padding + border + margin
jQuery方法之DOM操作
動(dòng)詞 名詞
A.insertBefore(B) A.before(B)
把A剪切到B的前面 A的前面必須是B
A.insertAfter(B) A.after(B)
把A剪切到B的后面
A.appendTo(B) append()
把A添加到B元素里面的最后面
A.prependTo(B) prepend()
把A添加到B元素里面的最前面
remove()刪除節(jié)點(diǎn)
$(‘<div>’)創(chuàng)建節(jié)點(diǎn)
jQuery方法之事件操作和scrollTop
on()綁定事件:不僅可以加系統(tǒng)自帶事件，也可以綁定自定義事件，還可以加多個(gè)事件
示例1：$('div').on('click mouseover',function(){
alert(123);});
//點(diǎn)擊和移入時(shí)都彈出123
示例2：$('div').on({
'click' : function(){alert(123);}, //點(diǎn)擊時(shí)彈123
'mouseover' : function(){alert(456);} //移入時(shí)彈456
});
off()取消事件
示例：$('div').on('click mouseover',function(){
alert(123); //$(‘div’).off();取消所有事件
$('div').off('mouseover'); //只取消mouseover事件，寫on的里面或外面有區(qū)別
});
scrollTop()縱向的滾動(dòng)距離
示例：$(document).click(function(){
alert( $(window).scrollTop() );
});
scrollLeft()橫向的滾動(dòng)距離
總結(jié)：1addClass關(guān)于重復(fù)的不會(huì)重復(fù)添加
2alert($(‘oDiv’).width())與alert($(‘oDiv’).css(‘width’))區(qū)別:前者無單位，后者有單位
3insertBefore與before區(qū)別：后續(xù)操作不一樣
$('span').insertBefore( $('div') ).css('background','red');//span變紅
$('div').before( $('span') ).css('background','red');//div變紅
4$作用 1相當(dāng)于window.onload 2選擇元素 3創(chuàng)建節(jié)點(diǎn)
應(yīng)用---編寫彈窗
樣式中
<style>
*{ margin:0; padding:0;}
#login{ width:300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</style>
JS中：$(function(){
$('#input1').click(function(){
var oLogin = $('<div id="login"><p>用戶名:<input type="text" /></p><p>密碼:<input type="text" /></p><div id="close">X</div></div>');
$('body').append( oLogin );
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );
$('#close').click(function(){oLogin.remove();});
$(window).on('resize scroll',function(){
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' ,($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
});
});
});
總結(jié):1創(chuàng)建元素$(‘<div>’) 2居中($(window).width() - oLogin.outerWidth())/2 ；
3 $(window),$(document)不寫引號(hào)
jQuery方法之事件細(xì)節(jié)
ev event對(duì)象
ev.pageX ev.pageX(相對(duì)于文檔的);clientX(相對(duì)于可視區(qū)); 可視區(qū)+滾動(dòng)條距離 =文檔
ev.which ev.which類似于keyCode,比keyCode強(qiáng)大,用which時(shí)鼠標(biāo)的鍵值也能取到
ev.preventDefault(); 阻止默認(rèn)事件
ev.stopPropagation(); 阻止冒泡的操作
return false;阻止默認(rèn)事件 + 阻止冒泡的操作
one() 只執(zhí)行事件一次
示例：$('div').one('click',function(){
alert(123);
});
jQuery方法之位置操作
offset() 是原生的left 和top的集合;到屏幕的左距離，上面的距離
示例：alert( $('#div2').offset().left ); //獲取到屏幕的左距離
示例：alert( $('#div2').offset().top ); //獲取到屏幕的上距離
position()到有定位的父級(jí)的left值,把當(dāng)前元素轉(zhuǎn)化成類似定位的形式
示例：<div id="div1">
<div id="div2"></div>
</div>
#div1{ width:200px; height:200px; background:red; overflow:hidden; margin:20px; position:absolute;}
#div2{ width:100px; height:100px; background:yellow; margin:30px; }
alert( $('#div2').position().left ); //輸出：0
如果div1沒有定位,alert( $('#div2').position().left ); //輸出：20
parent()獲取父級(jí) 原生的parentNode
offsetParent()獲取有定位的父級(jí) 原生的offsetParent
val()獲取表單元素的值
示例：alert( $('input').val() ); 取值
$('input').val(456); 賦值
size()獲取一組元素的長度，類似length
each()
$('li').each(function(i,elem){ //一參：下標(biāo) 二參 : 每個(gè)元素
$(elem).html(i); //0 1 2 3 4
});
應(yīng)用---拖拽
$('div').mousedown(function(ev){
var disX = ev.pageX - $(this).offset().left;
var disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX - disX);
$('div').css('top',ev.pageY - disY);
});
$(document).mouseup(function(){$(document).off();});
return false;});
hover() 鼠標(biāo)移入移出的時(shí)候
示例：$('#div1').hover(function(){
$(this).css('background','blue');
},function(){
$(this).css('background','red');
});
show() hide()顯示 隱藏
示例：$('#div1').hover(function(){
$('#div2').hide(3000); //移入隱藏,3S內(nèi)隱藏
},function(){
$('#div2').show(3000); //移出顯示,3S內(nèi)顯示
});
fadeIn() fadeOut()淡入 淡出
示例：$('#div1').hover(function(){
$('#div2').fadeOut(3000); //淡出，默認(rèn)400MS
},function(){
$('#div2').fadeIn(3000); //淡入
});
slideDown() slideUp()
示例：$('#div1').hover(function(){
$('#div2').slideDown(); //向下展開
},function(){
$('#div2').slideUp(); //向上卷曲
});
fadeTo(時(shí)間，透明度)關(guān)于透明度范圍的方法
示例：$('#div1').hover(function(){
$('#div2').fadeTo(1000,0.5); //1S內(nèi)到半透明
},function(){
$('#div2').fadeTo(1000,1); //1S內(nèi)到透明度1
});
英文：http://api.jquery.com/
中文： http://www.css88.com/jqapi-1.9/
jQuery高級(jí)
get() : 把JQ轉(zhuǎn)成原生JS，不寫下標(biāo)，獲取的是集合
示例1：alert( $('#div1').get(0).innerHTML );//就算只有一個(gè)元素,也是一個(gè)集合，所以要寫下標(biāo)
示例2：for(var i=0;i<$('li').get().length;i++){//轉(zhuǎn)成一組li的集合
$('li').get(i).style.background = 'red';
}
for(var i=0;i<$('li').length;i++){ //jq下也有l(wèi)ength
$('li').get(i).style.background = 'red';
或 $('li')[i].style.background = 'red';
}
總結(jié)：jq轉(zhuǎn)原生法1get() 法2[i]
Jq中outerWidth()與原生的offsetWidth區(qū)別
原生的offsetWidth獲取不到隱藏元素的值，但outerWidth可以，innerWidth也可以
text(): 設(shè)置文本,合體的特例
示例<div>div1<span>span</span></div>
<div>div2</div>
<div>div3</div>
alert( $('div').html() ); 輸出：div1<span>span</span>
特點(diǎn)1取值賦值合體 2取值只取到第一個(gè) 3包括文本和標(biāo)簽
alert( $('div').text() ); 輸出：div1 span div2 div3
特點(diǎn)1會(huì)獲取所有的內(nèi)容 2不包括標(biāo)簽
$('div').text('<h3>h3</h3>');設(shè)置文本，標(biāo)簽也當(dāng)做文本來設(shè)置
remove() 與 detach()
detach() 跟remove方法一樣,會(huì)刪除元素，只不過會(huì)保留刪除這個(gè)元素的操作行為
示例：$('div').click(function(){
alert(123);
});
var oDiv = $('div').detach();//用remove刪除,則在次添加后點(diǎn)擊事件不存在
$('body').append( oDiv );//用detach刪除,則在次添加后點(diǎn)擊事件仍然存在
總結(jié)：$('div').remove();$('div').detach();刪除元素的返回值就是當(dāng)前這個(gè)元素
關(guān)于$
$(function(){ })是$(document).ready(function(){})的簡寫
等DOM加載完就可以執(zhí)行了 , 性能要好,比window.onload加載的快
jQuery的DOM操作
parents() : 獲取當(dāng)前元素的所有祖先節(jié)點(diǎn)，參數(shù)就是篩選功能
示例1html中：
<body class="box">
<div id="div1" class="box">aaa
<div id="div2" class="box">bbb</div>
</div>
</body>
$('#div2').parents().css('background','red');//div2的祖先節(jié)點(diǎn)有div1 body html
$('#div2').parents(‘body’).css('background','red');// div2的祖先節(jié)點(diǎn)只選body
$('#div2').parents(‘.box’).css('background','red');//div1 body變紅
closest() : 獲取最近的指定的祖先節(jié)點(diǎn)(包括當(dāng)前元素自身),必須要寫篩選的參數(shù),只能 找到一個(gè)元素
示例2:$('#div2').closest('.box').css('background','red');// 自身變紅
siblings() : 找所有的兄弟節(jié)點(diǎn)，不包括自身。參數(shù)也是篩選功能。
示例一:$('span').siblings().css('background','red');
//span元素的所有兄弟節(jié)點(diǎn)全變紅，但不包括span元素
示例二:$('span').siblings('em').css('background','green');
//找span元素的兄弟節(jié)點(diǎn)em，使其變紅
nextAll() : 下面所有的兄弟節(jié)點(diǎn)，參數(shù)也是篩選功能
示例：$('span').nextAll().css('background','green');
//span下面的所有兄弟節(jié)點(diǎn)都變綠，不包括span
prevAll() : 上面所有的兄弟節(jié)點(diǎn)
示例：$('span').prevAll().css('background','green');
//span上面的所有兄弟節(jié)點(diǎn)都變綠，不包括span
Until() : 截止
nextUntil（）載止到哪為止,不寫參數(shù)時(shí)和nextAll()作用一樣
示例一:$('span').nextUntil().css('background','red');
//，從span(不包括span)下面的所有兄弟節(jié)點(diǎn)變紅
示例二:$('span').nextUntil('h2').css('background','red');
//從span到h2之間的兄弟結(jié)節(jié)全變紅，但不包括span和h2
parentsUntil() nextUntil() prevUntil()
clone() :復(fù)制節(jié)點(diǎn).可以接收一個(gè)參數(shù) ，作用是可以復(fù)制之前的操作行為
示例：$('div').click(function(){
alert(123);});
$('div').clone(true).appendTo( $('span') );
//克隆div元素,添加到span里面的最后位置.并且點(diǎn)擊克隆后的div可以彈出123.
總結(jié):clone()可以復(fù)制節(jié)點(diǎn)，也可以復(fù)制行為
wrap()包裝
示例html:
<span>span</span>
<div>
<span>span</span> $('span').wrap('<div>');//給每個(gè)span包裝一個(gè)div
</div>
<span>span</span>
輸出
<div><span>span</span></div>
<div>
<div><span>span</span></div>
</div>
<div><span>span</span></div>
wrapAll() 整體包裝
示例：<span>span</span>
<span>span</span>
<p>p</p>
<span>span</span> $('span').wrapAll('<div>');
<div>
<span>span</span>
<span>span</span>
<span>span</span>
</div>
<p>p</p>
//把p剪切出來，wrapAll會(huì)改變dom節(jié)點(diǎn)方式
wrapInner() 內(nèi)部包裝
示例： <span>span</span>
<span>span</span>
<span>span</span> $('span').wrapInner('<div>');
<span><div>span</div></span>
<span><div>span</div></span>
<span><div>span</div></span>
unwrap() 刪除包裝 ( 刪除父級(jí)) : 不包括body
總結(jié)1：wrap(‘<div>’); 這里面的元素要用<>括起來。
add()
示例：var elem = $('div'); //elem裝了div
var elem2 = elem.add('span'); //elem2裝了div和span
elem.css('color','red');
elem2.css('background','yellow');
slice():截取指定節(jié)點(diǎn)的范圍，包頭不包尾
示例：$('li').slice(1,4).css('background','red');//截取到第1 2 3個(gè)
serialize() serializeArray()對(duì)數(shù)據(jù)進(jìn)行數(shù)據(jù)串聯(lián)化的方法
示例：<form>
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="text" name="c" value="3">
</form>
console.log($('form').serialize()); 輸出： a=1&b=2&c=3(是個(gè)字符串)
console.log( $('form').serializeArray() ); 輸出:
[
{ name : 'a' , value : '1' },
{ name : 'b' , value : '2' },
{ name : 'c' , value : '3' }
]
jQuery中的運(yùn)動(dòng)
animate()
第一個(gè)參數(shù) : {} 運(yùn)動(dòng)的值和屬性
第二個(gè)參數(shù) : 時(shí)間(運(yùn)動(dòng)快慢的) 默認(rèn) : 400ms
第三個(gè)參數(shù) : 運(yùn)動(dòng)形式 只有兩種運(yùn)動(dòng)形式 ( swing(緩沖,慢快慢,默認(rèn)) linear(勻速) )
第四個(gè)參數(shù) : 回調(diào)函數(shù)
示例：$('#div1').click(function(){
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
alert(123);
});
鏈?zhǔn)竭\(yùn)動(dòng)法一：應(yīng)用第四個(gè)參數(shù)
$('#div1').click(function(){
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
$(this).animate({height : 300}); });
鏈?zhǔn)竭\(yùn)動(dòng)法二：應(yīng)用鏈?zhǔn)竭\(yùn)動(dòng)
$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);
stop()停止運(yùn)動(dòng),默認(rèn)只會(huì)阻止當(dāng)前運(yùn)動(dòng)，不會(huì)阻止后續(xù)運(yùn)動(dòng)
示例：$('#div1').click(function(){
$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);
}); // 鏈1：寬 鏈2：高
$('#div2').click(function(){
$('#div1').stop();
});
總結(jié):當(dāng)div1在鏈?zhǔn)?中運(yùn)動(dòng)時(shí)被stop,=>鏈1運(yùn)動(dòng)停止，鏈2運(yùn)動(dòng)仍然繼續(xù)
當(dāng)div1在鏈?zhǔn)?中運(yùn)動(dòng)時(shí)被stop,=>當(dāng)即停止鏈2運(yùn)動(dòng)
stop(true) 阻止后續(xù)的運(yùn)動(dòng)
示例：$('#div1').stop(true);
總結(jié):無論div1在鏈?zhǔn)?還是鏈?zhǔn)?中被stop時(shí)，當(dāng)即全部停止
stop（true,true);可以立即停止到指定的目標(biāo)點(diǎn)
示例：$('#div1').stop(true,true);
總結(jié)：當(dāng)div1在鏈?zhǔn)?中運(yùn)動(dòng)時(shí)被stop,=>鏈1馬上停到寬為300的位置，鏈2不動(dòng)
當(dāng)div1在鏈?zhǔn)?中運(yùn)動(dòng)時(shí)被stop,=>鏈2馬上停到高為300的位置
示例：$('#div1').stop(false,true);
總結(jié):當(dāng)div1在鏈?zhǔn)?中運(yùn)動(dòng)時(shí)被stop,=>鏈1馬上停到寬為300的位置，鏈2依然以swing方式運(yùn)動(dòng)
finish()立即停止到所有指定的目標(biāo)點(diǎn)
示例：$('#div2').click(function(){
$('#div1').finish();
});
總結(jié)：無論div1在鏈?zhǔn)?還是鏈?zhǔn)?中被finish時(shí),寬高馬上都停到300的位置
delay()延遲
示例：$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);
寬走完后延遲1S后在走高
delegate() 事件委托 undelegate()取消事件委托
示例:$('ul').delegate('li','click',function(){
this.style.background = 'red';
$('ul').undelegate();
});
原理:利用冒泡原理，事件加給了ul,li本身沒有事件
好處 1省略了循環(huán)操作，(只給ul加事件),大大提高性能
2后續(xù)添加的li都擁有事件的操作
trigger()主動(dòng)觸發(fā) 特別適合自定義事件
示例一：$('#div1').on('click',function(){
alert(123);
});
$('#div1').trigger('click'); //不用點(diǎn)擊加載后馬上彈出123
示例二：$('#div1').on('show',function(){
alert(123);});
$('#div1').on('show',function(){
alert(456);});
$('#div1').trigger('show'); //輸出123 456
事件細(xì)節(jié)ev.data ev.target事件源 ev.type 事件類型
示例：$('#div1').on('click',{name:'hello'},function(ev){
console.log(ev.data); 控制臺(tái)輸出：{name:'hello'}
alert(ev.data.name); 輸出:hello
alert( ev.target ); 輸出: div
alert( ev.type ); 輸出：click
}
總結(jié)：如何往function里傳參，就在’click’后面寫,ev.data可以取到這個(gè)參數(shù)
$下的常用方法，又叫做工具方法
示例$().css() $().html() $().val() : 只能給JQ對(duì)象用
$.xxx() $.yyy() $.zzz() : 不僅可以給JQ用，也可以給原生JS用 ,叫做工具方法
type() 判斷類型
示例：var a = null;alert( $.type(a) );比alert( typeof a );判斷的類型更多,更強(qiáng)大
trim() 去掉前后空格
示例：var str = ' hello ';
alert('('+$.trim(str)+')');
inArray() 針對(duì)數(shù)組，類似于 indexOf
示例：var arr = ['a','b','c','d'];
alert( $.inArray('b',arr) ); 輸出：1
proxy()改變this指向的
示例一：function show(){
alert(this);
}
show(); 指向windwow
$.proxy(show , document)();指向document
示例二:關(guān)于傳參
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show , document)(3,4); //輸出 3 4 document
或$.proxy(show , document,3,4)();
或$.proxy(show , document,3)(4);
總結(jié)：1$.proxy(函數(shù)名,新的this指向,參數(shù));
2 $.proxy(函數(shù)名,新的this指向,參數(shù))() => 后面加括號(hào)即調(diào)用
3 在前面?zhèn)鲄⒌哪康模窃谑录?zhí)行時(shí)才發(fā)生
例如在事件函數(shù)中
$(document).click( $.proxy(show,window,3,4) );//點(diǎn)擊時(shí)才彈 3 4 window
$(document).click( $.proxy(show,window)(3,4) );//不用點(diǎn)擊，馬上就執(zhí)行
noConflict()防止沖突
var hjr = $.noConflict(); 用hjr來替換$
很多庫都是以$為命名空間，為防止沖突
示例：var hjr= $.noConflict();
var $ = 10;
hjr(function(){
hjr('body').css('background','red');
});
$==jQuery 即 $(function(){ })==jQuery(function(){ });
parseJSON() 把字符串解析成json,注意:此字符串必須是嚴(yán)格模式的json
示例：var str = '{"name":"hello"}';
alert($.parseJSON( str ).name);
makeArray() 把類數(shù)組轉(zhuǎn)成真正的數(shù)組
示例：var aDiv = document.getElementsByTagName('div'); //類數(shù)組只有下標(biāo)和長度
$.makeArray(aDiv).push();
ajax() : json形式的配置參數(shù)
url success error contentType data type dataType cache timeout
抽象出來的方法 get() post() getJSON()
支持jsonp的形式：指定?callback=?
寫法一：$.ajax({
url : 'xxx.php',
data : 'name=hello&age=20',
type : 'POST', //默認(rèn)是get
success : function(data){
alert(1);
},
error : function(){
alert(2);
}});
寫法2：$.get('xxx.php?name=hello',function(){ 成功的回調(diào)； });
寫法3：$.get('xxx.php',{name:’hello’},function(){ });
寫法4：$.post('xxx.php',function(){ });
$.get():ajax的get提交方式; $().get():jq對(duì)象轉(zhuǎn)成原生
$.getJSON('xxx.php?callback=?',function(data){
data
});
名字隨機(jī)({});
插件
$.extend({插件名，函數(shù)})： 擴(kuò)展工具方法下的插件形式 $.xxx() $.yyy()
$.fn.extend： 擴(kuò)展到JQ對(duì)象下的插件形式 $().xxx() $().yyy()
示例一：
<script src="jquery-1.10.1.min.js"></script>
<script>
$.extend({
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
rightTrim : function(){}
});
</script>
<script>
var str = ' hello ';
alert( '('+$.leftTrim(str)+')' );
</script>
示例二：
<script src="jquery-1.10.1.min.js"></script>
<script>
$.fn.extend({
drag : function(){//this : $('#div1')
var disX = 0;var disY = 0;var This = this;
this.mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
This.css('left' , ev.pageX - disX);
This.css('top' , ev.pageY - disY);
});
$(document).mouseup(function(){
$(this).off();
});
return false;
});
</script>
<script>
$(function(){
$('#div1').drag();
});
<script>
