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

          

  • 相关阅读:
    关于js计算非等宽字体宽度的方法
    [NodeJs系列]聊一聊BOM
    Vue.js路由管理器 Vue Router
    vue 实践技巧合集
    微任务、宏任务与Event-Loop
    事件循环(EventLoop)的学习总结
    Cookie、Session和LocalStorage
    MySQL 树形结构 根据指定节点 获取其所在全路径节点序列
    MySQL 树形结构 根据指定节点 获取其所有父节点序列
    MySQL 创建函数报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creators
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/9211544.html
Copyright © 2011-2022 走看看