jQuery的补充

最新推荐文章于 2024-09-17 00:21:13 发布

不愿秃头的阳某

最新推荐文章于 2024-09-17 00:21:13 发布

阅读量317

点赞数

分类专栏：前端文章标签： jQuery

本文链接：https://blog.csdn.net/qq_43517653/article/details/91163814

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

文章目录

三种工厂方法

操作全部是再导入了jQuery的文件的前提下

一、选择器

标签选择器
$(“标签名”)

id选择器
$("#id")

class选择器
$("#class")

包含选择器 E1 E2
$(“span p”) 找到span里面的p

组合选择器 E1,E2,E3
$(“span”,“a”,“div”).click()同时找到这几个标签并给他们添加点击事件

二、通过html创建jQuery对象
让复选框根据数据选中

	$(function(){
		var checked='${s.shobby}';//你数据库传过来的数据
		var ck=checked.split(",");
		$.each(ck,function(n,val){
			$(":checkbox[name='shobby'][value="+val+"]").prop("checked",true);
		});
	})

我们可以利用按钮给下拉框添加内容

<script type="text/javascript">
	$(function(){
		$(":input[name='name1']").click(function(){
			//再id=sel1的jquery实例上追加
			$("#sel1").append("<option value='1'>湖南省</option>")
		})
		$(":input[name='name2']").click(function(){
			//将"<option value='1'>长沙</option>"html  jQuery实例追加带id=sel2中
			$("<option value='1'>长沙</option>").appendTo("#sel2 ")
		})
</script>
<body>
	<select id="sel1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="sel2">
		<option value="-1">---请选择---</option>
	</select>
	<input type="button" name="name1" value="add1" />
	<input type="button" name="name2" value="add2" />
</body>

三、JS对象和jQuery对象的转换 jQuery(element)

<script type="text/javascript">
		/*var $h1=$("#h1");
		alert(h1.val());
		//jQuery对象转js对象
		 var h1Node=$h1.get(0);
		alert(h1Node.value); */
		
		var h2=documnet.getElementById("h2");
		alert(h2.value);
		//js对象转jQuery对象
		var $h2Node=$(h2);
		alert($h2Node.val());
</scirpt>
<body>
	<input type="hidden" id="h1" value="h1" />
	<input type="hidden" id="h2" value="h2" />
	<input type="hidden" id="h3" value="h3" />
</body>

jQuery插件

利用$.extend来进行值的扩充

<script type="text/javascript">
	$(function(){
		//$.extend是用来扩充jquery类属性或者方法所用的
		 var json={
				sid:'s001',
				sname:'list',
				hobby:['a','b','c','d']
		}
		 var json1={
					sid:'s002',
					sname:'list1',
					hobby:['a1','b1','c1','d1']
			}
		
		var json2={};
		//用后面的对象扩充定一个对象
		$.extend(json2,json2)
	//	讲解扩充值覆盖的问题，之前以及扩充的属性值会被后面的对象所覆盖，如果后面有新的属性，还会继续扩充
		$.extend(json3,json,json1)
	})

利用$.extend来写方法

		$.extend({
			hello:function(){
				alert('我来了');
			}
		})
		$.hello(); //结果还是弹出了‘我来了’

封装通用的jsp文件

这是我封装好的文件夹
在这里插入图片描述
这是我的head.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="jquery/table/js/jquery.table.js"></script>
<script type="text/javascript">
	$(function(){
		$("table").bgColor({
			head:'fen',
			out:'red',
			over:'hui'
		});
	})
</script>
</head>
<body>
	<table id="t1" border="1px" width="100%">
	<tr>
			<td>姓名</td>
			<td>性别</td>
			<td>爱好</td>
			<td>地址</td>
		</tr>
		<tr>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
		</tr>
		<tr>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
		</tr>
		<tr>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
		</tr>
		<tr>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
		</tr>
		<tr>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
			<td>aaaaa</td>
		</tr>
	</table>
</body>
</html>

然后我在一个空白的jsp文件导入我的head.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>
</head>
<body>

</body>
</html>

效果一样能出来
在这里插入图片描述

ajax

利用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>