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


Posted in Javascript onJanuary 20, 2016

下面小编给大家整理了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<arguments.length; ctr++)
{
jQuery("<img alt="">").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 = "<li>" + item + "</li>";
$( "#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 += "<li>" + item + "</li>";
});
$( "#ballers" ).html( myHtml );

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

2. Cache Length During Loops

在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:
$( "<style type=\"text/css\">a.swedberg { color: #ad }</style>")
.appendTo( "head" );

7. Don't Treat jQuery as a Black Box

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

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
Node.js学习入门
Jan 03 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
js实现图片无缝滚动特效
Mar 19 #Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 #Javascript
学习JavaScript设计模式之观察者模式
Apr 22 #Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 #Javascript
详解javascript实现自定义事件
Jan 19 #Javascript
JS拖拽组件学习使用
Jan 19 #Javascript
理解JS绑定事件
Jan 19 #Javascript
You might like
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
yii中widget的用法
2014/12/03 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
php strftime函数的详细用法
2018/06/21 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python实现多线程网页下载器
2018/04/15 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
pytorch 模型可视化的例子
2019/08/17 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python对文件的操作方法汇总
2020/02/28 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
应聘教师推荐信
2013/10/31 职场文书
项目经理的岗位职责
2013/11/23 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
合同补充协议书
2016/03/24 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis