jQuery(六)

时间:2024-01-18 19:49:38

$下常用方法

$().xxx:只能给jq对象用

$.xxx不仅可以给jq用也可以给原生js用,叫做工具方法

$.type()

<script>
$(function(){
var a= new Date;
//alert($.type(a));//可以判断更多的类型
alert(typeof a);
})
</script>

$.trim()

<script>
$(function(){
var str=' string ';
alert('('+$.trim(str)+')');//去除空格
})
</script>

$.inArray()

<script>
$(function(){
var arr=['q','w','e','r'];
alert($.inArray('e',arr));
//类似与indexOf,在arr中找e,找得到返回2,找不到返回-1
})
</script>

$.proxy()

<script>
$(function(){
/*function show(){
alert(this);
}
//show();
$.proxy(show,document)();*/
/*function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show,document)(3,4);*/
/*function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show,document,3,4)();*/
/*function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show,document,3)(4);*/
//两种传参
/*function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$(document).click($.proxy(show,window,3,4));//点击的时候,this指向window,执行show*/
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$(document).click($.proxy(show,window)(3,4));//页面一打开就执行show
})
</script>

$.noConflict()

<script>
//$也可以用jQuery替换
//noConflict():防止冲突
var zsw=$.noConflict();
var $=1;
zsw(function(){
zsw('body').css('background','red');
})
</script>

$.parseJSON()

<script>
//把传过来的数据解析成json
var str='{"name":"hello"}';
alert($.parseJSON(str).name);
</script>

$.makeArray()

<script>
$(function(){
var oDiv=document.getElementsByTagName('div');//类数组
$.makeArray(oDiv).push();//把类数组转化成真正的数组
})
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>

$.ajax()

jq的插件操作

$.extend:扩展工具方法下的插件形式 $.xxx()

$.fn.entend:扩展到jq对象下的插件形式 $().xxx()

<style>
#div{width:100px;height:100px;background:red;position:absolute;}
</style>
<script>
$.extend({//可以写多个插件
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
aaa:function(){
alert(1);
}
});
$.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;
}
},
aaa:function(){
alert(2);
}
})
</script>
<script>
/*var str=' work ';
alert('('+$.leftTrim(str)+')');*/
$(function(){
$('#div').drag(); $.aaa();
$().aaa();
})
</script>
</head>
<body>
<div id="div"></div>
</body>