zoukankan      html  css  js  c++  java
  • jquery散记

    感觉jquery的用法都要忘没了,简单捡一下

    1、window.onload与$(document).ready的区别

    (1)编写个数
        window.onload = function(){} //不能同时编写多个,后面的会把前面的覆盖掉
        $(document).ready(function(){}) //能同时编写多个2)window.onload  //无简化写法
           $(document).ready(function(){})
           简写:$(function(){})

    2、jquery对象和Dom对象相互转换

    1)jquery转dom
           $('div')[0]
           $('div').get(0)
    
    (2)dom转jquery
        var dom=document.getElementById('div')
        $(dom)  //变成jquery对象了

    eg:$(document).ready(function(){
    var $cr=$('#cr');
    var cr=$cr[0];
    $cr.click(function(){
    if(cr.checked){alert(123)}
    //或者
    if($cr.is(":checked")){alert(123)}
    })
    })

    3、解决jquery和其他库冲突

    jQuery.noConflict()  //将变量$的控制权移交给prototype.js
    
    jQuery(function(){
        jQuery("p").click(function(){
            alert(jQuery(this).text())
       });
    })
    //可以自定义快捷方式
    var $j=jQuery.noConflict()
    $j(function(){
        $j("p").click(function(){
            alert($j(this).text())
       });
    })

    (function($){
    $('p').click(function(){})
    })(jQuery)

    4、jquery选择器

    1)检查某元素在方也上是否存在
           if($('div')) /$('div').length /$('div')[0]
    
    (2)
      $('*') //获取所有元素
      $("parent>child")   ==>$('#parent').next("div")
      $("prev+next")
      $("prev~siblings") //选取prev元素后面的所有同辈元素  ==>$(.prev').nextAll('div')
    
      $("input:not(.myClass)")  //选取class不是myClass的元素
      $("input:even")
      $("input:odd")
      $("input:eq(1)")  //选取索引等于1
      $("input:gt(1)")  //大于1
      $("input:lt(1)")
      $(":header")  //选取网页中所有的<h1>  <h2>...
      $("div:animated")   //选取正在执行的动画
      $(":focus")
      $("div.contains('我')")  //选取含有文本‘我’的<div>元素
      $("div:empty")  //选取不包含子元素的civ
      $("div:has(p)")  //选取含有<p>标签的div元素
      $("div:hidden")
      $("div:visible")
      $('div[id]')    //选取拥有属性id的元素
      $("div[title='test']")
      $("div[title!=test]")
      $("div[title^=test]")   //选取title以test开头
      $("div[title$=test]")
      $("div[title*=test]")   //含有
      $("div[title|='test']")   //等于test或以test开头的
      $("div[title~="uk"]")  //title用空格分开包含字符uk
      4("div[id][title$='test']")  //既包含id又以test结尾
    
      $("div.one :nth-child(2)")
      $("div.one :first-child")
      $('#form:enabled')   //所有可能的元素
      $('#form:disabled')
      $('input:checked')  
      $('select option:selected')
    
       :input   //选取所有的 input textarea select button
       :text
       :password
       :radio
       :checkbox
       :reset  
       :button   //选取所有button按钮
       :file
       :hidden
     

     5、jquery的事件

        (1)on事件

    $('p').on('click',{foo:'bar'},test)
    function test(event){alert(event.data.foo)}  //取值
    
    $('form').on('submit',false)
    
    $('form').on('submit',function(event){
       event.preventDefault();
    })
    
    $('form').on('submit',function(event){
       event.stopPropagation();
    })

    (2)off

    $('p').off()  //去掉所有绑定事件
    $('p').off('click',function(){})
    
    var foo=function(){}
    
    $('body').on('click','p',foo)
    $('body').off('click','p',foo)

    6、回调函数

       (1)callbacks.add

    var callbacks=$.Callbacks();//使用 callbacks.add() 添加新的回调到回调列表:
    var foo = function(value){
       alert(value)
    }
    callbacks.add(foo);//添加回调函数 
    callbacks.fire('work');//传入参数调用所有列表

    (2)callbacks.disable()   //禁用回调列表中的回调

    callbacks.disable()

    (3)callbacks.empty()  //从列表中删除所有的回调

     var callbacks=$.Callbacks();
    callbacks.add(foo);
    callbacks.add(bar);
    
    callbacks.empty()
    console.log(callbacks.has(foo));//false
    (4)callbacks.fire(arguments)
    使用 callbacks.fire() 用任何已传递的参数调用列表中的回调:

    (5)callbacks.fired(); //使用callbacks.fired() 确定,如果列表中的回调至少有一次被呼叫

       测试是否已调用回调

    (6)callbacks.fireWidth([context][,args]);//访问给定上下文和参数列表的所有回调

    var log =function(val1,val2){
         console.log(val1,val2)
    }
    var callbacks=$.Callbacks();
    callbacks.add(log);
    
    callbacks.fireWith(window,['foo','bar']);   //输出  foo ,bar :相当于执行函数并传递参数

    (7)callbacks.has(callback)  //判断是否含有某个回调

    (8)callbacks.lock() //用 callbacks.lock()锁定一个回调列表,以避免进一步的修改列表状态 :

             //被锁定了,执行不了callbacks.fire('bsggsh')

    (9) callbacks.locked()   //判断是否已经锁定回调列表

    callbacks.lock();
    console.log(clabacks.locked());//true

    (10)callbacks.remove(callbacks);//删除回调或回调集合

    (11)flgs

        once,memeory,unique,stopOnfalse

          

  • 相关阅读:
    解决成本的错误和问题
    DQM Serial Sync Index Program ERROR
    客户信用控制请求
    现有量,在途量,可用量,可保留量
    作为一位Vue工程师,这些开发技巧你都会吗?
    vue父子组件状态同步的最佳方式续章(v-model篇)
    vue-grid-layout拖拽布局实现空位添加新元素
    小程序保存图片到本地
    为 React 开发人员推荐 8 个测试工具、库和框架
    Deno会在短期内取代Node吗?
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/9211544.html
Copyright © 2011-2022 走看看