jQuery 之入门基本介绍-优快云博客

[align=center] [size=large][color=darkred][b]JQuery 基本介绍[/b][/color][/size][/align]

[size=small][color=olive][b]1、What's the JQuery?
jQuery 是一个JavaScript 库；

特点：写的更少，做的更多；

功能：
* 访问和操作DOM 元素；
* 控制页面元素；
* 对页面事件的处理；
* 大量插件在页面中运用；
* 与AJAX 技术的完美结合；

2、使用方法：
首先从官网获取对应版本的jQuery ，然后导入到jsp页面；
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

3、JQeury 的表示方法：
//方式一
$(document).ready(function() {
//程序入口
alert("方式一程序入口");
});

//方式二
window.onload = function() {
alert("方式二程序入口");
}

说明：以上两段代码在功能上可以互换，但是他们之间存在区别：
1、执行的时间不同：
$(document).ready(function(){});在页面框架下载完毕后就
执行，而且window.onload 必须在页面全部加载完毕(包括图片上传)
后才能执行，很明显前者的执行效率是比较高的；

2、执行数量不同：
$(document).ready(function(){});可以重写多个，并且每次执行
的结果不同，而window.onload 尽管可以执行多个，但是输出最后一个执
行的结果，无法完成多个结果的输出；

3、$(document).ready(function(){});可以简写：
$(function(){
//程序入口
});[/b][/color][/size]

[size=medium][color=red][b]4、简单案例如下：
实现点击隐藏、显示、以及样式的添加；[/b][/color][/size]

	<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>

<!-- ########################## css ############################# -->
		<style type="text/css">

* {
	font-size: 14px;
	text-align: center;
}

table {
	border-collapse: collapse;
	width: 60%;
	position: relative;
}

table tr td {
	border: solid red 1px;
	text-align: center;
	line-height: 24px;
}

.y {
	background-color: blue;
}
</style>

<!-- #############**************############# js #########***************8#################### -->
		<script type="text/javascript">

//方式一:程序入口
$(document).ready(function() {

	//隐藏表格
		$("#hide").click(function() {
			$("#tab").hide("slow");	//隐藏
		});

		//显示表格
		$("#show").click(function() {
			if ($("#tab").is(":visible")) {	//判断指定元素是否隐藏
					$("#tab").hide("slow");	//隐藏 ， 参数：速度，慢慢隐藏
				} else {
					$("#tab").show("slow");	//显示、参数：速度，慢慢显示
				}
			});

		//为表格添加样式
		$("#css").click(function() {
			//$("#tab").addClass("y");	//为制定元素添加样式
			$("#tab").toggleClass("y");	//切换表格样式，从有到无，从无到有
		});

		//意外效果
		$("#all").click(function() {
			$("#tab").animate( {	//为指定的元素添加特效
				left : "100px"
			}, 3000);
		});

	});

/*
 //方式二
 window.onload = function() {
 alert("方式二程序入口");
 }
 */

</script>
	</head>

	<body>

			点击我隐藏表格


			点击我显示表格


			点击我修改表格样式


			点击出现意外效果


		<table id="tab">
			<tr>
				<td>
					####
				</td>
				<td>
					####
				</td>
				<td>
					####
				</td>
			</tr>
		</table>

	</body>
</html>