14个有用的Jquery技巧分享

1.通过方法返回Jquery对象实例

用 var someDiv = $(‘#someDiv').hide(); 代替 var someDiv = $(‘#someDiv'); someDiv.hide();

2.使用find来查找

用 $(‘#someDiv').find(‘p.someClass').hide(); 代替 $(‘#someDiv p.someClass').hide();因为可以不必触发Jquery的Sizzle引擎,同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符

3.不要滥用$(this)

用 $(‘#someAnchor').click(function() { alert( this.id ); }); 代替 $(‘#someAnchor').click(function() {alert($(this).attr(‘id'));});

4.ready的简写形式

用 $(function() { }); 代替 $(document).ready(function() {});

5.让你的代码安全

方法1(使用noConflict)

代码如下:
display = ‘none';
方法2(传入参数Jquery)
代码如下:
方法3(通过ready方法
代码如下:

6.简化代码

用each代替for,使用数组保存临时变量,使用document fragment,这其实和写原生的Javascript需要注意的一样。

7.使用Ajax的方法

Jquery提供了get getJSON post ajax这些有用的ajax方法

8.访问原生的属性方法

比如获取元素id的方法
代码如下:
.someAnchors').get(); var thirdId = anchorsArray[2].id;

9.使用PHP来检查Ajax请求

通过使用xhr.setRequestHeader(“X-Requested-With”,“XMLHttpRequest”); 服务器端如PHP就可以通过

代码如下:
来检查是不是Ajax请求,在一些禁用Javascript的情况下可能会用到

10.Jquery和$的关系

在Jquery代码的最下面,可以看到下面的代码 window.jQuery = window.$ = jQuery; $其实就是Jquery的一个shortcut

11.条件加载Jquery

代码如下:
如果CDN没有下载到Jquery,则从本地读取

12.Jquery Filters

代码如下:
$(‘p:first').data(‘info',‘value'); // populates $'s data object to have something to work with $.extend( jQuery.expr[":"],{ block: function(elem) { return $(elem).css(“display”) === “block”; }, hasData : function(elem) { return !$.isEmptyObject( $(elem).data() ); } } ); $(“p:hasData”).text(“has data”); // grabs paras that have data attached $(“p:block”).text(“are block level”); // grabs only paragraphs that have a display of “block”
注:$.expr[":"]等价于$.expr.filters

13.hover方法

代码如下:
在这里可以使用toggle方法来实现滑过和滑出的效果 });

14.传入属性对象

当创建一个元素的时候,Jquery1.4可以传入一个属性对象

代码如下:
',{ id : ‘someId', className : ‘someClass', href : ‘somePath.html' });
甚至是Jquery指定的属性或事件如text,click

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...