jQuery 入门
1，$(function)做为程序入口
(fn)
2，导入 jQuery 插件
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
3，$(function)、
$(document).ready(function)
与window.onload的区别？
3.1：$(function)和 “美元符”(document).ready(function)是等价的，那个在前就先执行那个（jsp的dom树结构加载完毕即刻调用方法）
3.2：window.onload最后执行（jsp的dom树，css,js等静态资源加载完毕后执行）
<script type="text/javascript">
window.onload=function(){
alert("hello--1");
}
$(function(){
alert("hello--2");
})
$(document).ready(function() {
alert("hello--3");
})
</script>
4，jQuery三种工厂方法
4.1: jQuery 选择器
jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
注1：选择器，css选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() { /* jQuery程序入口 */
/* 标签选择器 */
/* a 标签*/
/* $("a").click(function() {
alert("标签选择器--糟了，是心动的感觉");
}); */
/* ID选择器 */
/* id='a1' */
/* $("#a1").click(function() {
alert("ID选择器--糟了，是心动的感觉");
}); */
/* 类选择器 */
/* class=='c2' */
/* $(".c2").click(function() {
alert("类选择器--糟了，是心动的感觉");
}); */
/* 包含选择器：E1 E2 */
/* p标签包含a标签的对象 */
/* $("p a").click(function() {
alert("包含选择器：--糟了，是心动的感觉");
}); */
/* 组合选择器：E1,E2,E3 */
/* 由div，p标签和a标签组合的对象 */
/* $("div,p,a").click(function() {
alert("组合选择器：--糟了，是心动的感觉");
}); */
/* 自定义选择器：:exp */
/* $(":input").click(function() {
alert("自定义选择器：--糟了，是心动的感觉");
}); */
/* 找到里面包含a标签的div标签（如果第二个参数没有填，则默认为document） */
/* $("a","div").click(function() {
alert("糟了，是心动的感觉");
}); */
})
</script>
</head>
<body>
<p>
<a id="a1" class="c1" href="#">点我1</a>
</p>
<p>
<a id="a2" class="c2" href="#">点我2</a>
</p>
<p>
<a id="a3" class="c3" href="#">点我3</a>
</p>
<div>
<a id="a4" class="c1" href="#">点我4</a>
</div>
<div>
<p>
<a id="a5" class="c1" href="#">点我5</a>
</p>
</div>
<input type="button" value="jQuery" />
</body>
</html>
4.2 jQuery(html)
html：基于html的一个字符串
4.3 jQuery(element)
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
$(":input[name='name1']").click(function() {
//在id=selId1的select的jQuery实例上追加"<option value='1'>-湖南-</option>"的HTML jQuery实例
$("#selId1").append("<option value='1'>-湖南-</option>");
});
$(":input[name='name2']").click(function() {
//将"<option value='1'>-湖南-</option>"的HTML jQuery实例追加到id=selId2的select标签的jQuery实例中
$("<option value='1'>-长沙-</option>").appendTo("#selId2");
$("<option value='2'>-永州-</option>").appendTo("#selId2");
$("<option value='3'>-岳阳-</option>").appendTo("#selId2");
/* 4.3 jQuery(element) -------------------------------------------------------------
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换 */
var $h1=$("#h1");
alert($h1.val());
/* js对象转jquery对象 */
var h1Node=$h1.get(0); /* 集合 */
var h1Node=$h1[0]; /* 数组 */
var h2Node=document.getElementById("h2");
alert(h2Node.value);
/* jquery对象转js对象 */
var $h2Node=$(h2Node);
alert(h2Node.val());
});
})
</script>
</head>
<body>
<select id="selId1">
<option value="-1">---请选择---</option>
</select>
<select id="selId2">
<option value="-1">---请选择---</option>
</select>
<input name="name1" value="add1" type="button">
<input name="name2" value="add2" type="button">
<input type="hidden" id="h1" value="h1">
<input type="hidden" id="h2" value="h2">
<input type="hidden" id="h3" value="h3">
</body>
</html>
5， this指针的作用
5.1 事件源（获取当前按钮的按钮值）
5.2 当前元素（点击按钮，获取所有a标签的值）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
$(":input").click(function() {
//this:事件原
alert(this.value);
$("a").each(function(index,item) {
//this:当前元素（item==this）
alert(index+","+$(this).html+","+$(item).html);
});
});
})
</script>
</head>
<body>
<p>
<a id="a1" class="c1" href="#">点我1</a>
</p>
<p>
<a id="a2" class="c2" href="#">点我2</a>
</p>
<p>
<a id="a3" class="c3" href="#">点我3</a>
</p>
<div>
<a id="a4" class="c1" href="#">点我4</a>
</div>
<div>
<p>
<a id="a5" class="c1" href="#">点我5</a>
</p>
</div>
<input type="button" value="ok">
</body>
</html>
5.3 插件（见–>《jQuery 自定义插件》）
6、使用jquery动态给table添加样式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.red{
background: red;
}
.blue{
background: blue;
}
.orange{
background: orange;
}
</style>
<script type="text/javascript">
$(function(){
$("table tr:odd").addClass("blue");
$("table tr:even").addClass("red");
$("table tr:gt(0)").hover(
function () {
$(this).addClass("orange");
$(this).removeClass("red");
},
function () {
$(this).removeClass("orange");
$(this).addClass("red");
},
function () {
$(this).addClass("orange");
$(this).removeClass("blue");
},
function () {
$(this).removeClass("orange");
$(this).addClass("blue");
}
);
})
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
</body>
</html>