一芍锦、jQuery的工具方法
工具方法:不僅可以給JQ用芥挣,也可以給原生JS用
例:
$.xxx() $.yyy() $.zzz()
與上面相似的是給$帶括號(hào)篇恒;這種只能給JQ對(duì)象用
$().css() $().html() $().val()
1.$.type() : 是判斷類型
var a = null;
alert( typeof a ); //undefined
alert( $.type(a) ); //null
注意:type()可以判斷出更多的類型(數(shù)組道伟,json......)
2.$.trim():去前后空格
var str = ' hello ';
alert('('+$.trim(str)+')'); //(Hello)
3.inArray() : 類似于 indexOf媒咳,查找字符所在字符串的位置
4.proxy() : 改變this指向
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show , document);//將this指向window
proxy() 也可以傳參調(diào)用
//以下兩種方法均可
$.proxy(show , document,3)(4);
$.proxy(show , document,3,4);
打開頁面點(diǎn)擊則調(diào)用
$(document).click( $.proxy(show,window,3,4) );
打開頁面則調(diào)用
$(document).click( $.proxy(show,window)(3,4) );
二粹排、jQuery工具方法和Ajax
1.noConflict() : 防止沖突
因?yàn)?span id="n9wwtl2" class="math-inline">在jquery中有很大作用,再給賦值則會(huì)報(bào)錯(cuò)涩澡,利用該函數(shù)可解決
//此時(shí)不光可以賦值顽耳,此時(shí)原來$具有的作用已經(jīng)被miaov代替,所以可以賦值
var miaov = $.noConflict();
var $ = 10;
miaov(function(){
miaov('body').css('background','red');
});
2.parseJSON():將字符串解析為json
var str = '{"name":"hello"}';
alert($.parseJSON( str ).name); //Hello
3.makeArray():將類數(shù)組轉(zhuǎn)化為數(shù)組
$.makeArray(aDiv).push();
比如一組div不能使用數(shù)組的push方法,當(dāng)用該函數(shù)后射富,則可以使用
三膝迎、jQuery下使用Ajax
$.ajax({
url : 'xxx.php',
data : 'name=hello&age=20',
type : 'POST',
success : function(data){
alert(1);
},
error : function(){
alert(2);
}
});
$.get():Ajax的get提交方式
$.get('xxx.php',{ },function(){
//傳輸?shù)牡刂罚粄}傳輸?shù)臄?shù)據(jù) 胰耗;傳輸成功的回調(diào)函數(shù)
});
注意:
$().get(); //將JQ對(duì)象轉(zhuǎn)化為JS對(duì)象
$.getJSON():請(qǐng)求json形式
四限次、jQuery的插件操作
1.$.extend : 擴(kuò)展工具方法下的插件形式;
例:
$.xxx()
$.yyy()
2.$.fn.extend : 擴(kuò)展到JQ對(duì)象下的插件形式 柴灯;
例:
$().xxx()
$().yyy()
我們可以寫一個(gè)jq中沒有的工具方法卖漫,例如,去掉左空格
$.extend({
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
});
//調(diào)用這個(gè)函數(shù)即可
var str = ' hello ';
alert( '('+$.leftTrim(str)+')' );//(Hello )
再拓展一個(gè)JQ對(duì)象下的方法:拖拽
<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>
可以看一下這兩個(gè)函數(shù)的區(qū)別:
<script>
$.extend({
aaa : function(){
alert(1);
},
});
$.fn.extend({
aaa : function(){
alert(2);
}
});
</script>
<script>
$.aaa(); // 1
$().aaa(); //2
</script>