视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
14个有用的Jquery技巧分享_jquery
2020-11-27 21:31:43 责编:小采
文档


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
代码如下:


!window.jQuery && document.write(‘<\/script>')

如果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方法

代码如下:
$(‘#someElement').hover(function() {
//在这里可以使用toggle方法来实现滑过和滑出的效果
});

14.传入属性对象

当创建一个元素的时候,Jquery1.4可以传入一个属性对象
代码如下:
$(‘', {
id : ‘someId',
className : ‘someClass',
href : ‘somePath.html'
});

甚至是Jquery指定的属性或事件如text, click

下载本文
显示全文
专题