初识jQuery之jQuery的工具方法和Ajax以及jQuery的插件操作（六）

一、jQuery的工具方法

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

例：

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

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

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

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

var a = null;
	
alert( typeof a );   //undefined
	
alert( $.type(a) );  //null

注意：type()可以判断出更多的类型（数组，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() 也可以传参调用

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

打开页面点击则调用

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

打开页面则调用

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

二、jQuery工具方法和Ajax

1.noConflict() : 防止冲突

因为$在jquery中有很大作用，再给$赋值则会报错，利用该函数可解决

//此时不光可以赋值，此时原来$具有的作用已经被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()：将类数组转化为数组

$.makeArray(aDiv).push();

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

三、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(){
	//传输的地址；{}传输的数据 ；传输成功的回调函数
});

注意：

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

$.getJSON()：请求json形式

四、jQuery的插件操作

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

例：

$.xxx() 
$.yyy()

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

例：

$().xxx()  
$().yyy()

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

$.extend({
	leftTrim : function(str){
		return str.replace(/^\s+/,'');
	},
});
//调用这个函数即可
var str = '  hello  ';

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

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

<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>

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

<script>
$.extend({
	aaa : function(){
		alert(1);
	},
});
$.fn.extend({
	aaa : function(){
		alert(2);
	}
});
</script>
<script>
$.aaa();  // 1
$().aaa();  //2
</script>