`
gaotong1991
  • 浏览: 92813 次
  • 来自: 北京
社区版块
存档分类
最新评论

8个超实用的jQuery技巧攻略

 
阅读更多

本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。

文中分享的这些实用代码,希望你会喜欢。

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>

 

 

 

 

0
0
分享到:
评论

相关推荐

    超实用的jQuery代码段

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...

    《超实用的jQuery代码段》 PDF

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面发中绝大多数要、技巧与方法,堪称*实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨设备、...

    《超实用的jQuery代码段》.(周敏).[PDF]@ckook

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...

    超实用的jquery代码段 书签 源码

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    《超实用的jQuery代码段》周敏(作者)epub

    本书精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。本书的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何...

    《超实用 的jQuery代码段》 配套 源码

    《超实用的jQuery代码段》是一本专注于jQuery实践的书籍,其配套源码提供了一整套丰富的代码示例,帮助读者深入理解并掌握jQuery库在实际项目中的应用。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理...

    最新jQuery常用技巧 超赞!

    jQuery的一个非常实用的功能就是支持链式调用,即可以在一个方法调用后紧接着调用另一个方法。例如: - `$("p").click(function(){alert($(this).html());}).mouseover(function(){alert("mouseover event");});` 这...

    超级好用jquery图表分析

    在IT行业中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在“超级好用jquery图表分析”这个主题中,我们将深入探讨如何利用jQuery来实现高效、直观的数据可视化...

    超牛jquery图片特效

    jQuery 图片特效为网页设计带来了无限可能,通过学习和实践“超牛jquery图片特效”,你可以掌握一系列实用技巧,创造出引人入胜的视觉效果。无论是简单的切换效果,还是复杂的3D转换,jQuery都能让你得心应手。同时...

    Jquery代码段

    **jQuery简介** jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互...同时,记得结合实践不断探索和学习新的jQuery技巧和最佳实践,以保持技术的更新和进步。

    超级酷jQuery动画滑动插件.zip

    综上所述,这款插件是前端开发中一个实用的工具,它将jQuery的便捷性、HTML5的新特性、JavaScript的动态交互以及CSS的样式控制融合在一起,为网页的动态效果设计提供了一站式的解决方案。无论是新手还是经验丰富的...

    8个超实用的jQuery功能代码分享

    在本文中,我们将深入探讨jQuery库中的8个实用功能代码,这些代码可以帮助开发者提升网站的交互性和用户体验。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互,使得开发者能更...

    两个超级经典的图片转换代码(jQuery实现的)

    本篇文章将深入探讨两个使用jQuery实现的经典图片转换代码,它们具有极高的实用性和灵活性。 首先,我们来理解什么是图片转换。在网页中,图片转换通常指的是改变图片的显示方式,如更改尺寸、格式、透明度或动态...

    jQuery实现的超酷泡泡导航菜单效果

    【jQuery实现的超酷泡泡导航菜单效果】 在网页设计中,导航菜单是用户与网站交互的重要组成部分,它能...通过学习和实践这个例子,开发者可以进一步掌握前端开发中的动态效果实现技巧,同时增强网页设计的创新能力。

    超炫酷的30个jQuery按钮悬停动画

    总的来说,"超炫酷的30个jQuery按钮悬停动画"不仅提供了丰富的设计灵感,还是一个实用的学习资源,帮助开发者提升网页交互设计技能,让网站更加生动有趣。通过实践和创新,你可以将这些技巧运用到自己的项目中,创造...

Global site tag (gtag.js) - Google Analytics