jQuery ： write less , do more

1.

window.onload与$(document).ready()区别











window.onload


















网页中所有内容加载完毕(包括图片等 元素的所有关联文件)才执行

















不能同时编写多个,只能保存对一个函数的引用

















ps 如想达到多个函数顺序触发的效果






















window . onload = function(){




























one();



























two();





















}












$(document) .

ready(function(){})

















网页中所有dom结构绘制完毕(与dom关联的东西并没有加载完)就执行

















能同时编写多个,在现有行为上追加新行为

















简写为: $(function(){ });





























$().ready(function(){})
















注册的事件只要dom就绪就会被执行












load() : jQuery关于页面加载的另一个函数




















在元素的onload事件中绑定一个处理函数，如处理函数绑定给window对象，

则会在所有内容加载完后触发，如绑定在元素上，则会在元素加载完毕后触发



















$(window).load(function(){});


//等价于window.onload = function(){}





2.

end() :















$(“div”).addClass(‘active’)





//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 id=’foo’ >test< /div >




















获得div中的html代码

























1. document.getElementByIdx_x_x(‘#foo’).innerHTML;

























2.$(‘#foo’).html();


















jQuery对象转DOM对象























var $1 = $(‘#foo’)



//jQuery对象
























var obj = $1[0]






//DOM对象























var obj = $1.get(0)


//DOM对象

















DOM对象转jQuery对象

























var obj = document.getElementByIdx_x_x(‘foo’);




//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(){





































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.noConflict();



































(function($){












// 定义匿名函数，形参为$










































$(function(){





















































$(‘#foo’).click(function(){



















































});



































});





























})(jQuery);




// 执行匿名函数，并传递实参jQuery



















jQuery库在其他库之前导入























无需调用jQuery.noConflict();




6.

css选择器：














< div id=’foo’ class=’foo’ >登录< /div >















< p >< h2 >段落< /h2 >< /p >
















1).

标签选择器




























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.

检查元素是否在页面上存在：














$(‘#foo’)










//获取的永远是对象，不能作为判断依据














$(‘#foo’).length > 0



//true表示元素存在














$(‘#foo’)[0]











//转化成DOM对象，true表示元素存在

10.






基本选择器：















选取所有的div,span, id为foo，class为myclass的p标签的一组元素:






















$(“div,span,#foo,p.myclass”)










层次选择器：














$(“div span”) : 选取