jQuery

最新推荐文章于 2021-06-11 15:00:52 发布

qq_45177371

最新推荐文章于 2021-06-11 15:00:52 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/qq_45177371/article/details/93702777

版权

jQuery

jQuery是什么
jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。
极大地简化了 JavaScript 编程。
Javascipt跟jQuery的区别：
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。
jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
(fn)、 (fn)、(fn)、(document).ready(fn)与window.onload的区别？
(fn)、 (fn)、(fn)、(document).ready(fn)是等价的，那个在前面就先执行哪一个，它们是等jsp的dom树结构加载完毕即刻调用方法。
window.onload是最后执行等jsp的dom树加载完，css,js等静态资源加载完毕执行。
js对象与jquery对象的相互转换

<script type="text/javascript">
 $(function() {
  var $h1 = $("#h1");
  alert($h1.val());
  //jquery对象转js对象
  var h1Node = $h1.get(0);
  alert(h1Node.value);
  
  var h2Node = document.getElementById("h2");
  alert(h2Node.value);
  //jquery对象转js对象
  var $h2Node = $(h2Node);
  alert($h2Node.val());
 })
</script>

this指针的作用：1 事件源（获取当前按钮的按钮值）2 当前元素（点击按钮，获取所有a标签的值）
插件机制简介：在实际的项目开发中，很多时候会用一些特殊的处理手段，很多时候会在现有jQuery的基础上进行扩展一些方法或者制作一些插件。往jquery类库里面去扩展方法，这类方法就是jquery插件
json的三种格式：

//json对象字符串体现形式
  var jsonObj1 = {
   sid:'s001',
   sname:'zhangsan'
  };
  //json数组字符串体现形式
  var jsonArray1 = [1,2,3,4];
  console.log(jsonArray1);
  //json混合模式字符串体现形式
  var jsons = {id:3,hobby:['a','b','c']};
  console.log(jsons);

$.extend：是用来扩充jquery类属性或者方法所用

var jsonObj1 = {
   sid:'s001',
   sname:'zhangsan‘
  };
  var jsonObj2 = {};
  //用后面的对象扩充第一个对象
  $.extend(jsonObj2,jsonObj1);

如果扩充值覆盖问题，之前已经扩充的属性值会被后面的对闲值所覆盖，如果后面对象有新的属性会继续扩充

var jsonObj1 = {
   sid:'s001',
   sname:'zhangsan‘
  };
  var jsonObj3 = {
    sid:'s002',
    sname:'lishi',
    hobby:['a','b','c']
   };
   var jsonObj2 = {};
   $.extend(jsonObj2,jsonObj1,jsonObj3);
   console.log(jsonObj2);

$.fn.extend：是用来扩充jquery实例的属性值或者方法所用

$.extend({
   hello:function(){
    alert('我来了');
   }
  });
  $.hello();
  $.fn.extend({
   sayHello:function(){
    alert('我来了2');
   }
  });
  
  $("#yellow").sayHello();
  alert("yellow");//这样写才会出来'我来了2和yellow

以上代码结果如下：

在这里插入图片描述
jQuery插件开发实例：
为了满足客户需求，如下图有的客户想要头部为红色，主体为绿色，有些客户想要头部为绿色，主体为蓝色，我们可以copy到其他界面去把颜色改了，但是为了方便开发人员后期维护，我们就开发一个插件，只要调用方法就可以改变它的颜色。

<%@ 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(){
  $("table").each(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的css样式：

@charset "UTF-8";
.fen {
 background: #ff66ff;
}
.yellow {
 background: #ffff66;
}
.red {
 background: #ff3333;
}
.blue {
 background: #9999ff;
}
.green {
 background: #bbff99;
}
.hui {
 background: #d6d6c2;
}
<link href="${pageContext.request.contextPath }/js/jquery.table.css" type="text/css" rel="stylesheet"/>

接着我们要建一个/jquery/table/js/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页面：

修改前script里面要写这些
<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(){
  $("table").each(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="t
 修改后
 <script type="text/javascript">
 $(function(){
  $("table").bgColor({
    head : 'blue',
    out : 'green',
    over : 'hui'
  });
 })
</script>

只要把css样式和js文件导入进去就可以动态修改样式了

<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table1.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

因为每次修改颜色，我们都要导入css样式和js文件，所以我们把他进行封装到head.jsp里面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table1.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>

在jsp页面中导入文件head.jsp进行了：

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

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

//json数组
  Student stu1 = new Student("s001", "zhansan");
  ObjectMapper om = new ObjectMapper();
  System.out.println(om.writeValueAsString(stu1));

//json数组
  Student stu2 = new Student("s002", "lisi");
  List<Student> list = new ArrayList<>();
  list.add(stu1);
  list.add(stu2);
  System.out.println(om.writeValueAsString(list));

//json混合格式
  Map<String, Object> map = new HashMap<>();
  map.put("total", 2);
  map.put("stus", list);
  System.out.println(om.writeValueAsString(map));

在这里插入图片描述
javaBean与map集合转换chengjson字符串格式是一样的。
json死循环问题

public class Demp3 {
 public static void main(String[] args) throws Exception {
  Student stu1 = new Student("s001", "aaa");
  Student stu2 = new Student("s002", "bbb");
  Teacher teas1 = new Teacher("t001","ccc",null);
  Teacher teas2 = new Teacher("t002","ddd",null);
  Set<Teacher> teas = new HashSet<>();
  teas.add(teas1);
  teas.add(teas2);
  stu1.setTeas(teas);
  Set<Student> stu = new HashSet<>();
  stu.add(stu1);
  stu.add(stu2);
  teas1.setStu(stu);
  ObjectMapper om = new ObjectMapper();
  System.out.println(om.writeValueAsString(stu1));
 }
}

在这里插入图片描述

解决这个问题我们可以：1由双向绑定改成单向绑定，也就是说将彼此之间的关系交予一方维护。2@JsonIgnore:将彼此循环调用的属性忽略，不参与对象转成json格式
jQuery的ajax请求
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过JavaScript DOM更新一部分节点。期间数据传输可采用xml，json等格式。其实不刷新整个页面便可与服务器通信的方法有很多，比如Flash，Java applet，iframe等，但Ajax是目前最为常见的一种。

AJAX的应用

JsonBaseDao

package com.HC.util;

import java.lang.reflect.Field;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.ResultSetMetaData;

import javafx.util.Callback;

public class JsonBaseDao extends BaseDao<Map<String, Object>> {
	
	 public final List<Map<String, Object>> executeQuery(String sql,PageBean pageBean ) {
		return super.executeQuery(sql, pageBean, new Callback<Map<String, Object>>(){
			public List<Map<String, Object>> foreach(ResultSet rs) {
				
			   /**
				 * 1、创建一个实体类
				 * 2、给创建的实例属性赋值
				 * 3、将添加完内容的实体添加到list集合中
				 * 
				 */
				List<Map<String, Object>> list = new ArrayList<>();
//				获取原数据
				java.sql.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.HC.dao;

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

import com.HC.util.JsonBaseDao;
import com.HC.util.JsonUtil;
import com.HC.util.PageBean;
import com.HC.util.StringUtils;

public class RegionDao extends JsonBaseDao {

	public List<Map<String, Object>> list(Map<String, String[]> paMap, PageBean pageBean){
		String id = JsonUtil.getParamVal(paMap, "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> paMap = new HashMap<>();
		PageBean pageBean = new PageBean();
		Map<String, String[]> paMap = new HashMap<>();
		paMap.put("ID", new String[] {"9504"});
		RegionDao regionDao = new RegionDao();
		
		List<Map<String, Object>> list = regionDao.list(paMap, pageBean);
		System.out.println(list);
	}
}

JsonUtil（处理Json数据）

package com.HC.util;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 专门用来处理Jon数据的工具包
 * @author Administrator
 *
 */

public class JsonUtil {
	
	/**
	 * 从paMap拿到咱们所需要用到的查询维度，用于sql语句拼接
	 * @param paMap    获取从jsp页面传递到后台的 参数集合（req.getPaMap）
	 * @param key
	 * @return 
	 */
	public static String getParamVal(Map<String, String[]> paMap,String key) {
		if(paMap != null && paMap.size() > 0) {
			String[] vals = paMap.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.HC.web;

import java.io.IOException;
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.HC.dao.RegionDao;
import com.HC.util.ResponseUtil;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.fabric.Response;

public class RegionServlet extends HttpServlet {


	private static final long serialVersionUID = 502710496798533506L;

	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 {
		
			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();
			}
	}
}

ResponseUtil

package com.HC.util;

import java.io.IOException;
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.print(o.toString());
		out.flush();
		out.close();
	}
}

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/jquery.demo10.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
	var ctx = $("#ctx").val();
	$.ajax({
		url:"/regionServlet",
		success:function(data){
			for(index in date){
				//console.log(data[index]);
				$("#province").append("<option value='"+date[index].ID+"'>"+date[index].REGION_NAME+"</option>")
			}
		},
		dataType:"json"
	});
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();
		$.ajax({
		url:"/regionServlet?ID="+this.value,
		success:function(data){
			for(index in date){
				//console.log(data[index]);
				$("#city").append("<option value='"+date[index].ID+"'>"+date[index].REGION_NAME+"</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>
<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>

方法描述：

方法描述
$.ajaxPrefilter()	在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项

$.ajax()	执行异步 AJAX 请求
$.ajaxSetup()	为将来的 AJAX 请求设置默认值
$.ajaxTransport()	创建处理 Ajax 数据实际传送的对象
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()	使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()	创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()	规定 AJAX 请求完成时运行的函数
ajaxError()	规定 AJAX 请求失败时运行的函数
ajaxSend()	规定 AJAX 请求发送之前运行的函数
ajaxStart()	规定第一个 AJAX 请求开始时运行的函数
ajaxStop()	规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()	规定 AJAX 请求成功完成时运行的函数
load()	从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()	编码表单元素集为字符串以便提交
alizeArray()	编码表单元素集为 names 和 values 的数