jQuery学习总结

1、jQuery 学习总结 (2014-07-22 23:26:16)转载分类： workjQuery ： write less , do more1. window.onload与$(document).ready()区别 window.onload 网页中所有内容加载完毕(包括图片等 元素的所有关联文件)才执行 不能同时编写多个,只能保存对一个函数的引用 ps 如想达到多个函数顺序触发的效果 window . onload = function() one(); two(); $(document) . ready(function() 网页中所有dom结构绘制完毕(与dom关联的东西并没有加

2、载完)就执行 能同时编写多个,在现有行为上追加新行为 简写为: $(function() ); $().ready(function() 注册的事件只要dom就绪就会被执行 load() : jQuery关于页面加载的另一个函数 在元素的onload事件中绑定一个处理函数，如处理函数绑定给window对象， 则会在所有内容加载完后触发，如绑定在元素上，则会在元素加载完毕后触发 $(window).load(function(); /等价于window.onload = function() 2. end() : $("div").addClass('active&#

3、39;) /div添加active属性 .siblings().removeClass('active') /移除div同辈的active属性，此时对象已变成$('div').siblings() .end() /重新返回$('div')对象 .find(':radio').attr('checked',true);3. DOM 文档对象模型 通过document.getElementsByTagName、document.getElementByIdx_x_x 得到的DOM元素就是DOM对象 < div i

4、d='foo' >test< /div > 获得div中的html代码 1. document.getElementByIdx_x_x('#foo').innerHTML; 2.$('#foo').html(); jQuery对象转DOM对象 var $1 = $('#foo') /jQuery对象 var obj = $10 /DOM对象 var obj = $1.get(0) /DOM对象 DOM对象转jQuery对象 var obj = document.getElementByIdx_x_x('f

5、oo'); /DOM对象 var $1 = $(obj) /jQuery对象 4. 判断checkbox是否被选中： DOM: var cb = document.getElementByIdx_x_x('cb'); alert(cb.checked); jQuery: var cb = $('#cb'); alert(cb.is(':checked');5. jQuery在其他js库后导入，所有js库加载完毕 1). jQuery将$ 变量的控制权交给其他js库 jQuery.noConflict(); jQuery(function(

6、) jQuery('#foo').click(function() /使用jQuery代替$ ); ); 2). 自定义一个快捷方式： $j = jQuery.noConflict(); /此时$j相当于$ 的作用 $j(function() $j('#foo').click(function() ); ); 3). 函数内部仍然使用$,同时又避免了和其他js库的$ 冲突 a. jQuery.noConflict(); jQuery(function($) $('#foo').click(function() ); ); b. jQuery.no

7、Conflict(); (function($) / 定义匿名函数，形参为$ $(function() $('#foo').click(function() ); ); )(jQuery); / 执行匿名函数，并传递实参jQuery jQuery库在其他库之前导入 无需调用jQuery.noConflict(); 6. css选择器： < div id='foo' class='foo' >登录< /div > < p >< h2 >段落< /h2 >< /p > 1). 标

8、签选择器 div 2). ID选择器 #foo 3). class选择器 .foo 4). 群组选择器 div,p 5). 后代选择器: p h2 6). 统配选择符 * 7. css字体加粗 font-weight : bold; 8. document.getElementByIdx_x_x('foo').style.color = 'red' 如页面没有id='foo'的元素，会报错 $('#foo').css('color','red'); 页面没有id='foo'的元素，不

9、会报错9. 检查元素是否在页面上存在： $('#foo') /获取的永远是对象，不能作为判断依据 $('#foo').length > 0 /true表示元素存在 $('#foo')0 /转化成DOM对象，true表示元素存在 10. 基本选择器： 选取所有的div,span, id为foo，class为myclass的p标签的一组元素: $("div,span,#foo,p.myclass") 层次选择器： $("div span") : 选取元素里的所有的元素，选择的是后代元素 /改变body内所

10、有div的背景色，后代元素 $("body div").css("background","#bbffaa"); $("div > span") : 选取元素下元素名为的子元素 $('body > div').css("background","#bbffaa"); /改变body内子元素的背景色，一级子元素，不包括子div内部的div元素 $(".one + div") : 选取class为one的下一个div元素(紧跟在cl

11、ass为one的元素的后面的div元素) 等价于 $(".one").next("div"); /改变紧邻class为one的div元素的背景色 $(".one + div").css("background","#bbffaa"); $("#two div") : 选取id为two的元素后面的所有兄弟元素(和id为two的元素同级的div元素) 等价于$("#two").nextAll('div'); /改变id为two元素后面的兄弟di

12、v的背景色 $("#two div").css("background","#bbffaa"); $("#two").siblings("div") : 选取id为two元素的所有同辈div元素，不分前后 过滤选择器：选择器以:开头 1). 基本过滤选择器： :first $("div:first") ：选取所有元素中的第一个div元素 /改变第一个div元素的背景色 $("div:first").css("background",&q

13、uot;#bbffaa"); :last $("div:last") ：选取所有元素中的最后一个div元素 /改变最后一个div元素的背景色 $("div:last").css("background","#bbffaa"); :not $("input:not('.myclass')") ：选取class不是myclass的input元素 /改变class不为one的div元素的背景色 $("div:not('.one')").cs

14、s("background","#bbffaa"); :even $("input:even")：选取索引是偶数的input元素，索引从0开始 /改变索引值为偶数的div元素的背景色 $("div:even").css("background","#bbffaa"); :odd $("input:odd")：选取索引是奇数的input元素，索引从0开始 /改变索引值为奇数的div元素的背景色 $("div:odd").css("

15、;background","#bbffaa"); :eq $("input:eq(1)")：选取索引为1的input元素 :gt $("input:gt(1)")：选取索引大于1的input元素 /改变索引值大于3的div元素的背景色 $("div:gt(3)").css("background","#bbffaa"); :lt $("input:lt(1)")：选取索引小于1的input元素 /改变索引值小于3的div元素的背景色 $(&quo

16、t;div:lt(3)").css("background","#bbffaa"); :header $(":header")：选取网页中所有的标题元素、等 /改变标题元素的背景色 $(":header").css("background","#bbffaa"); :animated $("div:animated")：选取正在执行动画的div元素 /改变正在执行动画的元素的背景色 $(":animated").css(&qu

17、ot;background","#bbffaa"); 2). 内容过滤选择器： :contains(text) $("div:contains('我')"): 选取含有文本我的div元素 /改变含有文本'di'的div元素的背景色 $("div:contains('di')").css("background","#bbffaa"); :empty 选取不包含子元素或文本的空元素 /改变不含子元素(包括文本元素)的div元素的背景色 $(

18、"div:empty").css("background","#bbffaa"); :has(selector) 选取含有selector所匹配的元素的元素 /改变含有class为mini元素的div元素的背景色 $("div:has('.mini')").css("background","#bbffaa"); :parent 选取含有子元素或文本的元素 /改变含有子元素(包括文本元素)的div元素的背景色 $("div:parent")

19、.css("background","#bbffaa"); 3). 可见性过滤选择器 :hidden 选取所有不可见性元素(像display:none,type="hidden",visible:hidden等) /改变所有不可见的div元素的背景色，且3s后完全显示 $("div:hidden").css("background","#bbffaa").show(3000); :visible 选取所有可见性元素 /改变所有可见的div元素的背景色 $("div:

20、visible").css("background","#bbffaa"); 4). 属性过滤选择器 (通过属性获取元素) attribute 选取拥有此属性的元素 /改变有title属性的div元素的背景色 $("divtitle").css("background","#bbffaa"); attribute=value 选取属性值为value的元素 /改变title=test的div元素的背景色 $("divtitle=test").css("bac

21、kground","#bbffaa"); attribute!=value 选取属性值不等于value的元素 /改变title!=test的div元素的背景色,包含没有title属性的div元素 $("divtitle!=test").css("background","#bbffaa"); attribute=value 选取属性值以value开头的元素 /改变title以te开头的div元素的背景色 $("divtitle=te").css("background&quo

22、t;,"#bbffaa"); attribute$=value 选取属性值以value结尾的元素 /改变title以sst结尾的div元素的背景色 $("divtitle$=sst").css("background","#bbffaa"); attribute*=value 选取属性值含有value的元素 /改变title属性值中含有ss的div元素的背景色 $("divtitle*=ss").css("background","#bbffaa"); selector1selector2selector3 /改变含有id属性，切title属性值中含有es的div元素的背景色 $("dividtitle*=es").css("background","#bbffaa"); 5). 子元素过滤选择器 :nth-child(index/even/odd/eq) 选取每个父元素下的第index子元素或