zoukankan      html  css  js  c++  java
  • jQuery使用记录

    jQuery方法获得的集合为类数组对象,可以用一些数组的方法。集合里面的元素为DOM元素,不是jQuery对象。

    jQuery设置css3属性的兼容性写法:

    $(element).css({ 
      "webkitTransform":"xxx", 
      "MozTransform":"xxx",
      "MsTransform":"xxx", 
      "OTransform":"xxx", 
      "transform":"xxx"}
    );

    jquery 1.9版本中移出了hover事件,改为mouseenter和mouseout事件;

    查询元素上面绑定的所有事件的方法:

    jquery._data($(ele)[0],"events"); //返回该元素上绑定的所有事件,每个类型事件维持一个数组,改变该数组顺序即可改变事件触发顺序;委托事件只有在触发时(debugger)才能被查询到
    $.cache[index].events;//通过元素的properties查找事件对象的索引jQuery17208377453013832714:87,然后通过$.cache[87].events可以查看该元素上绑定的所有事件。
    //在事件的handler上右键,选择show function definition查看事件处理函数的定义。
    getEventListeners(targetNode);//chrome在console的API,可以查询元素上面绑定的事件,但只能看到原生方法绑定的回调函数

    命名空间的使用:

    解绑多个事件处理函数中的一个时,必须有函数名(对该函数的引用),即匿名函数不能解绑,此时可以用命名空间处理。

    同一元素上绑定多个事件,要控制触发顺序时,也可用命名空间解决。

    /*解绑多个事件处理函数中的一个*/
    $("selecotr").on("click.myFoo", function(){
        // stuff
    })
    $("selecotr").unbind('[click].myFoo');
    /*控制同一元素上的事件处理函数的触发顺序*/
    $('ele').on('click.doStuff1',function(){doStuff1();});
    $('ele').on('click.doStuff2',function(){doStuff2();});
    $('ele').trigger('click.doStuff2').trigger('click.doStuff1');
    $('ele').trigger('click.doStuff1').trigger('click.doStuff2);

     $().html()可以接收传入DOM节点组成的类数组对象或数组参数,被当做字符串处理,但是节点上绑定的事件会丢失。通过节点移动(append,before等)事件不会丢失。

    remove()方法:该节点及其所有后代节点将同时被删除,返回一个指向已被删除的节点的引用,可在以后继续使用,其绑定的事件会丢失。
    detach()和remove()一样,但其所有绑定的事件、附加的数据都会保留下来。 
    empty()并不是删除该节点,而是清空元素的所有后代节点。

    $("Content").insertBefore("Target")===$("Target").before("Content")在…前插入兄弟元素。

    $(A).append(B)在B内部末尾追加;如果$(A)已经在页面上,则导致$(A)移动到B的尾部,并不是复制A。tr集合排序后可以直接append到tbody。

    $(…).prepend()在…内部的开头追加。

    :nth-child()用法

    基本用法
    :nth-child(n) 选中第n个子元素 //元素从1开始数
    :nth-child 范围用法
    正方向范围 
    :nth-child(n+x) 选中从第x个开始的多个子元素 //n从0开始自动+1,
    例如:nth-child(n+6) ,就相当于让你选中第6个 :nth-child(6) 和其后的所有子元素
    负方向范围
    :nth-child(-n+x) 选中从第1个到第x个子元素
    例如:nth-child(-n+9),就相当让你选中第9个和其之前的所有子元素
    前后限制范围
    nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素


    $(…)获取的结果永远是对象,即使页面上没有找到元素。因此判断某个元素是否存在时,不能使用if( $(…) )来判断,而应该使用if( $(…).length )来判断。0为Falsy。

    parents()从父元素开始匹配一直往上找,结果为大于等于0个对象;closest()从当前元素本身开始匹配一直往上找,找到即停,结果为0或1个对象

    jQuery( selector, [ context ] )
    用法 1 :设置选择器环境
    默认情况下,选择器从文档根部对 DOM 进行搜索。不过,可以为 $() 设置可选的 context 参数。
    $("div.foo").click(function() {
      $("span", this).addClass("bar");
    });
    由于将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 才会得到‘bar’。在内部,选择器环境是通过 .find() 方法实现的,等价于 $(this).find("span")。


    find(exp):从当前集合的后代元素中继续查找
    filter(exp):从当前集合的平级元素中过滤出


    gt(n),lt(n)索引从0开始,不包括本身n
    $("selector").slice(from, to)性能比$("selector:lt")更好

    jQuery.extend(obj)扩展jQuery这个类本身,像$.ajax()就是为jQuery扩展ajax静态方法。

    该方法更多用于扩展某个对象属性,即将多个对象合并到目标对象上(如插件中的默认参数var option = $.extend({},defaultVal, object1 [,objectN]))。若只有一个参数,则合并到jQuery上。
    jQuery.fn.extend(obj) 扩展的是jQuery对象原型的方法:jQuery.fn=jQuery.prototype,任何jQuery对象都可以调用。

    $("selector:visible")不能利用原生DOM,性能不好;改为$("selector").filter(":visible")更好。

    该方法查找的元素不包括:display:none;或width和height都为0;或<input type=hidden/>的元素。

    注意:Elements with (visibility: hidden) or (opacity: 0) are considered visible, since they still consume space in the layout.所以如果父元素visibility:hidden;隐藏,$("selectro:visible")查询仍能包含此元素。

    css属性visibility:hidden;元素在页面不可见,但原来的空间仍保留。
    display:none;元素不可见,且页面中不占任何空间。
    overflow:hidden.溢出隐藏的元素也算visible的元素。

    如何暂时禁用监听的事件函数?
    在ele上设置data属性{isDisable:true},函数内部加判断,fasle时直接return;true时再执行后续代码。

    end():回到最近的一个"破坏性"操作之前,即将链式调用匹配的元素集合变为前一次匹配的状态,可以连续调用end方法。例如在调用css方法后调用end方法继续链式操作。

    $.when($.ajax(1),$.ajax(2)).then(function(xhr1,xhr2){
      …//xhr1为数组,xhr1[0]项为$.ajax(1)返回的数据,xhr1[1]为响应结果的字符串
    })



    select选项
    1:var options=$(" option:selected");   //获取选中的项
    2:var value=options.val();        //获取选中项的值 ==$("select").val();
    3:var text=options.text();        //获取选中项的文本,要通过选项获取;通过select只能获取选中的val值,不能获取文本
    4.$('select').val('xxx');        //直接选中value为xxx的选项。== $('select').find('[value=xxx]').prop('selected',true)
    此时虽然值改变了,但不会触发change事件(需要失去焦点时才触发)。可以通过$('select').trigger('change',{key:value})手动触发change事件。

    input:checkbox点击

    如果用鼠标点击或在其获得焦点时按空格,会先切换其checked选中状态再触发click事件;而通过jQuery用代码触发click事件,则会先触发click事件再切换状态。冲突的解决方法:
    1.在click的监听函数中加一个异步,等checked属性改变之后再做判断
      setTimeout(function() { $(self).is(':checked'); ... }, 0);
    2.改用onChange 方法(原生表单元素都支持)
    3.不使用Jquery对象的方法进行触发,而是原生DOM的方法: document.getElementById('#xxx').click() ===$('inputSelector').get(0).click();

    //选中页面中指定的按钮

    $("input[type='radio'][name=‘xxx’][value='xxx']").prop("checked",true);
    //获取某个单选按钮的值
    $('input[name="xxx"]:checked').val();


    全局ajax事件
      $(document).ajaxSuccess(function(event, jqXHR, ajaxOptions, data){

        …//jqXHR包含了plainObject data;可以通过ajaxOptions判断需要特别处理的ajax请求

      })
    全局方法,监听每个通过jquery发送的ajax请求。先触发local的success方法,再触发全局的success方法。通过global:false可以设置为不触发全局的AJAX事件。
    $( document ).ajaxStop(function() { …});//当页面所有的ajax完成时触发回调函数。可以通过global:false禁用。
    全局回调函数的注销:
      $(document).ajaxStop(function () {
        $(this).unbind("ajaxStop");  //可以注销
          //Some code
      });

    定义一个轮询,判断需要使用的变量是否存在。如果不存在,就继续轮询,如果变量存在则停止轮询。

    (function polling(){
        if ("undefined" == typeof (xxx) ){
            setTimeout(polling,300);
        }else{
            fun(...);
        }
    }());    

    $('…').click();//用代码触发事件,相当于直接调用回调函数,仍在当前环境执行栈,后续其他代码需要等click处理函数执行完才能执行。jQObj.trigger('xxx')同上。

    $(‘ele’).on('click',function(){
        var oldTime=new Date();
        while(new Date()-oldTime<5000){};
        console.log('clicked')
    });
    console.log("start");
    $('ele').click();
    console.log("end");
    //输出 start、clicked、end;

    页面上有多个相同的id时,直接搜总会搜到第一个。但通过限定范围,虽然可以搜到后面那个同id,但是应该用前缀+计数命名法避免同id。

    标签书写不规范,浏览器会帮助修改,不影响显示效果。但jQuery是从DOM树上获取信息的,反而会因为浏览器的修正而增加修复bug的难度。比如label标签不闭合,不影响显示,但通过text()获取的就是错误的数据,会获取到最后一个闭合标签那。

    对象的方法也是对象的属性,可以通过.方法名访问,也可以通过中括号内字符串访问,即['方法名']:
      $('#js-cb .btn-m')[ expression ? 'hide' : 'show'](); 更简洁的写法。

     $("selector").text()获取的文本会包含html标签中的空格,需要用trim()方法处理。

    window.onload() vs $(document).ready()
    window.onload是原生js函数,指页面包含的图片等所有资源都加载完成时才触发的load事件,比较晚。
    $(document).ready()是jQuery中的函数,在DOM树构建完成后就触发,和图像、css或js文件是否加载完毕无关。此时js已经可以操作DOM树了,可交互时间提前。
    实际上jQuery内部是调用了H5的DOMContentLoaded事件。对于低版本IE,则是用readystatechange事件近似的模拟DOMContentLoaded事件。

    以上皆为个人理解,如有错误之处,欢迎留言指正。
  • 相关阅读:
    宿主机( win 7 系统) ping 虚拟机VMware( cent os 6.6 ) 出现“请求超时”或者“无法访问目标主机”的解决方法
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 21 合并两个有序链表
    Java实现 LeetCode 21 合并两个有序链表
    Java实现 LeetCode 21 合并两个有序链表
  • 原文地址:https://www.cnblogs.com/kevin2chen/p/6435922.html
Copyright © 2011-2022 走看看