jQuery 之入门基本介绍

1140566087

浏览: 558814 次
性别:
来自: 武汉

最近访客更多访客>>

chenqisdfx

xiaoDeng998

hslb1985

lesley.chen

博主相关

博客

微博

相册

留言

关于我

博客专栏

: c/c++ 入门笔记
浏览量：18519

: Android 学习笔记
浏览量：313967

: J2ME 基础学习课程集
浏览量：18725

: Spring 学习过程记录...
浏览量：17561

文章分类

社区版块

存档分类

博客分类：

jQuery

jquery javascript 框架 java

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>

jquery_one.rar (76.5 KB)
下载次数: 10

0
顶

2
踩

分享到：

jQuery 之基本选择器 | Spring 使用annotation和xml配置文件实现 ...

2013-11-13 15:07
浏览 1203
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论