一些实用的 jQuery 技巧
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果。
本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery。
Tip 1:使用最新版本
jQuery每一个新版本都会包含一些性能优化和bug修复,为了便于升级,你可以使用Google CDN服务托管的jQuery库。有以下两种方式:
包含特定版本
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
包含某个分支的的最新版本(此方法中jQuery版本的缓存期限只有1小时,不建议用于生产环境)
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
Tip 2:使用简单的选择器
之前获取DOM元素通常使用jQuery的getElementById()、getElementsByTagName()和getElementsByClassName()方法。如今,所有主流浏览器都已经支持querySelectorAll(),该方法能够理解CSS查询器。你应该尝试使用这个更优的方式。
- $('li[data-selected="true"] a') // 看起来不错,但是慢
- $('li.selected a') // 更好的方法
- $('#ElementID) // 最好
Tip 3:缓存jQuery的结果
如果你没有别的选择,只能使用DOM选择器,那么你应该缓存jQuery的结果。例如:
- var selectedListItem = $('li[data-selected="true"]a')
现在,jQuery的结果已经被缓存到变量“selectedListItem”,该变量可以多次使用而不会影响性能。
Tip 4:使用jQuery扩展选择器的注意事项
jQuery提供了大量的扩展选择器,比如:visible、:hidden、:animated等,而它们不是有效的CSS3选择器。如果使用这些选择器,将不能再使用querySelectorAll()方法。为了避免这种情况,你可以先选择元素,然后再过滤。例如:
- $('a.button:hidden'); //则不能使用querySelectorAll()
- $('a.button').filter(':hidden'); //最佳方案
上述结果是相同的,但是第2个更快。
Tip 5:像数组一样使用jQuery对象
运行一个选择器得到的结果是一个jQuery对象。但是,通过jQuery可以使结果看起来更像一个数组,你可以定义索引元素和长度。
- var buttons = $('#navigation a.button'); //Selecting all the navigation b //Selecting all the navigation buttons
- // We can loop though the collection:
- for(var i=0;i<buttons.length;i++){
- console.log(buttons[i]); // A DOM element, not a jQuery object
- }
如果你想实现更高的性能,可以使用一个简单的循环(或while语句)来代替$.each(),这样速度会比之前快几倍。
Tip 6:检查一个元素是否存在
确定一个元素集合是否存在或是否包含元素的唯一方法是检查元素的长度。
- If (buttons.length){ // True only if buttons contains elements
- // Do something }
Tip 7:创建jQuery空对象
创建一个新的jQuery对象有时开销会比较大。不过你可以先创建一个空对象,然后通过add()填充它。
- var container = $([]);
- container.add(another_element);
Tip 8:统计Web页面中DOM元素数
如果页面中包含大量元素或内容,则浏览器渲染所需的时间也更多。你可以在控制台中执行以下语句,来统计页面中的DOM元素数:
- console.log($('*').length);
如果所得数值较小,则页面渲染较快。你可以通过删除多余的标记和不必要的元素来进行优化。
Tip 9:把你的代码变成jQuery插件
如果你希望将你的jQuery代码封装成一个jQuery插件,以便以后重用,你可以通过以下代码来创建:
- function($){
- $.fn.yourPluginName = function(){
- // Your code goes here
- return this;
- };
- })(jQuery);
Tip 10:本地存储
Local storage是一个用于在客户端上存储信息的API。使用时,你只需将你的数据作为localStorage全局对象的一个属性:
- localStorage.someData = "This data is going to persist across page refreshes and browser restarts";
旧的浏览器不支持该API,不过有各种jQuery插件可以作为替代方案。这些插件在localStorage不可用时提供了其他存储方案。下面是一个例子:
- // Check if "key" exists in the storage.
- var value = $.jStorage.get("key");
- if(!value){
- // if not - load the data from the server
- value = load_data_from_server();
- // and save it
- $.jStorage.set("key",value);
Tip 11: Live事件处理
为任何匹配选择器的元素设置一个事件处理程序,即使它在初始页面加载后被添加到DOM:
- $('button.yourClassName').live('click', yourFunctionName);
这样,通过ajax或javascript加载元素时,事件处理程序会自动为这些元素进行设置:
- $('button.yourClassName').die('click', yourFunctionName);
尽管与常规事件相比,live事件处理程序有一些局限性,但它还是适用于大部分情况。Live事件支持jQuery 1.3及以上版本。
Tip 12:克隆一个对象
使用.clone()方法克隆JavaScript中的DOM对象:
- // Clone the DIV
- var cloned = $('#yourdivID').clone();
.clone()方法无法克隆JavaScript对象。如果要克隆JavaScript对象,你可以使用下面的代码:
- // Shallow copy
- var newObject = jQuery.extend({}, oldObject);
- // Deep copy
- var newObject = jQuery.extend(true, {}, oldObject);
Tip 13:测试隐藏元素
通过.hide()和.show()方法可以改变元素的可见性。使用下面的代码可以检测元素是否可见:
- if($(element).is(":visible") == "true") {
- //The element is Visible
- }
Tip 14:找出最近的父DIV
如果你想找出某个元素的父级DIV(无论该DIV是否有ID),那么你可以使用这个jQuery选择器:
- $("#yourControl").closest("div");
英文原文:jQuery Best Practices
一些实用的 jQuery 技巧相关推荐
- 了解jQuery技巧来提高你的代码
jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性.我认为jQuery的大多数用户更趋向于使用jQuery ...
- jquery技巧总结-转载
jquery技巧总结 一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优 秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.moot ...
- 风云流水 jQuery技巧总结 (转)
jQuery技巧总结 (转) 一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.m ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- Python五种实用的小技巧
本文经"机器之心"授权,禁止二次转载. 作者:Peter Nistru 机器之心编译 参与:思 最开始学 Python 时,如果我能掌握这些方法,那么代码看起来会更加优美. 在本文 ...
- html制作nba网页,NBA篮球_实用电脑小技巧:通俗解答html 自己动手建一个非常简单的网页_沪江英语...
沪江小编:对于很多人来说,电脑应该算是使用频率最高的工具了,可是你真的会用电脑么?实用电脑小技巧,用最简单明了的方式给你无比有趣的电脑使用新体验. html是什么,什么是html通俗解答: 通俗的讲h ...
- 人人须知的 jQuery 技巧
本文讲的是人人须知的 jQuery 技巧, 这里收集了一些简单的窍门,助你玩转 jQuery. 检查 jQuery 是否加载 返回顶部按钮 预加载图片 判断图片是否加载完成 自动修复失效图片 鼠标悬停 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- 教师节html源码,教师节_实用电脑小技巧:通俗解答html 自己动手建一个非常简单的网页_沪江英语...
沪江小编:对于很多人来说,电脑应该算是使用频率最高的工具了,可是你真的会用电脑么?实用电脑小技巧,用最简单明了的方式给你无比有趣的电脑使用新体验. html是什么,什么是html通俗解答: 通俗的讲h ...
最新文章
- 搭建远程linux,如何在远程Linux服务器上搭建Nginx?
- 【NLP】Kaggle从零到实践:Bert中文文本分类
- ListViewAutoScrollHelper
- asp.net页面绑定数据的方式-----未完待续
- solve det(I + uv^t)
- 我喜欢的 Linux shell 玩法
- android用户头像保存,Android的登陆注册(sharedpreferences和SQLite保存以及头像上传显示...
- 冰点还原离线激活_冰点还原精灵密钥,小编教你如何激活冰点还原精灵
- grep匹配单引号('),惰性匹配(.*?)
- android客户端同php服务端进行XML/JSON通信
- Python 程序设计(第3版)
- 打磨锤子计算机专业,钳工磨锤子实训心得体会
- java实现排兵布阵(回溯法)
- ContextCapture Master 倾斜摄影测量实景三维建模技术
- Win7 64位静态过PG,文件修改记录,备忘
- 【微信小程序】车位在线销售平台(三)
- 流媒体技术介绍(中篇)
- Let's go home 【2-sat 经典作图】+【scc判定有无解】
- Drools 规则引擎死循环问题解决
- NVCC CUDA编译流程
热门文章
- js中图片显示用ajax,javascript - 前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小...
- .net网格怎么把值插入指定列表_Python列表有什么内置函数可以使用,怎么使用这些函数...
- 对于七段数码数字模型进行改进:一个关键的数字1的问题
- 关于安徽赛区推广校赛的实施办法
- 2021年春季学期-信号与系统-第一次作业参考答案-第六题
- 8s 接口压力测试_Python Locust 基于Robot Framework实现关键字驱动接口性能测试
- matlab整定串级pid,PID算法在Matlab串级控制中的应用
- java try catch嵌套_解析Java中未被捕获的异常以及try语句的嵌套使用
- python下三角代码分析_空间分析:2-3。用Python生成Delaunay三角形,23Python,德劳内
- jQuery实现王者手风琴案例