`
1140566087
  • 浏览: 545905 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
博客专栏
2c4ae07c-10c2-3bb0-a106-d91fe0a10f37
c/c++ 入门笔记
浏览量:18022
3161ba8d-c410-3ef9-871c-3e48524c5263
Android 学习笔记
浏览量:308741
Group-logo
J2ME 基础学习课程集
浏览量:17884
A98a97d4-eb03-3faf-af96-c7c28f709feb
Spring 学习过程记录...
浏览量:17153
社区版块
存档分类
最新评论

jQuery 之入门基本介绍

阅读更多
JQuery 基本介绍


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(){
//程序入口
});


4、简单案例如下:
实现点击隐藏、显示、以及样式的添加;

	<%@ 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>

0
2
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics