jQuery

最新推荐文章于 2025-06-24 08:45:44 发布

一个被代码耽误的天才

最新推荐文章于 2025-06-24 08:45:44 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery json json数据形式

本文链接：https://blog.youkuaiyun.com/what_where/article/details/91345492

本文介绍了jQuery的基本概念，包括它作为JavaScript库的角色，以及与JavaScript的区别。接着，文章详细讲解了jQuery的入门，如选择器、事件、对象转换和`this`的作用。还讨论了如何自定义jQuery插件，并提供了创建JavaScript文件的步骤。最后，文章涉及了jQuery中的ajax使用，特别是如何处理JSON数据，包括解决JSON死循环问题和实现省市县三级联动的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.jQuery是什么？

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

极大地简化了 JavaScript 编程。

Javascipt跟jQuery的区别：

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。

jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

2.jQuery的入门

想快速的入门jQuery，首先我们就需要知道它的一个重点。。。写的不是很好,如果你是有一定的基础那我推荐你去看 jQuery的在线文档,或者去菜鸟教程

在线文档:https://www.94xh.com/
菜鸟教程:https://www.runoob.com/jquery/jquery-tutorial.html

2.1，jQuery 选择器

/* //利用a标签获取jQuery实例
		$("a").click(function(){
			alert("aaaa");
		}) */
		
		//ID选择器
		/* $("#a3").click(function(){
			alert("bbb");
		}) */
		
		//类选择器
		/* $(".c1").click(function(){
			alert("ccc");
		}) */
		
		//包含选择器
		/* $("p a").click(function(){
			alert("ccc");
		}) */
		
		//组合选择器
		/* $("a,span").click(function(){
			alert("ccc");
		}) */
		
		//div里面的a标签加上事件,在div标签内部寻找a标签
		//如果是第二个参数没有填，默认是document，body里面
		$("a","div").click(function(){
			alert("dddd")
		})

2.2,jQuery的事件
jQuery的事件有很多，我就截取了一小部分，想知道更加详细的可以去api文档里看
在这里插入图片描述

2.3，js对象转jQuery对象

var h2Node = document.getElementById("h2")
alert(h2Node.value);
//js对象转jQuery对象
var $h2Node = $(h2Node);
alert($h2Node.val());

2.4，jQuery对象转js对象

 var $h1 = $("#h1");
alert($h1.val());

//jQuery对象转js对象,集合
var h1Node = $h1.get(0);
alert(h1Node.value);

//jQuery对象转js对象,数组
var h1Node = $h1[0];
alert(h1Node.value);

2.5，this的作用

	$(function(){
		$(":input").click(function(){
			//this事件源
			alert(this.value)
		$("a").each(function(index,itm){
			//this指当前元素，index是下标
			alert(index+","+$(this).html())
		})
		})
		
	})

3.自定义jQuery插件

要清楚自定义jQuery的插件首先需要清楚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>
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		//json对象的字符串体现形式，json的调试用console.log输出到控制台
		var jsonObj1 = {
				sid:'s001',
				sname:'小胡'
		}
		console.log(jsonObj1);
		
		var jsonObj3 = {
				sid:'s001',
				sname:'小花',
				hobby:["a","b","c"]
		}
		
		
		//json对象的数组体现形式
		var jsonArray = [1,2,3,4,5,6];
		console.log(jsonArray);
		
		//json对象的混合模式体现形式
		var jsons = {id:3,hobby:["a","b","c"]};
		console.log(jsons);
		
		
		//$.extend 是用来扩充jQuery类属性或者方法所有
		var jsonObj2 = {};
		//用后面的对象扩充定义的一个对象
		//$.extend(jsonObj2,jsonObj1);
		
		//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充。
		$.extend(jsonObj2,jsonObj1,jsonObj3);
		console.log(jsonObj2);
		
		$.extend({//自定义方法
			hello:function(){
				alert('我来了1');
			}
		})
		
		$.hello();
		$("#yellow").hello();//出不来，没有hello的实例方法
		alert("aaa");
		
		
		//$.fn.extend 是用来扩充jQuery实例的属性或者方法所用
		
		$.fn.extend({//自定义方法
			hello1:function(){
				alert('我来了2');
			}
		})
		
		$("#yellow").hello1();//可以了用了
		alert("aaa");
		
	})
</script>
</head>
<body>
	<span id="yellow">yellow</span>
</body>
</html>

接下来我们就可以写我们的css和js文件了
这里我就定义了颜色

	  
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

js，如果你不知道怎么建立js文件。点击file – new – 输入javascript 然后选择下面的javascript source file 输入名字，点击finish 就能新建js文件了。知道不？

$(function(){
	
	var defults = {//设置默认的颜色
			head:'fen',
			out:'yellow',
			over:'red'
	}
	$.fn.extend({
		//使用return的原因是让该实例方法支持编程，好比stringbuffer
		bgClolr:function(option){
			$.extend(defults,option);//覆盖
			//这里的this指的是插件本身，可以看成一个jQuery实例
			return this.each(function(){
				//给默认值
				$("tr:eq(0)",this).addClass(defults.head);
				$("tr:gt(0)",this).addClass(defults.out);
				
				//添加动态效果
				$("tr:gt(0)").hover(function(){
					$(this).removeClass().addClass(defults.over);
				},function(){
					$(this).removeClass().addClass(defults.out);
				});
			})
		}
		
	})
	
})

这些文件些好之后我们就可以在我们需要的jsp界面引用就好了，
注意：一定要查看他们的先后顺序，不然会没有用，浏览器按F12查看。

4.ajax

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

Map<String,String> stu = new hashMap<>(); 
stu.add("01","gd"); stu.add("02","zg");
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj););

json死循环问题

1.由双向绑定该成单向绑定，也就是说将彼此之间的关系交于一方维护
2.@JsonImnore:将彼此循环调用的属性忽略，不参与对象转json格式

也可以将json对象转为java对象,在用$.ajax的时候可以转为java对象

var stu = $.pareJSON(str);

利用jQuery的ajax做一个省市县三级联动

思路：利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件。

JsonBaseDao

	public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) {
		return super.executeQuery(sql, pageBean, new Callbac<Map<String, Object>>() {
			public List<Map<String, Object>> foreach(ResultSet rs) {
				List<Map<String, Object>> list=new ArrayList<>();
//				获取源数据
				ResultSetMetaData md = rs.getMetaData();
				int count=md.getColumnCount();
				Map<String, Object> map=null;
				while(rs.next()) {
					map=new HashMap<>();
					for (int i = 1; i < count; i++) {
						map.put( md.getColumnName(i), rs.getObject(i));
					}
					list.add(map);
				}
				return list;
			}
		});
	}

RegionDao

	public List<Map<String, Object>> list(Map<String, String[]> paramMap,PageBean pageBean){
		String id = JsonUtils.getParamVal(paramMap, "ID");
		String sql="select * from ch_region where 1=1";
		if(StringUtils.isBlank(id)) {
			sql+=" and parent_id=7459";
		}
		else {
			sql+=" and parent_id="+id;
		}
		return super.executeQuery(sql, pageBean);
	}

RegionServlet

public class RegionServlet extends HttpServlet {
	
	private static final long serialVersionUID = 6826185684173095882L;
	private RegionDao regionDao=new RegionDao();
	
	
	@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 {
		resp.setContentType("text/html;charset=UTF-8");
		PrintWriter out = resp.getWriter();
		List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
		ObjectMapper om=new ObjectMapper();
		
		out.println(om.writeValueAsString(list).toString());
		out.flush();
		out.close();
	}
	
}

jsp页面，注意id是你数据库的列，名字一定要保持一致

<title>ajax实现省市县三级联动</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:"/reg.do",
			success:function(data){
				for(index in data){
					//把数据追加到后面
					$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
				}
			},
			dataType:"json"
		});
		
		$("#province").change(function(){
			$("option:gt(0)","#city").remove();//清空追加的值
			$.ajax({
				url:"/reg.do?ID="+this.value,//直接的id值
				success:function(data){
					for(index in data){
						$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
					}
				},
				dataType:"json"
			});
		})
		
		$("#city").change(function(){
			$("option:gt(0)","#county").remove();//清空追加的值
			$.ajax({
				url:"/reg.do?ID="+this.value,//直接的id值
				success:function(data){
					for(index in data){
						$("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
					}
				},
				dataType:"json"
			});
		})
	})
</script>
</head>
<body>
	地址：&nbsp;&nbsp;
	<select id="province">
		<option selected="selected">---请选择省份---</option>
	</select>
	<select id="city">
		<option selected="selected">---请选择城市---</option>
	</select>
	<select id="county">
		<option selected="selected">---请选择县区---</option>
	</select>
</body>