14个有用的Jquery技巧分享

所属分类: 网络编程 / JavaScript 阅读数: 1068
收藏 0 赞 0 分享

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

复制代码 代码如下:

<!– Grab Google CDN jQuery. fall back to local if necessary –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”><\/script>')</script>

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

12.Jquery Filters

复制代码 代码如下:

<script>
$(‘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”
</script>

注:$.expr[":"]等价于$.expr.filters

13.hover方法

复制代码 代码如下:

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

14.传入属性对象

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

复制代码 代码如下:

$(‘</a>', {
id : ‘someId',
className : ‘someClass',
href : ‘somePath.html'
});

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多