jQuery 之入门基本介绍
程序员文章站
2022-05-21 09:20:46
...
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>