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");