`

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 class="load_files">
			Load Files
		</button>
		<div class="loading"></div>
		<div class="loaded_files"></div>
	</body>
</html>

  

2 让用户自由的改动字体
   
$(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 - optional
		alert("No right-clicking!");
					 
		//cancel the default context menu
		return 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);
	}
});

4
0
分享到:
评论
2 楼 gengqi88 2012-02-25  
    
1 楼 lvwenwen 2012-02-24  
 

相关推荐

    jquery学习小技巧

    ### jQuery学习小技巧详解 #### 一、关于页面元素的引用 在网页开发过程中,能够高效地选择并操作页面上的元素是至关重要的。jQuery 提供了一种简洁且强大的方式来实现这一目标。通过 `$(selector)` 函数,我们...

    js 小项目练习,jQuery 小例子

    在"js 小项目练习,jQuery 小例子"中,我们可以看到几个基于jQuery实现的常见功能: 1. **菜单**:jQuery可以轻松地创建动态菜单,包括下拉菜单、滑动菜单等。通过监听用户的鼠标事件,如hover(悬停)和click...

    jquery仿天猫列表

    在jQuery仿天猫列表中,主要涉及到以下几个关键知识点: 1. **jQuery库的使用**:jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。在这个项目中,jQuery被用来实现动态效果...

    15个jquery常用方法、小技巧分享

    标题中提到的“15个jquery常用方法、小技巧分享”,意味着本文将要围绕jQuery展开,介绍15个在开发过程中频繁使用的jQuery方法以及一些实用技巧。jQuery作为一个强大的JavaScript库,广泛应用于Web开发中,能够简化...

    jquery.imgareaselect-0.9.2几种封装

    在本例中,文件名为"jquery.imgareaselect-0.9.2",包含js和css两个部分。在HTML文档中,需先引入jQuery库,然后引入imgAreaSelect的CSS和JS文件,如下: ```html &lt;link rel="stylesheet" href="path/to/jquery....

    jquery学习必备10几种经典特效

    "jQuery学习必备10几种经典特效"是一个针对初学者和中级开发者的重要资源,它包含了一系列预封装的特效源码,可以帮助你快速掌握jQuery的核心功能和特效实现。 首先,我们来看一下“特效核心”。这个部分通常涵盖了...

    jQuery权威指南-源代码

    不仅书中的每一个小知识点都配有精心选择的小案例(总共100多个),而且还有两个非常实用的综合性案例。所有案例的讲解都非常详细,不仅有功能需求分析和完整实现代码,而且还有最终效果的展示,更重要的是,将所有...

    一个不错的jquery特效项目

    项目中的jQuery特效可能涵盖以下几个方面: 1. **动画效果**:jQuery的动画函数如`animate()`可以自定义元素的样式属性变化,如位置、大小、颜色等,创建复杂的动画效果。 2. **滑动效果**:通过`slideUp()`, `...

    jQuery 技巧收集

    本篇文章将深入探讨jQuery中的几个实用技巧,帮助开发者更高效地利用这个强大的工具。 1. **引用页面元素** jQuery 提供了多种方式来选取页面上的元素,包括通过ID、类名、元素标签或DOM路径。例如,`$("#msg")`...

    jQuery实现的贪吃蛇小游戏

    游戏的核心算法涉及以下几个关键步骤: 1. **初始化**:设置蛇的起始位置、食物的位置、游戏速度和得分。 2. **移动**:根据玩家输入,更新蛇的位置,并将其头部添加到新的单元格,同时移除尾部。 3. **碰撞检测**...

    jQuery飞机大战游戏

    游戏的基本结构包括以下几个关键知识点: 1. **jQuery基础**:jQuery是JavaScript的一个库,它简化了DOM操作、事件处理、动画制作和Ajax交互。在飞机大战游戏中,jQuery用于处理用户的输入事件(如键盘按键),更新...

    Pro SharePoint with jQuery.pdf

    - **调试技巧**:分享了一些提高调试效率的小技巧,帮助开发者快速定位问题所在。 #### 第5章:使用jQuery查看SharePoint数据 - **数据获取**:讲述了如何利用jQuery AJAX请求从SharePoint中获取数据。 - **数据...

    jquery 插件 经典jquery 图片代替文字

    在使用这类插件时,开发者需要注意几个关键点: 1. **图片优化**:为了减少加载时间,图片应该进行适当的压缩,保持合适的尺寸,并且使用正确的格式(如JPEG、PNG或SVG)。 2. **语义化HTML**:确保HTML结构清晰,...

    jQuery下的几个你可能没用过的功能

    在本文中,我们将探讨一些可能不那么常见的jQuery功能,这些功能可以在实际项目中提高开发效率和用户体验。 首先,我们来看如何用jQuery创建自定义的dropdownlist。通常,在HTML中,我们会使用`&lt;select&gt;`标签来创建...

    jquery圆形导航菜单

    我们将涵盖以下几个关键知识点: 1. **jQuery基础** jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果。在构建圆形导航菜单时,我们首先需要对jQuery的基本用法有了解,包括选择器、属性操作...

    jquery表单验证特效

    首先,基本的jQuery表单验证通常涉及到以下几个步骤: 1. **选择表单元素**:使用jQuery的选择器选取需要验证的表单字段,例如`$("#username")`会选择ID为"username"的输入元素。 2. **绑定事件**:将验证函数绑定...

    几个比较经典常用的jQuery小技巧

    在这篇文章中,作者介绍了一些经典且常用的jQuery技巧,这些技巧可以帮助开发者更高效地处理Web开发中的常见任务。以下是文章中提到的各个技巧的具体知识点: 1. jQuery库的调用 首先,文章提到了如何在项目中引入...

    jQuery 2D迷宫游戏.zip

    在JavaScript编程中,这样的游戏通常会涉及到以下几个核心知识点: 1. **DOM操作**:jQuery库简化了对HTML文档对象模型(DOM)的操作。游戏中的按钮事件监听、元素动态更新等都是通过jQuery选择器和方法实现的,...

    jquery 小游戏制作网页版坦克大战游戏源码下载(不兼容IE)

    在这款坦克大战游戏中,jQuery主要负责以下几个方面: 1. **DOM操作**:jQuery提供了一套简单易用的API来操作HTML文档对象模型(DOM)。例如,游戏中的元素选择、添加、删除或修改,都可以通过jQuery的链式语法高效...

    Jquery实现的转盘抽奖

    在压缩包中的文件可能包括以下几个部分: - HTML文件:包含转盘抽奖的结构和布局,以及与jQuery相关的脚本引用。 - CSS文件:定义转盘及各奖项的样式,如颜色、大小、边框等。 - JavaScript文件(可能包括jQuery库)...

Global site tag (gtag.js) - Google Analytics