jQuery

最新推荐文章于 2022-03-03 11:22:19 发布
最新推荐文章于 2022-03-03 11:22:19 发布
阅读量582 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icer_wei/article/details/41823535
版权

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 οnlοad="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>


风凌乱雨纷飞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
乱雨纷飞，当前雨量.bat
08-20
乱雨纷飞，当前雨量.bat
<meta http-equiv="pragma" content="no-cache">
weixin_30326745的博客
08-21 2775
pragma与no-cache 属性值 -- 定义页面缓存 pragma与no-cache用于定义页面缓存 pragma出现在http-equiv属性中，使用content属性的no-cache值表示是否缓存网页 引用网址:http://www.dreamdu.com/xhtml/no-cache/ 不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面...
<meta http-equiv="pragma" content="no-cache">属性http-equiv功能介绍
qq_25600055的专栏
09-09 1914
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。  meat标签的http-equiv属性语法格式是：＜meta http-equiv=”参数” content=”参数变量值”＞ ；其中http-equiv属性主要有以下几种参数： A、
设置html 头 缓存,html头文件设置常用之<meta>设置缓存
weixin_40005542的博客
06-29 389
,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.),常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：1) 打开新窗口 值为private、no-cache、m...
HTML：学习笔记之meta标签详解
KaiSarH
11-11 660
学习笔记之meta标签详解
Java Web Jquery表单验证
最新发布
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
批处理实现乱雨纷飞（黑客帝国特效）
09-21
本文给大家汇总介绍了3种使用批处理来实现的类似黑客帝国的数码雨特效的代码，学会了你也可以去好莱坞做特效啦^_^
登录窗口 在线客服系统
12-27
登录窗口 在线客服系统（带验证码选项） 蓝色星空背景，宁静，沉稳，大气。 让你的系统成完美，更精致！ 谢谢您的下载！也请以后多多关注我的资源！
HTML中meta标签中属性详解并设置页面缓存策略
小小默：进无止境
11-17 6313
【1】简介 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。 该标签主要有两个属性：http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 【2】http-equiv属性 http-equ
使用Cookie登录网页
热门推荐
weixin_52690231的博客
03-03 2万+
使用Cookie登录网页
JSP中<meta http-equiv="pragma" content="no-cache">中http-equiv功能介绍
zwj1030711290的CSDN
04-26 883
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。  meat标签的http-equiv属性语法格式是：＜meta http-equiv=”参数” content=”参数变量值”＞ ；其中http-equiv属性主要有以下几种参数： A、
html头文件设置常用之<meta>设置
小码哥
03-26 1756
,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.) ,常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况： 1） 打开新窗口 值为private、
JSP中<meta http-equiv="pragma" content="no-cache">属性http-equiv功能介绍
勇敢的心的网络笔记
07-09 7212
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是：＜meta http-equiv=”参数” content=”参数变量值”＞ ；其中http-equiv属性主要有以下几种参数：
meta标签清理缓存
dujun
10-09 1438
//meta标签清理缓存 //如果需要在html页面上设置不缓存，这在<head>标签中加入如下语句： <meta http-equiv="Pragma" content="no-cache"> //用于设定禁止浏览器从本地机的缓存中调阅页面内容 <meta http-equiv="Cache-Control" content="no-cache"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值