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入门,jQuery入门,jQuery入门,jQuery入门
jQuery基础入门pp
jQuery入门基础二.ppt
jq快速入门学习,相关基础实例!快速掌握jq
jQuery开发入门 jQuery选择器 jQuery操作DOM Ajax在jQuery中的应用 jQuery实用工具函数
jQuery基础入门教程,可以随时查询,放到手机方便随时学习。
juery 入门经典教程,详细、系统的介绍了jQuery的配置 基本操作及使用
解压后里面有jQueryAPI-100214.chm、JQuery基础入门-1.ppt JQuery基础入门-1.ppt只要你看完后保证JQuery Web开发一定会 我就是看JQuery基础入门-1.ppt 入门的,我很喜欢这ppt所以分享给大家。
jQuery_1.4中文文档 jQuery基础教程 JQuery中文入门指南
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
jQuery入门1 适合零基础初学者,讲解详细,易于理解,
jQuery中文入门教程:基础的jQuery中文入门教程,很好的资源
Ajax和Jquery基础入门视频(源码和课件)
作为jquery mobile的入门级读物,《jquery mobile快速入门》以示例方式讲解了jquery mobile的基本知识和核心特性,内容系统全面,便于理解。 《jquery mobile快速入门》总共分为10章,内容包括jquery mobile的基础...
jquery入门基础,jquery入门基础
js基础知识,jQuery详细入门教程