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

      

 

posted @ 2018-06-22 00:11  豆豆飞  阅读(122)  评论(0编辑  收藏  举报