jquery的简介与优点这里不做赘述,用过的都知道,我们都懂的。
值得一提的是,jquery对象与普通dom对象的区别:
dom对象,即是我们用传统方法获取的对象(javascript);jquery对象,是我们用jquery选择器获取的对象。
document.getElementById("id");//dom对象
$("#id");//jquery对象
jquery对象可以使用jquery定义的方法
$("#foo").html();//获取id为foo的元素内的html代码
上面的代码等同于:document.getElementById("foo").innerHTML;
jquery对象和dom对象的相互转换:jquery对象其实是一个数组对象,取其每一个数组元素就是一个dom对象。
$("#msg")[0],$("#msg").get(0)都是普通dom对象;$(document.getElementById("id"))则为jquery对象。
jquery有一特点,其同一函数实现get与set方法。
也可以对jquery对象连续调用不同的方法:
1 $("#id").click(function({2 alert($(this).html())3 }).mouseover(function(){4 alert("mouse over")5 });
jquery中几个自定义的事件:
hover(f1,f2):一个鼠标悬停事件的方法(鼠标移动到这个对象以及离开这个对象)。当鼠标移动到这个对象的时候,会触发第一个函数,当鼠标离开这个对象的时候,会触发第二个函数。
1 $("tr").hover(function(){2 $(this).addClass("curr");3 },function(){4 $(this).addClass("select");5 });
toggle(f1,f2);每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发第一个函数,当再次点击同一元素时,触发第二个函数。
1 $("p").toggle(function(){2 $(this).addClass("selected");3 },function(){4 $(this).removeClass("selected");5 });
bind(eventtype,fn);unbind(eventtype):事件的绑定与解绑。
1 //为每个p元素添加单击事件2 $("p").bind("click",function(){alert("i am p")});3 //删除p元素上所有事件4 $("p").unbind();5 //删除p元素上的单击事件6 $("p").unbind("click");
$.each(obj,fn);通用的迭代函数。
1 //输出每个li元素的文本 2 $("button").click(function(){ 3 $("li").each(function(){ 4 alert($(this).text()) 5 }); 6 }); 7 //迭代数组 8 $.each([0,1,2],function(i,n){ 9 alert("item #"+i+":"+n)10 });11 //等价于12 var arr=[0,1,2];13 for(var i=0;i