三、jQuery库详解
1、使用jQuery之后，javascript操作的不再是HTML元素对应的DOM对象，而是包装DOM对象的jQuery对象。js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性，从而实现动态更新HTML页面。
由此可见，使用jQuery动态更新HTML页面只需以下两个步骤：
(1)获取jQuery对象。jQuery对象通常是DOM对象的包装
(2)调用jQuery对象的方法来改变自身。当jQuery对象被改变时，jQuery包装的DOM对象随之改变，HTML页面的内容也就随之改变了。
2、一个入门小案例
<body>
<div id="zpc1"></div>
<div id="zpc2"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
//获取所有<div../>标签对应的DOM对象
$("div").append("新增的内容");
//使用HTML字符创建一个DOM对象，并将其添加到body元素中
$("<input type='button' value='单击我'/> ").appendTo(document.body);
//直接将一个DOM对象包装成jQuery对象
$(document.getElementById('zpc2'))
.css("background-color","#aaffaa")
.css("border","1px solid blue");
//指定页面加载完成后执行的函数
$(function(){
alert("页面加载完成");
});
</script>
</body>
3、以CSS选择器访问DOM元素
每个CSS选择器可以对应一个或多个HTML元素，如果以CSS选择器作为$()函数的参数，$(selector)将可以获取该选择器对应的一个或多个HTML元素包装成的jQuery对象。
例程：
<body>
<ul>
<li id="java">
疯狂Java讲义
</li>
<li id="javaee" class="test">
疯狂JavaEE讲义
</li>
<li id="ajax">
疯狂Ajax讲义
</li>
<li id="xml">
疯狂XML讲义
</li>
<li id="hadoop">
疯狂Hadoop讲义
</li>
<li >
<span id="workflow">疯狂workflow讲义</span>
</li>
</ul>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//获取id为java的元素
$("#java").append("<b>是id为java的的元素</b>");
//获取所有包含id属性的<li.../>元素，为他们添加背景色
$("li[id]").css("background-color","#bbbbff");
//获取Class属性为test的元素，为他们增加边框
$(".test").css("border","3px dotted black");
//同时获得id为xml\workflow的元素
$("#xml,#workflow").append("<b>是id为xml或workflow其中之一的元素</b>");
//获取ul之内id为workflow的元素
$("ul #workflow").append("<br/><b>是位于ul之内、id为workflow的子元素</b>");
//获取ul之内id为ajax的直接子元素
$("ul>#ajax").append("<b>位于ul之内,id为ajax的子元素</b>")
.css("border","2px solid black");
//获取id为ajax之后的所有li元素
$("#ajax~li").css("background-color","#ff5555");
</script>
</body>
4、表单相关选择器
Jquery提供了专门匹配各种表单控件的选择器
5、jQuery操作数组的工具方法
jQuery的$()函数都返回一个类似数组的jQuery对象，jQuery提供了如下几个常用方法操作类数组的jQuery对象。
例程：jQuery操作数组
<body>
<div>
<div id="java">
疯狂Java讲义
</div>
<div id="javaee" class="test">
疯狂JavaEE讲义
</div>
<div id="ajax">
疯狂Ajax讲义
</div>
<div id="xml">
疯狂XML讲义
</div>
<div id="hadoop">
疯狂Hadoop讲义
</div>
<div >
<span id="workflow">疯狂workflow讲义</span>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//获取div之内所有的div元素，并迭代处理每个元素
$("div>div").each(function(i){
this.innerHTML+="添加的内容"+i;
});
//返回div之内的所有div元素的个数
document.writeln($("div>div").length+"<br/>");
//获取div之内的第四个div元素包装成的jQuery对象
document.writeln($("div>div").eq(3).html()+"<br/>");
//获取div之内的第二个div元素(注意：返回的是DOM对象)
document.writeln($("div>div").get(1).innerHTML+"<br/>");
//获取id为java的div元素,注意：$("#java").get()返回一个数组,下面第一行输出1
document.writeln($("#java").get().length+"<br/>");
document.writeln($("#java").get()[0]+"<br/>");
//获取所有div之内id为hadoop的div索引(下面两行输出一样)
document.writeln($("div>div").index($("#hadoop").get(0))+"<br/>");
document.writeln($("div>div").index($("#hadoop"))+"<br/>");
document.writeln(jQuery("#hadoop").html());
</script>
</body>
6、jQuery对象和DOM对象间可以相互转化：jQuery对象的get()、get(index)方法返回DOM对象，$()和jQuery()方法返回jQuery对象
7、对jQuery对象进行过滤的相关方法
例程:
<body>
<div>
<div id="java">
疯狂Java讲义
</div>
<div id="javaee" class="test">
经典企业级JavaEE应用框架讲义
</div>
<div id="ajax">
疯狂Ajax讲义
</div>
<div id="xml">
疯狂XML讲义
</div>
<div id="hadoop">
疯狂Hadoop讲义
</div>
<div >
<span id="workflow">疯狂workflow讲义</span>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("div>div").filter("#ajax").css("background-color","#aaaaaa");
//将div之内的div元素映射成另一个数组
$("div>div").filter(function(){
return this.innerHTML.length>20;
}).css("border","1px solid red");
var t=$("div>div").map(function(i){
return i;
});
for(var i=0;i<t.length;i++)
document.writeln(t[i]);
//下面两行输出一样
document.writeln($("div>div").eq(1).html()+"<br/>");
document.writeln($("div>div").get(1).innerHTML+"<br/>");
</script>
</body>
8、jQuery提供了类似DOM导航的方法，可以更加便捷地访问当前结点的兄弟结点、父节点和子节点，
而且这些方法的返回值依然是jQuery对象，因此可以直接调用jQuery对象提供的工具方法。
例程：
<body>
<div>
<div id="java">
疯狂Java讲义
</div>
<div id="javaee" class="test">
经典企业级JavaEE应用框架讲义
</div>
<div id="ajax">
疯狂Ajax讲义
</div>
<div id="xml">
疯狂XML讲义
</div>
<div id="hadoop">
疯狂Hadoop讲义
</div>
<div >
<span id="workflow">疯狂workflow讲义</span>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//获取div之内的所有内容(包括结点和文本)，实际返回div下的6个div
$("div").contents().css("background-color","#dddddd");
//获取id为ajax的结点的下一个兄弟结点
$("#ajax").next().css("border","3px dotted blue");
//获取id为ajax的结点的上一个兄弟结点
$("#ajax").prev().css("border","2px solid black");
//获取id为ajax结点的id为java的兄弟结点
$("#ajax").siblings("#java").append("<b>是id为ajax的节点的兄弟结点(且其id为java)</b>");
//取出所有div元素的父元素，将会输出body元素内容和包含6个div元素的父div内容
$("div").parent().each(function(){
alert($(this).html());
});
</script>
</body>
9、链接方法
例程：
<body>
<div>
<div id="java">
疯狂Java讲义
</div>
<div id="javaee" class="test">
经典企业级JavaEE应用框架讲义
</div>
<div id="ajax">
疯狂Ajax讲义
</div>
<div id="xml">
疯狂XML讲义
</div>
<div id="hadoop">
疯狂Hadoop讲义
</div>
<div >
<span id="workflow">疯狂workflow讲义</span>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//获取id为java的节点的下一个兄弟结点,再将id为java的结点与此结点连为一体
//实际返回id为java的结点以及它的下一个结点
$("#java").next().andSelf().css("border","2px solid blue");
//先获取xml的下一个结点，再使用end()方法重新获取之前的xml结点
$("#xml").next().end().css("background-color","#ffaaaa");
</script>
</body>
10、jQuery支持的方法(jQuery()和$()的效果一样、jQuery和$效果一样)
注意：jQuery.unique(array):删除array数组中的重复值。该array通常是DOM对象数组，如果是普通字符串或数值型数组将不起作用。
使用jQuery命名空间的属性和方法
如：jQuery.browser、jQuery.trim(str)、jQuery.unique(array)
虽然jQuery命名空间下提供的这些工具方法不是用于DOM操作，而是用于操作普通的字符串、数组和对象的，但这些方法简化了js编程。
例程：
<body >
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var target=$("<div>java</div>");
target.css("background-color","red");
$("body").append(target);
target.data("book","hadoop权威指南");
target.each(function(i){
document.writeln(i+":"+target[i]);
});
alert(target.data("book"));
target.removeData("book");
alert(target.data("book"));
</script>
</body>
11、jQuery允许把jQuery对象当做一个临时的“数据存储中心”，可以将数据(可以是基本类型或者js对象)以key-value的形式存储到jQuery对象里。
例程：
<body >
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var target=$("<div>java</div>");
target.css("background-color","red");
$("body").append(target);
target.data("book1","hadoop权威指南");
target.data("book2","HBase权威指南");
target.each(function(i){
document.writeln(i+":"+target[i]);
});
document.writeln("<br/>"+target.length+"<br/>");
document.writeln(target.data("book1")+"<br/>");
document.writeln(target.data("book2")+"<br/>");
target.removeData("book1");
document.writeln(target.data("book1")+"<br/>");
document.writeln(target.data("book2"));
</script>
</body >
12、操作DOM对象属性的相关方法
13、操作DOM元素的CSS属性的相关方法
14、操作元素内容的相关方法
例程：
<body >
<div></div><div></div>
<input id="book" name="book" type="text"/></br>
<input id="desc" name="desc" type="text"/></br>
<select id="gender">
<option id="p1" value="male">男人</option>
<option id="p2" value="female">女人</option>
</select><br/>
<select id="publish">
<option id="p3" value="phel">电子工业出版社</option>
<option id="p4" value="tsinghua">清华大学出版社</option>
</select><br/>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//设置body下div元素的内容
$("body>div").html("body下div元素的内容");
//设置所有的input、select和textarea的值
$(":input").val("疯狂Java讲义");
//为所有<select.../>元素设置value值,即默认值
$("select").val(["female","phel"]);
//仅获取jQuery元素的text部分,下面将输出"java:疯狂Java讲义"
document.writeln($("<div>java:<span>疯狂java讲义</span></div>").text()+"<br/>");
for(var i=1;i<=4;i++){
document.writeln($("#p"+i).val());
}
for(var i=1;i<=4;i++){
document.writeln($("#p"+i).html()+"<br/>");
}
</script>
</body>
15、操作DOM结点的相关方法
(1)在指定结点内插入新的结点:append(content)在jQuery对象包含的所有DOM结点的尾部插入;appendTo(selector):将jQuery对象包含的DOM元素添加到selector匹配的所DOM的内部的尾端
(2)prepend(content)、prependTo(selector)与上面的功能相反，即不是插前面，而是插后面
(3)在指定结点外添加新的结点
<body >
<div id="test1" style="border:1px dotted black;" >id为test1的元素</div>
<div id="test2" style="border:1px solid blue;" >id为test2的元素</div>
<hr/>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//下面两行效果一样
//$("#test2").insertAfter("hr");
$("hr").after($("#test2"));
</script>
</body>
16、jQuery事件相关方法
(1)通用的事件编程相关函数如bind()、hover()、trigger()等
(2)具体事件相关的方法，如：blur、click
$("#test1").click(function(event){
});
17、一些动画效果
jQuery提供了一些效果方法，可直接使用jQuery对象调用
例程：
<body >
<input type="button" value="toggle" onclick="$('#test1').toggle(1000);" /><br/>
<div id="test1" >使用toggle控制的元素</div>
<input type="button" value="slide down" onclick="$('#test2').slideDown(1000);" /><br/>
<input type="button" value="slide up" onclick="$('#test2').slideUp(1000);" /><br/>
<div id="test2" >使用slide控制的元素</div>
<input type="button" value="fade in" onclick="$('#test3').fadeIn(1000);" /><br/>
<input type="button" value="fade out" onclick="$('#test3').fadeOut(1000);" /><br/>
<div id="test3" >使用Fade控制的元素</div>
<div id="div">最后一个元素</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#div").css("background-color","red");
</script>
</body>
18、★Ajax相关方法
(1)例程：将所有表单控件输入元素转化为数组
<body >
<form id="test">
用户名:<input type="text" id="user" name="user"/><br/>
个人介绍：<textarea id="desc" name="desc" rows="6" cols="20"></textarea><br/>
喜欢的图书：<select id="book" name="book">
<option value="hadoop">Hadoop权威指南</option>
<option value="nosql">Nosql权威指南</option>
</select><br/>
</form>
<input id="bn1" type="button" value="查询字符串"/>
<input id="bn2" type="button" value="查询JSON对象"/><hr/>
<span id="show"></span>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#bn1").click(function(){
$("#show").empty();
$("#show").html($("#test").serialize());
});
$("#bn2").click(function(){
//将所有输入元素转化为数组
var arr=$(":input").serializeArray();
$("#show").empty();
//遍历arr
for(var index in arr){
$("#show").append("第"+index+"表单控件名为："+arr[index].name+",值为："+arr[index].value+"<br/>");
}
});
</script>
</body>
(2)使用load方法实现便捷的Ajax交互
Html页面：
<body >
<h3>输入你的信息:</h3>
<form id="user">
用户名:<input type="text" id="user" name="user"/><br/>
喜欢的图书：<select id="book" name="book" multiple="multiple">
<option value="hadoop">Hadoop权威指南</option>
<option value="nosql">Nosql权威指南</option>
<option value="jvm">深入理解JVM</option>
<option value="java">Thinking in java</option>
</select><br/>
<input id="load" type="button" value="load"><br/>
</form><hr/>
<div id="show"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#load").click(function(){
//向pro.jsp发送Ajax请求,并启动服务器响应
$("#show").load("/Ajax/jQajax1.jsp",$("#user").serializeArray());
});
</script>
</body>
jsp页面：
<%
String user=request.getParameter("user");
String books[]=request.getParameterValues("book");
//生成HTML字符串响应
out.println(user+",您好,现在时间是："+new Date());
out.println("<br/><h3>您喜欢的书如下：</h5>");
out.println("<ol>");
for(int i=0;i<books.length;i++){
out.println("<li>"+books[i]+"</li>");
}
out.println("</ol>");
%>
(3)使用get/post方法
<body >
<h3>输入你的信息:</h3>
<form id="user">
用户名:<input type="text" id="user" name="user"/><br/>
喜欢的图书：<select id="book" name="book" multiple="multiple">
<option value="hadoop">Hadoop权威指南</option>
<option value="nosql">Nosql权威指南</option>
<option value="jvm">深入理解JVM</option>
<option value="java">Thinking in java</option>
</select><br/>
<input id="load" type="button" value="load"><br/>
</form><hr/>
<div id="show"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#load").click(function(){
$("#show").empty();
//向pro.jsp发送Ajax请求,并启动服务器响应
$.get("/Ajax/jQajax1.jsp",$("#user").serializeArray(),
//也可以指定POST请求，防止乱码
//$.post("/Ajax/jQajax1.jsp",$("#user").serializeArray(),
//指定回调函数
function(data,statusText){
$("#show").append("服务器的响应状态为："+statusText+"<br/>");
$("#show").append(data);
},
//指定服务器响应为html
"html"
);
});
</script>
</body>
(4)让服务器直接生成js脚本
html页面：
<body>
<ul style="display: none;">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="get" type="button" value="getScript"/ >
<div id="show"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//為id为get的按钮绑定事件处理函数
$("#get").click(function() {
$.getScript("/Ajax/Script.jsp");
});
</script>
</body>
jsp页面：只能保留脚本内容
$("ul>li").each(function(index){
if(index%2==0){
$(this).css("background-color","#ccffcc");
}
$(this).append("服务器响应："+index);
});
$("ul").slideDown(1000);
19、扩展jQuery：
用户可以通过jQuery.fn.extend(object)和jQuery.extend(object)来为jQuery对象扩展新的方法或为jQuery命名空间扩展新的方法
Ajax学习笔记(三)
时间： 2024-09-30 21:47:12