jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

陌离～

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量81

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_45349974/article/details/97310143

版权

1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3导入js库

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

4.jQuery的程序入口
(fn)、(document).ready(fn)与window.onload的区别？

<%@ 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的区别？ 
      项目维护的时候需要用到 
 */
 
  window.onload=function(){
	alert("hello jquery3");
} 
  $(document).ready(function () {
		alert("hello jquery2");
	}) 
	
 $(function() {
	alert("hello jquery1");
}) 

 $(document).ready(function () {
	alert("hello jquery2");
}) 

/* 结论:$(fn),$(document).ready(fn)是等价的 ，哪个代码在前面能够先执行
 *      jsp的dom树结构加载完毕即刻调用方法
        window.onload最后执行
        jsp的dom树加载完，css,js等静态资源加载完毕执行
 */
</script>
</head>
<body>

</body>
</html>
在这里插入代码片

4. jQuery三种工厂方法
4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
注1：选择器，css选择器
标签选择器
ID选择器
类选择器
包含选择器：E1 E2
组合选择器：E1,E2,E3
自定义选择器：:exp

<%@ 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>
<script type="text/javascript">
$(function(){
	/*利用a标签获取jquery实例  */
/* 	$("a").click(function(){
		alert("来了，老弟");
	})；
 */
    /*利用id=a3获取jquery实例  */
  /*  $("#a3").click(function(){
	   alert("来了，老弟");
   }) */
   
   /* $(".cl").click(function(){
	   alert("来了，老弟");
   }) */
   
   /* $(p a).click(function(){
	   alert("来了，老弟");
   }) */
   
   /* $("a,span").click(function(){
	   alert("来了，老弟");
   })  */
   
   /* 讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件） */
   /* 如果第二个参数没有填写，那么默认是document */
   $("a","div").click(function(){
	   alert("来了，老弟");
   }) 
})   
</script>
在这里插入代码片

4.2 jQuery对象转js对象

/* var $h1 = $("#h1");
			alert($h1.val());
			//jquery对象转js对象
			//var h1Node = $h1.get(0);
			var h1Node = $h1[0];
			alert(h1Node.value); */
			
在这里插入代码片

4.3 js对象转jQuery对象

			var h2Node = document.getElementById("h2");
			alert(h2Node.value);
			//js对象转jquery对象
			var $h2Node = $(h2Node);
			alert($h2Node.val());
在这里插入代码片

5. this指针的作用

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$(":input").click(function(){
			//指的是事件源
			alert(this.value);
			$("a").each(function(index,item){
				//指的是当前元素
				alert(index+","+$(this).html()+","+$(item).html());
			});
		});
	})
</script>
</head>
在这里插入代码片

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

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

二. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}
2.2 列表/数组
[1,3,4,5]
2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		//json对象的字符串体现形式
		var jsonObj1 = {
				sid:'s001',
				sname:'zhangsan'
		};
		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:'lisi',
				hobby:['a','b','c']
		};
		
		//$.extend是用来扩充jquery类属性或者方法所用
		var jsonObj2 = {};
		//用后面的对象扩充定一个对象
		//$.extend(jsonObj2,jsonObj1);
		//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充。
		$.extend(jsonObj2,jsonObj1,jsonObj3);
		console.log(jsonObj2);
		
		$.extend({
			hello:function(){
				alert('我来了');
			}
		});
		
		$.hello();
		
		//$.fn.extend是用来扩充jquery实例的属性或者方法所用
		$.fn.extend({
			sayHello:function(){
				alert('说早安');
			}
		});
		$("#yellow").sayHello();
		alert("嘿嘿嘿");
		
	})
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>
在这里插入代码片

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>
<style type="text/css">
.over{
 background:  #ff66ff;
}
.out{
 background: #ffff66;
}
.head{
 background: #ff3333;
}
</style>
<script type="text/javascript">
 $(function(){
  //给默认值
  $("tr:eq(0)",this).addClass('head');
  $("tr:gt(0)",this).addClass('out');

  //添加动态效果
  $("tr:gt(0)",this).hover(function(){
   $(this).removeClass().addClass('over');
  },function(){
   $(this).removeClass().addClass('out');
  });
 })
</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>
在这里插入代码片

jquery.table.css

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

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}
在这里插入代码片

jquery.table.js

$(function(){
	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);
				});
			});
		}
	});
})
在这里插入代码片

jsp.common.head.jsp

<%@ 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>

在这里插入代码片

在这里插入图片描述
三. 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));
在这里插入代码片

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

package com.yq;

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;

import entity.Student;

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

在这里插入代码片

2 javaBean与map集合转换成json字符串格式是一样的

package com.yq;

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字符串格式是一样的
 * @author 陌陌
 *
 */
public class Demo2 {
public static void main(String[] args) throws JsonProcessingException {
	Map<String,Object>stu1=new HashMap<>();
	stu1.put("sid", "s001");
	stu1.put("sname", "张三");
	ObjectMapper om=new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));
//	{"id":"s001","name":"张三"}
	Map<String, Object> stu2=new HashMap<String, Object>();
	stu2.put("sid", "s002");
	stu2.put("sname", "李四");
	List<Map<String, Object>> list1=new ArrayList<Map<String,Object>>();
	list1.add(stu1);
	list1.add(stu2);
	System.out.println(om.writeValueAsString(list1));
     
//	[{"id":"s001","name":"张三"},{"id":"s002","name":"李四"}]
	
	
}
}

在这里插入代码片

3. java->json死循环

package com.yq;

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

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

import entity.Student;
import entity.Teacher;

/**
 * json死循环问题
 * 1、由双向绑定改成单向绑定，也就说将彼此之间的关系交于一方维护。
 * 2、@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
 * @author 陌陌
 *
 */
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
	Student stu1 = new Student("s001", "哈哈");
	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实现省市联动
利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件。

JsonBaseDao

public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
		return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
			@Override
			public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				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

package com.yq.dao;

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

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

public class RegionDao extends JsonBaseDao{

	public List<Map<String, Object>> list(Map<String,String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String id = JsonUtils.getParamVal(paramMap, "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[]> paramMap = new HashMap<>();
		paramMap.put("ID", new String[] {"9504"});
		RegionDao regionDao = new RegionDao();
		try {
			List<Map<String, Object>> list = regionDao.list(paramMap, 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();
		}
	}
}
在这里插入代码片

RegionServlet

package com.yq.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.yq.dao.RegionDao;
import com.yq.util.ResponseUtil;

public class RegionServlet extends HttpServlet{
	
	private static final long serialVersionUID = 8455591914786243916L;
    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 {
	try {
		List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
		ObjectMapper om = new ObjectMapper();
		try {
			ResponseUtil.write(resp, om.writeValueAsString(list));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	} catch ( SQLException | InstantiationException | IllegalAccessException e) {
		e.printStackTrace();
	}
}
	}
在这里插入代码片

JsonUtils

package com.yq.util;

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

/**
 * 专门用来处理json数据的工具包
 * @author Administrator
 *
 */
public class JsonUtils {
	/**
	 * 从paramMap拿到咱们所需要用到的查询维度，用于sql语句拼接
	 * @param paramMap	获取从jsp页面传递到后台的参数集合（req.getParamterMap）
	 * @param key
	 * @return
	 */
	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 "";
	}
}
在这里插入代码片

ResponseUtil

package com.yq.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class ResponseUtil {

	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
}
在这里插入代码片

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>jQuery</display-name>
  <servlet>
    <servlet-name>regionServlet</servlet-name>
    <servlet-class>com.yq.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>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/demo10.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
	<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

1. 什么是jQuery它是一个轻量级的javascript类库注1：就一个类“jQuery”，简写“$”2. jQuery优点2.1 总是面向集合2.2 多行操作集于一行3.jQuery的导入库4.jQuery的程序入口(fn)、(document).ready(fn)与window.onload的区别？<%@ page language="java" contentT...
复制链接

扫一扫

jQuery

“相关推荐”对你有帮助么？