14个有用的Jquery技巧分享


Posted in Javascript onJanuary 08, 2015

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
Javascript 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
php 数据结构之链表队列
2017/10/17 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
python批量提取word内信息
2015/08/09 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
internal修饰符起什么作用
2013/12/16 面试题
网络工程师的自我评价
2013/10/02 职场文书
董事长职责范文
2013/11/08 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
优秀食品类广告词
2014/03/19 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书