jquery中几个小技能

2012-08-27

jquery中几个小技巧再次小结若干个jquery的小技巧1 使用load加载可以使用load去加载外部文件!-- File nam

jquery中几个小技巧
   再次小结若干个jquery的小技巧

1 使用load加载
   可以使用load去加载外部文件

<!-- File name index.html --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><title>Load external files with jQuery Demo</title><style type="text/css">.load_files {padding: 5px;font-weight: bold;background-color: #A9F5A9;border: solid #333333 1px;cursor: pointer;}/* 装载中的图片*/.loading {width: 20px;height: 20px;background-image: url('loader.gif');display: none;}</style><script type="text/javascript">$(function() {$(".load_files").click(function() {$(this).hide();/*当点加载按钮时,显示加载的图案*/$(".loading").show();$(".loaded_files").load('external.html', function() {      //加载完毕隐藏加载图形$(".loading").hide();});});});</script></head><body><h2>Load external files with jQuery</h2><button name="code">$(document).ready(function() {//获得当前字体大小var originalFontSize = $('html').css('font-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;});//减少字体大小$(".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;});//重新恢复字体大小 $(".resetFont").click(function(){$('html').css('font-size', originalFontSize);  });});

3 在新窗口中打开连接

   $(document).ready(function() {$("a[href^='http']").attr('target','_blank');});

4 禁止右键

//check that the DOM is ready$(document).ready(function() {//catch the right-click context menu$(document).bind("contextmenu",function(e) { //warning prompt - optionalalert("No right-clicking!"); //cancel the default context menureturn false;});});

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);}});

热点排行

Web前端

jquery中几个小技能