当前位置：Gxlcms > JavaScript > 14个有用的Jquery技巧分享_jquery

14个有用的Jquery技巧分享_jquery

时间：2021-07-01 10:21:17 帮助过：20人阅读

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）

代码如下:

var j = jQuery.noConflict();
j(‘#someDiv').hide();
// The line below will reference some other library's $ function.
$(‘someDiv').style.display = ‘none';

方法2（传入参数Jquery）
代码如下:

(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);

方法3（通过ready方法）
代码如下:

jQuery(document).ready(function($) {
// $ refers to jQuery
});

6.简化代码

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

7.使用Ajax的方法

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

8.访问原生的属性和方法
比如获取元素id的方法有

代码如下:

// OPTION 1 – Use jQuery
var id = $(‘#someAnchor').attr(‘id');
// OPTION 2 – Access the DOM element
var id = $(‘#someAnchor')[0].id;
// OPTION 3 – Use jQuery's get method
var id = $(‘#someAnchor').get(0).id;
// OPTION 3b – Don't pass an index to get
anchorsArray = $(‘.someAnchors').get();
var thirdId = anchorsArray[2].id;

9.使用PHP来检查Ajax请求

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

代码如下:

function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest';
}

来检查是不是Ajax请求，在一些禁用Javascript的情况下可能会用到

10.Jquery和$的关系

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

11.条件加载Jquery

代码如下: