【前端学习笔记】JQuery事件细节、JQ进阶常用方法

事件细节———————————————————————

ev直接使用，不需要兼容操作

ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)

ev.which(能监控鼠标键值) : ev.keyCode

ev.preventDefault(); //阻止默认事件

ev.stopPropagation(); //阻止冒泡

事件函数结尾return false;既能阻止冒泡又能阻止默认事件

one()

    $(‘div‘).one(‘click‘,function(){}); //事件只执行一次

JQ进阶方法—————————————————————–

get()

        $(‘#div‘).get(0).innerHTML
        //将JQ取的元素转化为原生JS识别的写法，

    get()取的是获取的一组元素
    get(i)取的是获取的一组元素第i个

    不过在JQ下也有length这个属性。
    JQ取的一组元素也能通过下标[i]变成原生JS识别的元素
    如：

        $(‘li‘)[i].style.background = ‘red‘;

outerWidth()
    针对隐藏元素和参数true

    outerWidth(false)相当于原生JS的offsetWidth
    但offsetWidth不能获取隐藏元素的值

    outerWidth()能获取隐藏元素值

text()
    $(‘div‘).html();只能获取一组元素第一个元素的html内容

    而$(‘div‘).text();获取的是该组元素所有元素的文本内容(不含标签)

remove()
    $(‘div‘).remove();返回的是被删除的这个元素对象，以方便下次
    再添加这个元素。另外这个方法执行后会移除调用这个方法的元素
    的所有绑定事件。

detach()
    跟remove()方法一样，但是会保留这个元素删除前的所有操作行为。

$(function(){});/$(document).ready(function(){});
    和原生JS的window.onload=function(){}相似

    区别是onload要等所有html结构(例如图片)加载完，才能执行代码

    $(function(){});是等dom加载完就执行里面的代码，性能要好

    高版本的浏览器用 DOMContentLoaded

parents()
    获取元素的所有祖先节点
    parents(‘div‘)还可以筛选所有祖先节点中的指定节点

closest()
    获取最近的指定祖先节点(包括当前元素自身)
    closest(‘div‘)筛选最近一个的指定祖先元素，
    和parents()的区别是只能找到一个元素

siblings()
    获取所有的指定兄弟节点 

nextAll()
    获取元素所有后面的指定兄弟节点  

prevAll()
    获取元素所有前面的指定兄弟节点  

parentsUntil()
    向上获取每层祖先节点直到指定祖先节点位置

nextUntil()  
    获取元素所有后面的兄弟节点，直到指定节点结束

prevUntil()
    获取元素所有前面的兄弟节点，直到指定节点结束

clone()
    克隆节点。克隆出来的节点没有之前的绑定事件
    加一个参数true可以将原节点的绑定事件也克隆出来

wrap() 
    $(‘span‘).wrap(‘<div>‘)给元素包裹指定标签 

wrapAll() 
    $(‘span‘).wrapAll(‘<div>‘)给找到的元素整体包裹指定标签
    会把其他非span的元素排除在wrap外，使用时要注意

wrapInner()
    $(‘span‘).wrap(‘<div>‘)给元素内容包裹指定标签 

unwrap()
    删除包装(父级)
    注意，不包括body

add()
    $(‘div‘).add(‘span‘).css()
    元素合并操作(不是把span加到div里)  

slice()
    $(‘li‘).slice(0,4);
    一组元素中取下标范围[a,b)的元素返回 a=b返回空

serialize() 
    $(‘form‘).serialize()
    对表单数据进行序列化(串联化),形成一个字符串

serializeArray()
    $(‘form‘).serializeArray()
    对表单数据进行序列化,形成一个JSON数组

animate()
    运动
    第一个参数:json{属性:值}
    第二个参数:时间(运动快慢) 默认400ms
    第三个参数:运动形式 默认swing(慢快慢)。  linear(匀速)
    第四个参数:回调函数，运动完以后要做的事(也可以用链式调用)

stop()
    默认:只会阻止当前运动
    一参:true 阻止所有后续的运动
    二参:true 直接使元素到达当前运动目的地位置

finish()
    立即停止到指定的所有目标点。

delay(100)
    链在animate后，延时运动、

delegate()
    事件委托

$(‘ul‘).delegate(‘li‘,‘click‘,function(){
            this.style.background = ‘red‘;
        });

undelegate()
    阻止事件委托

        $(‘ul‘).undelegate();

trigger()
    主动触发事件

        $(‘#div‘).trigger(‘click‘);

事件细节：
    事件传参

        $(‘#div‘).on(‘click‘,{name:‘hello‘},function(ev){

            alert(ev.data.name);//获取外部传进来的参数
            alert(ev.target);  //获取操作源(全兼容)
            alert(ev.type);    //获取事件类型
        });

$下常用方法(工具方法)——————————————————-

$().fn() 只能给JQ对象用

$.xxx() $.yyy() $.zzz() : 不仅能给JQ用还能给原生JS用，叫做工具方法

$.type()
    判断类型，返回字符串
    和原生JS typeof方法不同的是，该方法可以返回更细的类型
    对object细分了 regexp date array json等类型

$.trim()
    $.trim(str) 去str的前后空格

$.inArray()
    $.inArray(‘b‘,arr);
    类似于字符串方法indexOf();

$.proxy()
    改变this指向

        function show(n1,n2){
            alert($(this));
            alert(n1);
            alert(n2);
        }
        $.proxy(show,documnet,3,4)();
        $.proxy(show,documnet)(3,4);

        /*一参是方法，二参是指向的对象
        而该函数的形参可以写在三参及以后或者后面的执行括号内
        方便在非立即执行的时候传入参数。
        例如:*/
        function show(n1,n2){}
        $(document).click( $.proxy(show, $(#div1),3,4) );

$.noConflict()
    防止命名冲突
    var _$ = $.noConflict();
    可以用_$代替$了

$.parseJSON()
    将字符串解析成JSON

$.makeArray()
    把类数组转化为数组,使其可以使用数组方法
    例如
    类数组 var aLis = $(‘li‘);

        $.makeArray(aLis).push($(‘#li1‘));

ajax for JQ—————————————————————–

    //参数为json形式
    $.ajax({
        url : ‘xxx.php‘,
        data : ‘name=loe&age=20‘,
        type : ‘POST‘,
        comtentType : ‘‘,
        success : function(data){//请求成功以后的回调函数
            $.parseJSON(data)
        },
        error : function(){
            //...
        }
    });

    //抽象出来的方法
    $.get(‘xxx.php‘,{数据},function(){
        //成功的回调函数
    }); 
    $.post(‘xxx.php‘,{数据},function(){
        //成功的回调函数
    });

    $.getJSON(‘xxx.php?callback=show|?‘,function(){

    });//?代表随机返回函数名字
    functuin show(data){
        //处理JSONP返回数据
    }

JQ插件操作———————————————————-

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

    写法如下

        $.extend({
            leftTrim : function(){},
            rightTrim : function(){}
        })

$.fn
    $.fn.extend
    扩展到jq对象上的插件形式$().xxx() $().yyy()

    写法:

    $.fn.extend({
            name : function(){
                $(this)//代表调用这个方法的JQ对象。
            }

        })