首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery文档札记

2012-11-22 
jquery文档笔记要添加函数到页面中的某个元素时,必需等待该元素加载完成后,否则会添加不成功。?等待文档加

jquery文档笔记

要添加函数到页面中的某个元素时,必需等待该元素加载完成后,否则会添加不成功。

?

等待文档加载完毕的方法window.onload=function(){};此方法的缺点是必需等待所有图片、广告也加载完后才会调用。另一个解决办法是使用jquery的$(document).ready(function(){};)方法。

?

选择某类标签的所有元素的方法是$("tagname")。

?

使用event.preventDefault()方法可以阻止默认的行为。

?

使用$("").addClass("classname")/removeClass("classname")方法可以为某元素添加/移除样式;

?

$(this)是对当前元素的引用,使用$(this).hide("slow"),可以使用一种渐变的方式引藏元素。

?

回调就是把一个方法以参数的形式传到另一个方法中。例如$("a").do("url",myfun)。这里要注意,被传的方法不能带括号和参数,如果带了,即传到方法内的是被传方法运算后的结果。以下的做法是错误的:$("a").do("url",myfun("param"))。如果一定要传带参数的方法,可以使用匿名方法。例如:$("a").do("url",function(){myfun("param")}));

?

选择一个带ID的元素的方式:$("#id")。返回零或一个元素。

?

选择一个带class的元素的方式:$(".classname")。返回零或多个元素。

?

把一个元素转化为js变量:var myElement=$("#id");

?

element.is(".classname")方法用于测试一个元素是否有一个class。常用代码:if($("#elementId).is('.classname'))$('#id').show();也可以使用hasClass方法:$('id').hasClass("classname")。语法上,两者的区别在于前者输入的参数带.而后者的不带。

?

element.is方法也可以用于测试一个元素是否隐藏。常用代码if($('#id')is(':hidden/:visible'))$('#id').show();

?

可以使用length属性测试元素是否存在。例如if($('#id').length)$('#id').show();

?

一般情况下不需要检查元素是否存在。例如下面的代码$("id").show()。即使元素不存在,也不会报错。

?

在使用$()方式选择元素时 ,如果元素ID中有:或.号,需要用转义字符。例如:$("#som\\.d")。也可以使用以下方法转换:"#"+myid.replace(/(:|\.)/g,"\\$1");

?

让一个元素enabled/disabled的代码:$("#id").attr("disabled","disabled")/$("#id").removeAttr("disabled");

?

让一个元素checked/unchecked:$("#id").attr("checked","checked";/$("#c").removeAttr("checked")。

?

获取一个选中元素的值的方法$(#myselect").val();获取文字$("#myselect option:selected).text();

?

获取某标签下的第x个元素并设值的方法var $thirdlink=$(this).find('li a').eq(2);var linktext=$thirdlink.text().replace('foo','bar');$thirdlink.text(linktext)

?

调用ajax的方式:$.ajax(url:"",success:function(response){},error:function(xhr){})。除了直接用success/error还可以用complete代替。

?

由于dom的事件模型是冒泡的,所以不一定要把事件加到目标对像上,取而代之的是把事件加到body中,然后方法中判断事件的目标是否目标对像,示例代码:$(document).ready(function(){$("body").click(function(event){if($event.target).is("h3")){$(event.target.toggleClass("highlighted");}})});需要注意的是两种情况,一种是对一个元素绑定一个方法两次,另一种是一个元素被绑定方法后,该元素被重新加载。

?

因为只有block元素才能有自定义的height和width,所以在使用渐变方法时,js会自动把元素转化为block元素。

?

对于集合元素,使用get(n)与eq(n)的区别是前者返回dom元素,后者返回jquery对像。

?

jquery类型对像本身是一种集合,把jquery对像转换为dom对像的方法是jqueryobject[0]。

?

对于jquery对像中的html()/text()/height()/width()/val()/click(),如果传入值,即是付值,如果不传值,那就返回值。

?

jquery对像的each方法就是迭代。在里面使用i获取序号,this代表当前对像。例如$("tr").each(function(I){this.style.backgroundColor=['#ccc,"#fff"][i%2]})

?

为jquery扩展方法$.extend({min:function(){}})。

?

jquery对像支持链式方法调用。

?

jquery对像中的自定义事件:hover(f1,f2)/ready(document)/toggle(f1,f2)/trigger("click")/bind(eventtype,f1)/unbind(eventtype)。

?

hover中的f1为鼠标进入时调用,f2为离开时调用,ready为html全部载入后调用(与onload的区别是前者不需要等待图片),toggle的作用是在click中切换两个函数的执行。trigger是为对像触发事件。bind/unbind为元素绑定或删除绑定事件。

?

如果与其它类库配合使用时防止方法冲突,可以在调用jquery对像前使用jQuery.noConflick()。然后使用jQuery代替$。这样其它类库依然作用。

?

向某元素插入一个html页面:$("#id").load("stats.html");

?

热点排行