jQuery

jQuery是JavaScript框架,jQuery也是JavaScript代码。使用jQuery要比直接使用JavaScript方便很多。


要使用jQuery,首先需要在JSP页面中导入jQuery。jQuery就是一个JS文件而已。

导入jQuery:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	  <head>
	    <title>jQuery</title>
	
		<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
		
	  </head>
	  
	  <body>
	    
	  </body>
	</html>

jQuery 核心函数: $()

事件之文档加载完毕

在JavaScript中<body onload="xxx()"> 意义是:在文档加载完毕后执行xxx()函数。
而在jQuery中也存在相同的功能,即:$(function(){...}).
我们给$()这个函数添加一个参数,参数为一个匿名函数,这个匿名函数会在文档加载完毕时执行。

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					alert("文档已经加载完成。")
				})
			</script>
			
		  </head>
		  
		  <body>
		    
		  </body>
		</html>

选择器

1、ID选择器与text()函数

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		<head>
		<title>jQuery</title>
		
		<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
		
		<script type="text/javascript">
		$(function() {
			alert("文档加载完毕");
		
			alert($("#top").text());
			
			$("#top").text("This is Top");
			
			alert($("#top").text())
			
		})
		</script>
		
		</head>
		
		<body>
		Welcome You!
		
		<div id="top">top</div>
		<div id="center"><b>center</b></div>
		<div id="bottom">bottom</div>
		
		</body>
		</html>


2、ID选择器与html()函数

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					alert("文档加载完毕");
				
					var ele = $("#wei");
					
					alert(ele.html());
					
					ele.html("<i>wei</i>")
					
					alert(ele.html());
				})
			</script>
			
		  </head>
		  
		  <body>
		    Welcome You!
		    
		    <div id="top">top</div>
		    <div id="wei"><b>wei</b></div>
		    <div id="bottom">bottom</div>
		    
		  </body>
		</html>


3、元素选择器

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					var ele = $("div");
					alert(ele.length);
				})
			</script>
			
		  </head>
		  
		  <body>
		    Welcome You!
		    
		    <div id="top">top</div>
		    <div id="wei"><b>wei</b></div>
		    <div id="bottom">bottom</div>
		    
		  </body>
		</html>


4、类选择器

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					var ele = $(".top");
					alert(ele.text());
					
					ele.text("This is Top")
					alert(ele.text());
				})
			</script>
			
		  </head>
		  
		  <body>
		    Welcome You!
		    
		    <div id="top" class="top">top</div>
		    <div id="wei"><b>wei</b></div>
		    <div id="bottom">bottom</div>
		    
		  </body>
		</html>


5、属性选择器

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					var ele = $("[name=age]");
					ele.val("19");
					
					$("option[selected=selected]").text("wei");
					alert($("option[selected=selected]").text());
					
					$(":selected").text("pp");
					alert($(":selected").text());
					
					var e = $(":input[name=name]").attr("id");
					alert(e);
					
					$(":input[name=name]").attr("value", "张三");
				})
			</script>
			
		  </head>
		  
		  <body>
		用户名:<input type="text" name="name" id="name"><br/>
		年     龄:<input type="text" name="age"><br/>
		学     历:  
		  <select name="edu">
		  	<option value="1">大学</option>
		  	<option value="2">中学</option>
		  	<option value="3">小学</option>
		  	<option value="4" selected="selected">其它</option>
		  </select><br/>
		   <input type="submit" value="登陆"> 
		    
		  </body>
		</html>


6、样式

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					alert("增加样式");
					$("#myform").addClass("pp");
					alert("去除样式");
					$("#myform").removeClass("pp");
				})
			</script>
			
			<style type="text/css">
			.pp {
				border: 1px solid red;
				width: 500px;
				height: 400px;
			}
			
			</style>
			
		  </head>
		  
		  <body>
		  <form action="" id="myform">
		用户名:<input type="text" name="name" id="name"><br/>
		年     龄:<input type="text" name="age"><br/>
		学     历:  
		  <select name="edu">
		  	<option value="1">大学</option>
		  	<option value="2">中学</option>
		  	<option value="3">小学</option>
		  	<option value="4" selected="selected">其它</option>
		  </select><br/>
		   <input type="submit" value="登陆"> 
		   </form>
		  </body>
		</html>


7、遍历

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					$("option").each(function() {
						alert($(this).text());
					});	
				})
			</script>
			
			<style type="text/css">
			.pp {
				border: 1px solid red;
				width: 500px;
				height: 400px;
			}
			
			</style>
			
		  </head>
		  
		  <body>
		  <form action="" id="myform">
		用户名:<input type="text" name="name" id="name"><br/>
		年     龄:<input type="text" name="age"><br/>
		学     历:  
		  <select name="edu">
		  	<option value="1">大学</option>
		  	<option value="2">中学</option>
		  	<option value="3">小学</option>
		  	<option value="4" selected="selected">其它</option>
		  </select><br/>
		   <input type="submit" value="登陆"> 
		   </form>
		  </body>
		</html>


8、点击事件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					$("#btn").click(function() {
						alert("你点我了!");
					});
					
					$("#btn2").bind("click", function() {
						alert("添加样式");
						$("#myform").addClass("pp");
						alert("去除样式");
						$("#myform").removeClass("pp");
					});
					
					$("#btn2").unbind("click");
				})
			</script>
			
			<style type="text/css">
					.pp {
						border: 1px solid red;
						width: 400px;
						height: 90px;
					}
					
			</style>
		  </head>
		  
		  <body>
		  <form action="" id="myform">
		用户名:<input type="text" name="name" id="name"><br/>
		年     龄:<input type="text" name="age"><br/>
		学     历:  
		  <select name="edu">
		  	<option value="1">大学</option>
		  	<option value="2">中学</option>
		  	<option value="3">小学</option>
		  	<option value="4" selected="selected">其它</option>
		  </select><br/>
		   <input type="submit" value="登陆"> 
		   </form>
		   
		   <button id="btn">点我</button><button id="btn2">点我2</button>
		  </body>
		</html>


9、鼠标事件

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					$("#myform").addClass("pp");
					
					$("#myform").hover(function(){
						$("#name").val("张三来了");
					}, function(){
						$("#name").val("李四来了");
					});
				})
			</script>
			
			<style type="text/css">
					.pp {
						border: 1px solid red;
						width: 400px;
						height: 90px;
					}
					
			</style>
		  </head>
		  
		  <body>
		  <form action="" id="myform">
		用户名:<input type="text" name="name" id="name"><br/>
		年     龄:<input type="text" name="age"><br/>
		学     历:  
		  <select name="edu">
		  	<option value="1">大学</option>
		  	<option value="2">中学</option>
		  	<option value="3">小学</option>
		  	<option value="4" selected="selected">其它</option>
		  </select><br/>
		   <input type="submit" value="登陆"> 
		   </form>
		  </body>
		</html>


10、ajax

		package com.acme.servlet;

		import java.io.IOException;
		import java.io.PrintWriter;
		
		import javax.servlet.ServletException;
		import javax.servlet.http.HttpServlet;
		import javax.servlet.http.HttpServletRequest;
		import javax.servlet.http.HttpServletResponse;
		
		public class AjaxServlet extends HttpServlet {
		
			public void doPost(HttpServletRequest request, HttpServletResponse response)
					throws ServletException, IOException {
		
				request.setCharacterEncoding("utf-8");
				response.setContentType("text/html;charset=utf-8");
				
				System.out.println("POST....");
				
				String value = request.getParameter("val");
				if (value.equals("wei")) {
					response.getWriter().println("{\"name\":\"好人\", \"age\":\"22\"}");
				} else {
					response.getWriter().println("{\"name\":\"坏人\", \"age\":\"84\"}");
				}
			}
		
		}

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>jQuery</title>
		
			<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
			
			<script type="text/javascript">
				$(function() {
					//失去焦点时
					$("#name").blur(function(){
						var value = $("#name").val();
						$.ajax({
							url:"/as",//要请求服务器url
							data:{val:value},//请求参数
							async:true,//是否为异步请求
							cache:false,//是否缓存结果
							type:"POST",//请求方式
							dataType:"json",//服务器返回的数据类型
							success:function(result){//服务器执行成功时处理
								$("label").text(result.name + ", " + result.age);
							}
						});
					});
					
				})
			</script>
		
		  </head>
		  
		  <body>
		用户名:<input type="text" name="name" id="name"><label></label><br/>
		年     龄:<input type="text" name="age"><br/>
		  </body>
		</html>


阅读更多
文章标签: jquery
个人分类: jQuery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭