三、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、一个入门小案例
每个CSS选择器可以对应一个或多个HTML元素，如果以CSS选择器作为$()函数的参数，$(selector)将可以获取该选择器对应的一个或多个HTML元素包装成的jQuery对象。
例程：
Jquery提供了专门匹配各种表单控件的选择器
5、jQuery操作数组的工具方法
jQuery的$()函数都返回一个类似数组的jQuery对象，jQuery提供了如下几个常用方法操作类数组的jQuery对象。
例程：jQuery操作数组
7、对jQuery对象进行过滤的相关方法
而且这些方法的返回值依然是jQuery对象，因此可以直接调用jQuery对象提供的工具方法。
例程：
9、链接方法
例程：
注意：jQuery.unique(array):删除array数组中的重复值。该array通常是DOM对象数组，如果是普通字符串或数值型数组将不起作用。
使用jQuery命名空间的属性和方法
如：jQuery.browser、jQuery.trim(str)、jQuery.unique(array)
虽然jQuery命名空间下提供的这些工具方法不是用于DOM操作，而是用于操作普通的字符串、数组和对象的，但这些方法简化了js编程。
例程：
例程：
13、操作DOM元素的CSS属性的相关方法
14、操作元素内容的相关方法
例程：
(1)在指定结点内插入新的结点:append(content)在jQuery对象包含的所有DOM结点的尾部插入;appendTo(selector):将jQuery对象包含的DOM元素添加到selector匹配的所DOM的内部的尾端
(2)prepend(content)、prependTo(selector)与上面的功能相反，即不是插前面，而是插后面
(3)在指定结点外添加新的结点
(1)通用的事件编程相关函数如bind()、hover()、trigger()等
(2)具体事件相关的方法，如：blur、click
$("#test1").click(function(event){
});
17、一些动画效果
jQuery提供了一些效果方法，可直接使用jQuery对象调用
例程：
原文链接：https://www.f2er.com/ajax/164665.html1、使用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",//指定回调函数 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命名空间扩展新的方法
