jQuery

最新推荐文章于 2023-06-17 16:21:37 发布

小伙.

最新推荐文章于 2023-06-17 16:21:37 发布

阅读量169

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44393285/article/details/97339478

版权

一. jQuery入门

1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”

2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行

3.导入jquery.min.js文件
在这里插入图片描述

在导入js文件库

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>

用$(function)做程序入口
$(function)的三种写法

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
  /* $(fn).$(document).ready(fn)与window.onload的区别？ */
/*   项目维护时候需要用到 */
     //第一种
     /* $(function () {
		alert("hello jquery");
	}) */
	//第二种
	/* $(document).ready(function () {
		alert("hello jquery2");
	}) */
	//第三种
	window.onload=function(){
		alert("hello jquery3");
  }
/*   结论:$(fn),$(document).ready(fn)是等价的 哪个代码在前面哪个先执行
  jsp的dom树结构加载完毕即刻调用方法
  window.onload最后执行
  jsp的dom树加载完毕，css，js等静态资源加载完毕执行*/
</script>
</head>
<body>

</body>
</html>

4. jQuery三种工厂方法

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
/*    $(function () {
	   利用a标签获取jquery实例
	$("a").click(function () {
		alert("被翻牌子了");
	}); */
	/* 利用id=a3获取jquery实例
	$("#a3").click(function () {
		alert("被翻牌子了");
	});  */
/* 	$(".c1").click(function () {
		alert("被翻牌子了");
	});  */ 
	/* $("p a").click(function () {
		alert("被翻牌子了");
	}); */
	/* $("a,span").click(function () {
		alert("被翻牌子了");
	}); */
	//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签加事件）
	//如果第二个参数没有填，那么默认是document
	$("a","div").click(function () {
		alert("被翻牌子了");
	});
})
</script>
 
</head>
<body>
	<p>
		<a id="a1" class="c1" href="#">点我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">点我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">点我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>
	<span>点我</span>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    $(function () {
		$(":input[name='name1']").click(function () {
			//在ID=selId1的select的jquery实例上追加"<option value='1'>湖南省</option>"的html  jquery实例
			$("#selId1").append("<option value='1'>湖南省</option>");
		});
		
		$(":input[name='name2']").click(function () {
		//将"<option value='1'>长沙市</option>"的html  jquery实例追加到id=selId2的select标签jquery实例中
			$("<option value='1'>长沙市</option>").appendTo("#selId2");
		
		   /* var $h1 =$("#h1");
		   alert($h1.val());
		   //jquery对象转js对象
		   //var h1Node=$h1.get(0);
		   var h1Node=$h1[0];
		   alert(h1Node.value); */
		
		   var h2Node=document.getElementById("h2");
		   alert(h2Node.value);
		   //js对象转js对象
		   $h2Node $(h2Node);
		   alert(h2Node.val());
		});
	})
</script>
</head>
<body>


	<select id="selId1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="selId2">
		<option value="-1">---请选择2---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">
</body>
</html>

5. this指针的作用

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script><title>Insert title here</title>
<title>Insert title here</title>
<script type="text/javascript">
/*  this:1.事件源*/
$(function() {
	$(":input").click(function(){
	alert(this.value);	
	/* 2.this:当前元素 */
	$("a").each(function (index,item) {
		alert(index+","+$(this).html()+","+$(item));
		
	});
	
	});
	
})


</script>
</head>
<body>
	<p>
		<a id="a1" class="c1" href="#">点我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">点我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">点我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>
	
	<input type="button" value="ok">

</body>
</html>

6、使用jquery动态给table添加样式

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<style type="text/css">
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
	$("table tr:eq(0)").addClass("yello");
	$("table tr:gt(0)").addClass("red");
	
	$("table tr:gt(0)").hover(function(){
		$(this).removeClass().addClass("fen");
	},function(){
		$(this).removeClass().addClass("red");
	});
})
</script>
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

运行的结果为：
在这里插入图片描述

二. jQuery插件

1. 插件机制简介

往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式

2.1 对象
{sid:‘s01’,sname:‘zs’}
2.2 列表/数组
[1,3,4,5]

2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}

$. e x t e n d 和$ .fn.extend
2.1 $.extend：对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,…])
$.extend(obj1,obj2)
$. e x t e n d (o b j 1) /$ .method=function(options){…};

2.2 $.fn.extend
$. f n . e x t e n d (o b j 1) / /$ .fn.method=function(options){…};

json的三种格式（extend，extend，extend）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script><title>Insert title here</title>
<title>Insert title here</title>
<script type="text/javascript">
//插件的基本知识:
$(function () {//程序入口
	//json对象的字符串体现形式
	//第一种形式 json对象
	var jsonObj1 ={
		 sid:'s002',
		sname:'lhj'
};
console.log(jsonObj1);	
//第二种形式：json数组的字符串体现形式
var jsonArray1=[1,3,4,5];
console.log(jsonArray1);
//第三种形式：json混合模式的字符串体现形式
var jsons={id:3,hobby:['a','b','c']};
console.log(jsons);

var jsonObj3 ={
		 sid:'s002',
		 sname='lbw',
		 hobby:['a','b','c']
};

//$.extend是用来扩充jquery类、属性或者方法所用
var jsonObj2 = {};
//用后面的对象扩充第一个对象
//$.extend(jsonObj2,jsonObj1)
$.extend(jsonObj2,jsonObj1,jsonObj3);//讲解扩冲值覆盖问题,之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性扩充，会继续扩充
console.log(jsonObj2);


$.extend({
	hello:function(){
		alert('我来了');
	}
});
$.hello();


</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>

3. jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

4.jQuery插件开发实例
4.1 命名
jquery.xxx.js

4.2 扩展实例方法

4.3 如何面向集合

4.4 如何多行集于一行

4.5 命名参数的写法
$.extend(defaults,options);

创一个css样式跟js文件
在这里插入图片描述

css样式：

@charset "UTF-8";
	  
.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

js文件：

var defaults={
		head : 'fen',
		 out : 'yellow',
		over : 'red'
}
$.fn.extend({
	//使用return的原因是让该实例方法支持链编程，好比Stringbuffer
	bgColor:function(option){
		$.extend(defaults,option);
		
		//this指的是插件本身，可以看成一个jquery实例
		return this.each(function() {
			//this指的是当前元素
			//给默认值
			$(" tr:eq(0)",this).addClass(defaults.head);
			$("tr:gt(0)",this).addClass(defaults.out);
			
			//添加动态效果
			$("tr:gt(0)",this).hover(function(){
		  $(this).removeClass().addClass(defaults.over);
			},function(){
		  $(this).removeClass().addClass(defaults.out);
			});
		});
	}

});

把css和js代码封装在head.jsp页面，然后在页面调用head.jsp里面的css样式和js代码的库：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE>
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/table/js/jquery.table.js"></script>

<%@ include file="/jsp/common/head.jsp" %>

jsp页面为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/jsp/common/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$("table").bgColor({
			head:'blue',
			out:'hui',
			over:'green'
		});
	})
</script>
</head>
<body>
	<table id="t1" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
	<table id="t2" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

输出的结果为：
在这里插入图片描述

三.ajax

1. jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象

ObjectMapper mapper = new ObjectMapper();
   mapper.writeValueAsString(obj);
   
   int count = md.getColumnCount();
   map.put(md.getColumnName(i), rs.getObject(i));

2.jackson将java–>json
2.1 JavaBean/Map
{}
2.2 数组/List/Set[]
2.3 类里嵌类
混合模式

package com.LX.jquery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.LX.entity.Student;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * 后台json的三种格式的体现形式
 *后台三种格式的体现形式
 *
 */
public class Dome1 {
	public static void main(String[] args) throws Exception {
		Student stu1 = new Student("s001","张三");
		//1.json对象   jackson.databind.ObjectMapper;
		ObjectMapper om = new ObjectMapper();
		System.out.println("json对象:"+om.writeValueAsString(stu1));
		
		//2 json数组
		Student stu2 = new Student("s002", "李四");
		List<Student> list1 = new ArrayList<Student>();
		list1.add(stu1);
		list1.add(stu2);
		System.out.println("json数组:"+om.writeValueAsString(list1));
		
		//3 json混合模式
		Map<String , Object> map = new HashMap<String, Object>();
		map.put("total", 2);
		map.put("stus", list1);
		System.out.println("json混合："+om.writeValueAsString(map));
	}
}

package com.LX.jquery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 *javaBean与Map集合转化成json字符串格式是一样的
 *
 */
public class Dome2 {
	public static void main(String[] args) throws JsonProcessingException {
		Map<String, Object>stu1=new HashMap<String, Object>();
		stu1.put("sid", "s001");
		stu1.put("sname", "张三");
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
		
	Map<String, Object>stu2=new HashMap<String, Object>();
		stu2.put("sid", "s002");
		stu2.put("sname", "李四");
		
		List<Map<String, Object>> list1=new  ArrayList<>();
		list1.add(stu1);
		list1.add(stu2);
		System.out.println(om.writeValueAsString(list1));
			
	}
}

3.java->json死循环
忽略双向关联的一个方向即可
@JsonIgnore/程序控制

package com.LX.jquery;

import java.util.HashSet;
import java.util.Set;

import com.LX.entity.Student;
import com.LX.entity.Teacher;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * 
 *json死循环问题
 */
public class Dome3 {
	/**
	 * StackOverflowError栈溢出 双向绑定
	 * 1.由双向绑定改成单向，就是将彼此之间的关系交于一方维护
	 * 2.@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
	 */
	public static void main(String[] args) throws JsonProcessingException {
		Student stu1=new Student("soo1", "老王");
		Student stu2=new Student("s002", "陈独秀");
		Teacher tea1=new Teacher("t001", "左阿皮", null);
		Teacher tea2=new Teacher("t002", "骚鸡", null);
		Set<Teacher>teas=new HashSet<>();
		teas.add(tea1);
		teas.add(tea2);
		stu1.setTeas(teas);
		Set<Student>stus=new HashSet<>();
		stus.add(stu1);
		stus.add(stu2);
		tea1.setStus(stus);//双向绑定，栈溢出
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
		
	}
}

4.$.ajax实现省市联动例子

ReginDao

package com.LX.dao;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.LX.util.JsonBaseDao;
import com.LX.util.JsonUtils;
import com.LX.util.PageBean;
import com.LX.util.StringUtils;

public class ReginDao extends JsonBaseDao {
public List<Map<String, Object>>list(Map<String, String[]>paraMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String id=JsonUtils.getParamVal(paraMap, "ID");
	String sql="select * from ch_region where true";
	if(StringUtils.isBlank(id)) {
		sql += " and parent_id=7459 ";
		
	}else {
		sql += " and parent_id="+id;

	}
	
	return super.executeQuery(sql, pageBean);
	
}
	
	public static void main(String[] args) {
		Map<String, String[]>paraMap=new HashMap<String, String[]>();
		paraMap.put("ID", new String[]{"9504"});
		ReginDao reginDao=new ReginDao();
		try {
		List<Map<String, Object>>list=reginDao.list(paraMap, null);
		System.out.println(list);
	} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	
}

JsonUtils:用来处理json数据的工具包

package com.LX.util;

import java.util.Arrays;
import java.util.Map;

/**
 * 专门用来处理json数据的工具包
 *
 */
public class JsonUtils {
	/**
	 * 从paramMap拿到咱们所需要用到的查询维度，用于sql语句拼接
	 * paramMap 获取从jsp页面传递到后台的参数集合（req.getParamterMap）
	 * key
	 * 
	 */
	public static String getParamVal(Map<String,String[]> paramMap, String key) {
		if(paramMap != null && paramMap.size()>0) {
			String[] vals = paramMap.get(key);
			if(vals != null && vals.length > 0) {
				String val = Arrays.toString(vals);
			return val.substring(1, val.length()-1);
			}
			return "";
		}
		return "";
	}
	
	
	
}

RegionServlet

package com.LX.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.LX.dao.ReginDao;
import com.LX.util.ResponseUtil;

public class RegionServlet extends HttpServlet {


	private static final long serialVersionUID = -7694858310078820183L;
private ReginDao reginDao=new ReginDao();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
     List<Map<String, Object>> list=reginDao.list(req.getParameterMap(), null);
     ObjectMapper om=new ObjectMapper();
     ResponseUtil.write(resp, om.writeValueAsString(list));
} catch (InstantiationException | IllegalAccessException | SQLException e) {
	e.printStackTrace();
		} catch (Exception e) {
	e.printStackTrace();
}
		
	}
}

JS代码：

$(function(){
	var ctx = $("#ctx").val();
	$.ajax({
		url:ctx+"/regionServlet",
		success:function(data){
			for(index in data){
				//console.log(data[index]);
				$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
			}
		},
		dataType:"json"
	});
	
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();//清空
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
			success:function(data){
				for(index in data){
					//console.log(data[index]);
					$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
				}
			},
			dataType:"json"
		});
	});
})

web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>Pro_jquery</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  <servlet-name>regionServlet</servlet-name>
 <servlet-class>com.LX.web.RegionServlet</servlet-class>
  </servlet>
 <servlet-mapping>
 <servlet-name>regionServlet</servlet-name>
 <url-pattern>/regionServlet</url-pattern>
 </servlet-mapping>
  
</web-app>

jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script><title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/demo10.js"></script><title>Insert title here</title>

<title>Insert title here</title>
</head>
<body>
<div>
<input type="hidden"id="ctx" value="${pageContext.request.contextPath}">
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
	<h1>$.ajax实现省市联动</h1>
	<div>
		收货地址&nbsp;&nbsp;
		<select id="province">
			<option selected="selected">---请选择省份---</option>
		</select>&nbsp;&nbsp;
		<select id="city">
			<option selected="selected">---请选择城市---</option>
		</select>&nbsp;&nbsp;
		<select id=" county">
			<option selected="selected">---请选择县区---</option>
		</select>
	</div>
</div>
</body>
</html>

运行的结果为：
在这里插入图片描述

在这里插入图片描述

小伙.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

一. jQuery入门1. 什么是jQuery它是一个轻量级的javascript类库注1：就一个类“jQuery”，简写“$”2. jQuery优点2.1 总是面向集合2.2 多行操作集于一行3.导入jquery.min.js文件在导入js文件库<script type="text/javascript" src="${pageContext.request.conte...
复制链接

扫一扫