Ajax学习笔记(三)

前端之家收集整理的这篇文章主要介绍了Ajax学习笔记(三)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
三、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",//指定回调函数
			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命名空间扩展新的方法
原文链接:https://www.f2er.com/ajax/164665.html

猜你在找的Ajax相关文章