8个超实用的jQuery技巧攻略

标签: jquery 技巧 攻略 | 发表时间:2014-03-03 17:08 | 作者:周星星xin
出处:http://www.iteye.com

1)禁用右键单击功能

 

如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。

<font><font>$(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;
	});
});</font></font>

 

2)使用jQuery设定文本大小

使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。

<font><font>$(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);
  });
});</font></font>

3)在新窗口打开链接 

使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。 

$(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)更改样式列表

使用这段代码帮助你更改样式列表。 

$(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)返回到顶部链接

此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能。 

$(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轴

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

7)检测当前鼠标坐标 

使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。 

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

 

8)图片预加载

此段代码帮助用户快速加载图片或网页页面。

<font><font>jQuery.preloadImagesInWebPage = function() 
{
     for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("").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…');
});</font></font>

原文出自: Designzum



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery 技巧 攻略] 推荐:

8个超实用的jQuery技巧攻略

- - 开源软件 - ITeye博客
如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能. 2)使用jQuery设定文本大小. 使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少). 使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验. 使用这段代码帮助你更改样式列表. 此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能.

jQuery常用技巧

- - CSDN博客推荐文章
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2、jQuery对象与dom对象的转换. 只有jquery对象才能使用jquery定义的方法. 注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象.

一些实用的 jQuery 技巧

- - ITeye资讯频道
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果. 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery. Tip 1:使用最新版本. jQuery每一个新版本都会包含一些性能优化和bug修复,为了便于升级,你可以使用Google CDN服务托管的jQuery库.

(译)你应该知道的jQuery技巧

- - 破狼 Blog
帮助提高你jQuery应用的简单小技巧. Hover切换class类. 在浏览器标签/新窗口打开外部链接. 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top.

10 个技巧助你写出卓越的jQuery插件

- - ITeye资讯频道
目前网络中存在大量能够实现各种功能的jQuery插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题. 而大多数插件只要再加入一点点额外的功能,就能从“优秀”变成“卓越”,并且有更广泛的用处. 本文针对jQuery插件的开发者列出了一些技巧,以帮助开发者写出更好的jQuery插件,并且这些技巧在插件的维护和扩展方面也有一定的作用.

快速开发 jQuery 插件的 10 大技巧

- - 开源中国社区最新新闻
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式. 这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. 使用相同的设计模式和架构也让修复bug或者二次开发更容易. 一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.

程序员都会的 35 个 jQuery 小技巧

- - 外刊IT评论
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发.. 注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量. This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images..

GA小技巧:使用jQuery来方便的布置事件跟踪代码

- - 标点符
Google Analytics的事件跟踪是个神器,基本上你能想到什么他就能帮你做什么. 但是按照Google Analytics的帮助文章中方法去布置可能会让你觉得麻烦. 以下为我使用的小技巧分享给大家. 如果你需要跟踪某几个链接在页面上的点击数. 事先给需要记录的点击链接上添加一个类. 跟踪地址.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).