jQuery

最新推荐文章于 2024-02-05 22:37:29 发布

Mentality。

最新推荐文章于 2024-02-05 22:37:29 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/chenkang_ck/article/details/93658234

版权

1. 什么是jQuery

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

2. jQuery优点

2.1 总是面向集合
2.2 多行操作集于一行

3. hello jQuery

3.1 导入js库（<script type="text/javascript" src=""></script>）

3.2 $(fn)做为程序入口
项目维护的时候需要用到
代码块

<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 jquery1")
}) 
 */
	/* $(document).ready(function() {
		alert("hello jquery2")
	}) */

/* window.onload= function() {
		alert("hello jquery3");
} */
</script>

/*结论： $(f n) 、$ (document).ready(fn)是等价的，哪个代码在前面哪个先执行
jsp的dom数结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树加载完毕 css，js等静态资源记载完毕执行
*/

4. jQuery三种工厂方法

4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt

<script type="text/javascript">
$(function() {
	/* 利用a标签获取jquery实列 */
	/* $("a").click(function() {
		alert("被翻牌")
	}); */
	
	/* 利用id=a3标签获取jquery实列 */
	/* $("#a3").click(function() {
		alert("被翻牌");
	}) */
	
	/* 利用class=c1类选择器获取jquery实列 */
	/* $(".c1").click(function() {
		alert("被翻牌");
	}) */
	/* 包含选择器 */
	/* $("p a").click(function() {
		alert("被翻牌");
	}); */
	/* 组合选择器 */
	/* $("a,span").click(function() {
		alert("被翻牌");
	}); */
	/* 讲解第二个参数的作用（在div标签内部寻找a标签，然后找到的标签添加事件）
		如果第二个参数没有填那么默认是domect
	*/
	$("a","div").click(function() {
		alert("被翻牌");
	});
	
})
</script>

4.2 jQuery(html) （demo3.jsp）
html：基于html的一个字符串

<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的实列中  */
			$("<option value='-1'>长沙</option>").appendTo("#selId2")
		})
	})
</script>

4.3 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

/* 				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对象转jquery对象 */
				 var $h2Node = $(h2Node);
				alert($h2Node.val());

5. this指针的作用（demo4.jsp）

**
5.1 事件源（获取当前按钮的按钮值）**
6.2 当前元素（点击按钮，获取所有a标签的值）

<script type="text/javascript">
$(function() {
	$(":input").click(function() {
		/* 指的是事件源 */
		alert(this.value);
		$("a").each(function(index,item) {
			/* 指的是当前元素 */
			alert(index+","+$(this).html()+","+$(item).html())
		})
	});
})
</script>

jQuery插件

1. 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">
$(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);
})
</script>

去控制台F12去看

2. $. 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){…};

$.extend({
		hello:function(){
			alert('我来了')
		}
	});
	$.hello();
	/*$.fn.extend是用来jquery实列属性或者方法所用*/
	
	$.fn.extend({
		sayHello:function(){
			alert('叫爸爸吧')
		}
	});
	
	$("#yellow").sayHello();
	alert('yellow')

3. jQuery插件的添加

其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中
在这里插入图片描述
就是把样式写到一个css文件里面去
css文件

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

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

方法也写到一个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);
				
				});
				});
		}
	})
	$("table")
})

然后就是那些引用的文件进行封装

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

这样jsp页面代码简化了很多需要改颜色什么的直接可以改

<script type="text/javascript">
	$(function(){
		$("table").bgColor( {
			head:'green',
			out:'hui',
			over:'blue'
	});
	})
</script>

这段代码j就是引用那些进行封装导入的文件

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

jackson

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

核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
2. jackson将java–>json
2.1 JavaBean/Map
{}

2.2 数组/List/Set
[]

2.3 类里嵌类
混合模式

package com.chenkang;

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

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

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

3. java->json死循环

package com.chenkang;

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

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

/**
 * json死循环问题
 * 
 * @author Administrator
 *
 */
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.setStu(stus);
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
}
}

1.由双向绑定改成单向绑定。也就是说将彼此之间的关系交于一方维护
2. 加上@JsonIgnore/程序控制
就能正常运行出来！！

AJAX的应用

JsonBaseDao

package com.chenkang.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.chenkang.dao;

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

import com.dengrenli.util.JsonBaseDao;
import com.dengrenli.util.JsonUtil;
import com.dengrenli.util.PageBean;
import com.dengrenli.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.chenkang.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.chenkang.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.dengrenli.dao.RegionDao;
import com.dengrenli.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.chenkang.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>

Mentality。

关注

0
点赞
踩
0

收藏

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

1. 什么是jQuery它是一个轻量级的javascript类库注1：就一个类“jQuery”，简写“$”2. jQuery优点2.1 总是面向集合2.2 多行操作集于一行3. hello jQuery3.1 导入js库（<script type="text/javascript" src=""></script>）3.2 $(fn)做为程序入口项目维护...
复制链接

扫一扫