By welkin

Updated:

Contents

#一、jQuery的工具方法

##工具方法：不仅可以给JQ用，也可以给原生JS用
例：

1
$.xxx()  $.yyy()  $.zzz()

####与上面相似的是给$带括号；这种只能给JQ对象用

1
$().css()  $().html()  $().val()

##1.$.type() : 是判断类型

1
2
3
4
5
var a = null;
	
	alert( typeof a );   //undefined
	
	alert( $.type(a) );  //null

###注意：type()可以判断出更多的类型（数组，json……）

##2.$.trim()：去前后空格

1
2
3
var str = '   hello  ';
	
	alert('('+$.trim(str)+')');    //(Hello)

##3.inArray() : 类似于 indexOf，查找字符所在字符串的位置

##4.proxy() : 改变this指向

1
2
3
4
5
6
function show(n1,n2){
		alert(n1);
		alert(n2);
		alert(this);
	}
	$.proxy(show , document);//将this指向window

###proxy() 也可以传参调用

1
2
3
//以下两种方法均可
$.proxy(show , document,3)(4);
$.proxy(show , document,3,4);

###打开页面点击则调用

1
$(document).click( $.proxy(show,window,3,4)  );

###打开页面则调用

1
$(document).click( $.proxy(show,window)(3,4)  );

#二、jQuery工具方法和Ajax

##1.noConflict() : 防止冲突
因为$在jquery中有很大作用，再给$赋值则会报错，利用该函数可解决

1
2
3
4
5
6
7
8
9
10
//此时不光可以赋值，此时原来$具有的作用已经被miaov代替，所以可以赋值
var miaov = $.noConflict();

var $ = 10;

miaov(function(){
	
	miaov('body').css('background','red');
	
});

##2.parseJSON()：将字符串解析为json

1
2
var str = '{"name":"hello"}';
alert($.parseJSON( str ).name);  //Hello

##3.makeArray()：将类数组转化为数组

$.makeArray(aDiv).push();

#####比如一组div不能使用数组的push方法，当用该函数后，则可以使用

#三、jQuery下使用Ajax

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
	url : 'xxx.php',
	data : 'name=hello&age=20',
	type : 'POST',
	success : function(data){
		alert(1);
	},
	error : function(){
		alert(2);
	}
});

###$.get():Ajax的get提交方式

1
2
3
$.get('xxx.php',{ },function(){
	//传输的地址；{}传输的数据 ；传输成功的回调函数
});

###注意：

1
$().get();   //将JQ对象转化为JS对象

###$.getJSON()：请求json形式

#四、jQuery的插件操作

##1.$.extend : 扩展工具方法下的插件形式；
例：

1
2
$.xxx() 
$.yyy()

##2.$.fn.extend : 扩展到JQ对象下的插件形式 ；
例：

1
2
$().xxx()  
$().yyy()

###我们可以写一个jq中没有的工具方法，例如，去掉左空格

1
2
3
4
5
6
7
8
9
$.extend({
	leftTrim : function(str){
		return str.replace(/^\s+/,'');
	},
});
//调用这个函数即可
var str = '  hello  ';

alert( '('+$.leftTrim(str)+')' );//(Hello   )

###再拓展一个JQ对象下的方法：拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>

###可以看一下这两个函数的区别：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$.extend({
	aaa : function(){
		alert(1);
	},
});
$.fn.extend({
	aaa : function(){
		alert(2);
	}
});
</script>
<script>
$.aaa();  // 1
$().aaa();  //2
</script>

Contents