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