0

0

在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)_jquery

php中文网

php中文网

发布时间:2016-05-16 15:19:13

|

1321人浏览过

|

来源于php中文网

原创

下面小编给大家整理了8个技巧对程序员来说非常的有帮助,具体如下所示:

1) 禁用鼠标右键单击

  jQuery程序员可以使用此代码在网页上禁用鼠标右键点击。

$(document).ready(function() {
//catch the right-click context menu
$(document).bind("contextmenu",function(e) { 
//warning prompt - optional
alert("No right-clicking!");
//delete the default context menu
return false;
});
});

2) 利用jQuery调整文字大小

使用此代码,用户可以重新网站上文字的大小(增大和减少)

$(document).ready(function() {
//find the current font size
var originalFontSize = $('html').css('font-size');
//Increase the text size
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
});
//Decrease the Text Size
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
// Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
});

3) 在新的Windows打开链接

  Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: -

$(document).ready(function() {
//select all anchor tags that have http in the href
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});

4) Style Sheets Swap

  Swap style sheets using this code and the “Style sheets swap” script is below: -

$(document).ready(function() {
$("a.cssSwap").click(function() { 
//swap the link rel attribute with the value in the rel 
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
}); 
});

5) 回到顶部链接

  That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single click. Visit this code below: -

$(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});

6) 获取鼠标光标的x和y轴

  You can find the values of X and Y coordinator of mouse pointer. Code is blow : -

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7) 检测当前鼠标坐标

  使用这个脚本,你可以在jQuery所支持的任何Web浏览器找到当前鼠标的坐标。代码如下:

$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
});

8) 在jQuery中预加载图片

  此图像预加载的脚本有助于非常快速加载图像或网页。你不必等待图像加载。代码:

jQuery.preloadImagesInWebPage = function() 
{
for(var ctr = 0; ctr").attr("src", arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
}); 

做好如下工作保你jQuery的性能大提升

1. Append Outside of Loops

凡是触及到DOM都是有代价的。如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行。当在循环当中附加元素就会产生一个常见的问题。

$.each( myArray, function( i, item ) {
var newListItem = "
  • " + item + "
  • "; $( "#ballers" ).append( newListItem ); });

    一个常用的技巧是利用文档片段(document fragment)。在循环的每一次迭代当中,将元素附加到片段而不是DOM元素当中。当循环结束后,将片段附加到DOM元素当中即可。

    var frag = document.createDocumentFragment();
    $.each( myArray, function( i, item ) {
    var newListItem = document.createElement( "li" );
    var itemText = document.createTextNode( item );
    newListItem.appendChild( itemText );
    frag.appendChild( newListItem );
    });
    $( "#ballers" )[ ].appendChild( frag ); 

    另一个简单的技巧是在循环的每次迭代当中,持续构建一个字符串。当循环结束后,将DOM元素的HTML设置成该字符串。

    var myHtml = "";
    $.each( myArray, function( i, item ) {
    myHtml += "
  • " + item + "
  • "; }); $( "#ballers" ).html( myHtml );

    当然还有其它一些技巧可以供你尝试。一个名为 jsperf 的站点为测试这些性能提供了一条好的出路。该网站允许你使用基准测试每一个技巧,并将其跨平台的性能测试结果可视化的展现出来。

    2. Cache Length During Loops

    腾讯AI 开放平台
    腾讯AI 开放平台

    腾讯AI开放平台

    下载

    在for循环当中,不要每次都访问数组的 length 属性;应当事先将其缓存起来。

    var myLength = myArray.length;
    for ( var i = ; i < myLength; i++ ) {
    // do stuff
    } 

    3. Detach Elements to Work with Them

    操作DOM是缓慢的,因此你想尽可能减少对齐进行操作。jQuery在1.4版本当中引入了名为 detach() 的方法来帮助解决这一问题,它允许你在对元素进行操作时,将它们从DOM当中分离出来。

    var $table = $( "#myTable" );
    var $parent = $table.parent();
    $table.detach();
    // ... add lots and lots of rows to table
    $parent.append( $table ); 

    4. Don't Act on Absent Elements

    如果你正打算在一个空的选择器上运行大量的代码,jQuery并不会给予任何的提示 -- 它将会继续的执行,就像是没有发生任何的错误。必须由你来验证选择器包含了多少元素。

    // Bad: This runs three functions before it
    // realizes there's nothing in the selection
    $( "#nosuchthing" ).slideUp();
    // Better:
    var $mySelection = $( "#nosuchthing" );
    if ( $mySelection.length ) {
    $mySelection.slideUp();
    }
    // Best: Add a doOnce plugin.
    jQuery.fn.doOnce = function( func ) {
    this.length && func.apply( this );
    return this;
    }
    $( "li.cartitems" ).doOnce(function() {

    // make it ajax! \o/

    }); 

    本指南特别适用于那些当选择器不包含元素时还需要大量的开销的 jQuery UI 部件。

    5. Optimize Selectors

    选择器的优化和过去比起来并不是那么的重要,因为很多浏览器都实现了 document.querySelectorAll() 方法并且jQuery将选择器的负担转移到了浏览器上面。但是仍然有一些技巧需要铭记在心。

    基于ID的选择器

    以一个ID作为选择器的开始总是最好的。

    // Fast:
    $( "#container div.robotarm" );
    // Super-fast:
    $( "#container" ).find( "div.robotarm" ); 

    采用 .find() 方法的方式将更加的快速,因为第一个选择器已经过处理,而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理,之所以快速,是因为它是浏览器的原生方法。

    特异性

    尽量详细的描述选择器的右侧,对于左侧则应反其道而行之。

    // Unoptimized:
    $( "div.data .gonzalez" );
    // Optimized:
    $( ".data td.gonzalez" ); 

    尽量在选择器的最右侧使用 tag.class 的形式来描述选择器,而在左侧则尽量只使用 tag 或者 .class 。

    避免过度使用特异性

    $( ".data table.attendees td.gonzalez" );
    // Better: Drop the middle if possible.
    $( ".data td.gonzalez" ); 

    去讨好“DOM”总是有利于提升选择器的性能,因为选择器引擎在搜寻元素时无需进行太多的遍历。

    避免使用通用选择器

    如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

    $( ".buttons > *" ); // Extremely expensive.
    $( ".buttons" ).children(); // Much better.
    $( ".category :radio" ); // Implied universal selection.
    $( ".category *:radio" ); // Same thing, explicit now.
    $( ".category input:radio" ); // Much better. 

    6. Use Stylesheets for Changing CSS on Many Elements

    假如你使用 .css() 方法来改变超过20个元素的CSS,应当考虑为页面添加一个样式标签作为替代,这样做可以提升将近60%的速度。

    // Fine for up to elements, slow after that:
    $( "a.swedberg" ).css( "color", "#ad" );
    // Much faster:
    $( "")
    .appendTo( "head" ); 

    7. Don't Treat jQuery as a Black Box

    把jQuery的源码当成文档,可以把它(http://bit.ly/jqsource)保存在你的收藏夹内,经常的查阅参考。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    微信文件过期恢复教程
    微信文件过期恢复教程

    本专题整合了微信文件过期恢复方法、技巧教程,阅读专题下面的文章了解更多详细内容。

    0

    2026.02.04

    抖音网页版入口与视频观看指南 抖音官网视频在线访问
    抖音网页版入口与视频观看指南 抖音官网视频在线访问

    本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口,帮助用户快速访问抖音网页版,提供免登录访问方式和直接进入视频播放页面的方法,确保顺利浏览和观看抖音视频。

    63

    2026.02.04

    学习通网页版入口与在线学习指南 学习通官网登录与使用方法
    学习通网页版入口与在线学习指南 学习通官网登录与使用方法

    本专题详细汇总了学习通网页版入口与登录方法,提供学习通官方网页端入口、学生登录平台、网页版使用指南等内容,帮助用户快速稳定地登录学习通官网,顺利进入学习平台,提升学习效率和体验。

    9

    2026.02.04

    Python Web 框架 Django 深度开发
    Python Web 框架 Django 深度开发

    本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧,包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例,帮助学习者掌握 使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

    9

    2026.02.04

    Java 流式处理与 Apache Kafka 实战
    Java 流式处理与 Apache Kafka 实战

    本专题专注讲解 Java 在流式数据处理与消息队列系统中的应用,系统讲解 Apache Kafka 的基础概念、生产者与消费者模型、Kafka Streams 与 KSQL 流式处理框架、实时数据分析与监控,结合实际业务场景,帮助开发者构建 高吞吐量、低延迟的实时数据流管道,实现高效的数据流转与处理。

    3

    2026.02.04

    Golang 容器化与 Docker 实战
    Golang 容器化与 Docker 实战

    本专题深入讲解 Golang 应用的容器化与 Docker 部署,涵盖 Docker 基础概念、容器构建与镜像管理、Go 应用的 Dockerfile 编写、跨平台容器部署与优化、Docker Compose 和 Kubernetes 部署工具。通过实际案例,帮助学习者掌握 如何将 Golang 应用容器化并实现高效部署与管理,提升系统的可扩展性与运维效率。

    3

    2026.02.04

    全国统一发票查询平台入口合集
    全国统一发票查询平台入口合集

    本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

    59

    2026.02.03

    短剧入口地址汇总
    短剧入口地址汇总

    本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。

    110

    2026.02.03

    植物大战僵尸版本入口地址汇总
    植物大战僵尸版本入口地址汇总

    本专题整合了植物大战僵尸版本入口地址汇总,前往文章中寻找想要的答案。

    56

    2026.02.03

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Rust 教程
    Rust 教程

    共28课时 | 5.4万人学习

    Vue 教程
    Vue 教程

    共42课时 | 7.8万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号