JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。以下十项jQuery示例可以帮助大家的Web设计项目顺利实现效率提升。

检测IE浏览器

在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦。尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测。当然,以下片段亦可用于检测其它浏览器。

来源: Stack Overflow

平滑滚动至页面顶部

以下是jQuery最为常见的一种实现效果:点击一条链接以平滑滚动至页面顶部。虽然没什么新鲜感可言,但每位开发者几乎都用得上。

来源: Stalk Overflow

保持始终处于顶部

以下代码片段允许某一元素始终处于页面顶部。可以想见,其非常适合处理导航菜单、工具栏或者其它重要信息。

来源: DesignBump

替换html标签

jQuery能够非常轻松地实现html标签替换,而这也将为我们带来更多新的可能。

来源: Allure Web Solutions

检测屏幕宽度

现在移动设备的人气几乎已经超过了传统计算机,因此对小型屏幕的尺寸进行检测就变得非常重要。幸运的是,我们可以利用jQuery轻松实现这项功能。

来源: jQuery Rain

自动修复损坏图片

如果大家的站点非常庞大而且已经上线数年,那么其中或多或少会出现图片损坏的情况。这项功能可以检测损坏图片并根据我们的选择加以替换。

来源: WebDesignerDepot

检测复制、粘贴与剪切操作

利用jQuery,大家可以非常轻松地检测到选定元素的复制、粘贴与剪切操作。

来源: Snipplr

自动为外部链接添加target=“blank”属性

在链接至外部站点时,大家可能希望使用target="blank"属性以确保在新的选项卡中打开页面。问题在于,target="blank"属性并未经过W3C认证。jQuery能够帮上大忙:以下片段能够检测当前链接是否指向外部,如果是则自动为其添加target="blank"属性。

来源: jQuery Rain

悬停时淡入/淡出

又是另一项“经典”效果,大家可以利用以下片段随时加以运用。

来源: Snipplr

禁用文本/密码输入中的空格

无论是电子邮件、用户名还是密码,很多常见字段都不需要使用空格。以下代码能够轻松禁用选定输入内容中的全部空格。

版权声明:原文标题:10 jQuery Snippets for Efficient Web Development,51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com,作者:核子可乐译来源:51CTO,感谢原作者的辛苦创作,如转载涉及版权等问题,请与我们联系(公众号:数通畅联,QQ群:299719834)将在第一时间处理,谢谢!

十条jQuery代码片段助力Web开发效率提升的更多相关文章

  1. 【转载】十条jQuery代码片段助力Web开发效率提升

    文章转载自 51CTO http://www.51cto.com/ 原文链接:http://developer.51cto.com/art/201604/509093.htm原文摘要:JQuery是继 ...

  2. 几条jQuery代码片段助力Web开发效率提升

    平滑滚动至页面顶部 以下是jQuery最为常见的一种实现效果:点击一条链接以平滑滚动至页面顶部.虽然没什么新鲜感可言,但每位开发者几乎都用得上. $("a[href='#top']" ...

  3. 高效Web开发的10个jQuery代码片段(10 JQUERY SNIPPETS FOR EFFICIENT WEB DEVELOPMENT)

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...

  4. Jquery学习总结(4)——高效Web开发的10个jQuery代码片段

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...

  5. Web开发者必须知道的10个jQuery代码片段

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...

  6. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  7. 10个可以直接拿来用的JQuery代码片段

    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...

  8. 可以直接拿来用的15个jQuery代码片段

    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQue ...

  9. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

随机推荐

  1. [安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu

    效果如下: 下面是工程结构: 整个工程包括android-v7.SlidingMenu-lib和主工程SlidingMenuTest部分 其中前两个作为lib,后一个为主工程 主工程包含两个lib工程 ...

  2. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  3. cordova platform add specified version

    cordova platform add specified version 命令格式 cordova platform add android@4.0 可用的版本 Valid install tar ...

  4. C 中读取键盘码

    键盘码在底层开发中经常用到,有时候我们会忘记它们,就要急急忙忙的去找 键-码 对照表查看,其实程序可以自己打印出 键-码 对应值 #include <stdio.h> #include & ...

  5. HTTP学习补充一

    1 HTTP协议协商 1.1 NPN NPN:Next Protocol Negotiation,是由Google公司开发的用于SPDY进行协议协商扩展. 协商过程: 服务端在收到客户端的client ...

  6. Android入门(十四)内容提供器-实现跨程序共享实例

    原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...

  7. CSS滚动条

    × 目录 [1]条件 [2]默认 [3]尺寸[4]兼容[5]自定义 前面的话 滚动条在网页中经常见到,却并没有受到足够的重视.只有当因为滚动条的问题需要处理兼容性时,才进行调试操作.本文将就滚动条的常 ...

  8. java多线程的等待唤醒机制及如何解决同步过程中的安全问题

    /* class Person{ String name; String sex; boolean flag = true; public void setPerson(String name, St ...

  9. Yii的学习(3)--查询生成器 (Query Builder)

    原文地址:http://www.yiiframework.com/doc/guide/1.1/en/database.query-builder 不过原文是英文的,Yii的官网没有翻译这一章,自己就尝 ...

  10. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...