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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php中autoload的用法总结
2013/11/08 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
详解Python中的文本处理
2015/04/11 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
毕业设计计划书
2014/01/09 职场文书
党员服务承诺书
2014/05/28 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
python编程项目中线上问题排查与解决
2021/11/01 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
golang连接MySQl使用sqlx库
2022/04/14 Golang