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