jquery

最新推荐文章于 2022-11-16 10:54:32 发布
最新推荐文章于 2022-11-16 10:54:32 发布
阅读量87 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45355343/article/details/97324568
版权

1.什么是jQuery
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

先弄一个文件夹把jquery架包弄进去
在这里插入图片描述
jQuery三种工厂方法
标签选择器

$("p").click(function(){
 		alert(“hello”);
})

类选择器

$(".c1").click(function(){
 	alert(“hello”);	
 })

组合选择器

$("p a").click(function(){
			alert(“hello”);
})

自定义选择器

$("p","div").click(function(){
			alert(“hello”);
})

jQuery(html)

<script type="text/javascript">
	$(function () {
		$(":input[name='name1']").click(function () {
			$("#selId1").append("<option value='1'>湖南</option>")
		})
		$(":input[name='name2']").click(function () {
			$("<option value='1'>长沙</option>").appendTo("#selId2");	
		})
		
	})
</script>

jQuery(element)

//jquery对象转为js对象
		var $qu = $("#jj");
		var qu = $qu.get(0);//第一种
		var qu = $qu[0];//第二种
		alert(qu.value);
//js对象转为jquery对象
		var qu = document.getElementById("#jj");
		$qu = $(qu);
		alert($qu.html());

.jQuery程序的入口

<script type="text/javascript">
 	$(function () {
		alert("hello jquery");
	}) 
	
	$(document).ready(function () {
		alert("hello jquery");
	}) 
	
	window.onload = function(){
		alert("hello jquery");
	}
</script>

第二个2.JQuery插件
第一个知识点 2.1 json的三种格式

<script type="text/javascript">
	$(function () {
	//	json对象
		var jsonObj1={sid:'s001',sname:'zhangsan'}
	//  控制台里看json对象属性
		console.log(jsonObj1);
		
	//  json数组
		var jsonArray=[1,2,3,4];
		console.log(jsonArray);
	//  混合模式下的json	
		var jons={id:3,hobby:['A','B','C']}
		console.log(jons)；
	})
</script>

2.2 $.extend $.fn.extend
2.3 $.extend：对象的扩展(或继承)
// 用后面对象的扩充前面的对象

var jsonObj2={};
		$.extend(jsonObj2,jsonObj1)
	console.log(jsonObj2);

// 用后面的两个对象扩充第一个对象，之前已经扩充的属性值会被后面的对象覆盖，如果后面对面对象有新的属性，就会继续扩充

var jsonObj2={};
			$.extend(jsonObj2,jsonObj1,jsonObj3)
	console.log(jsonObj2);

$.fn.extend

$.extend({
			hello:function(){
				alert("呵呵");
			}
		})	
			$.hello();	
// $.fn.extend是用来扩充实例的属性或者方法所用			
		$.fn.extend({
			sayhello:function(){
				alert("呵呵");
			}
		})	
		$("#yellow").sayhello(){
			alert("yellow");
		}
		$.sayhello();

4.jQuery插件开发实例
可以通过而改变颜色

$(function(){
	var defaults={
			head:'green',
			out:'hui',
			over:'blue'
	}
		$.fn.extend({
			//使用retrun的原因是让该实例方法支持链编程，好比Stringbuffer
			bgColor:function(option){
				$.extend(defaults,option);
				//	这里的this指的是插件本身
				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);
				});
				});
				}
	});
});
<script type="text/javascript">
	$(function () {
		$("table").bgColor({
				head:'blue',
				out:'green',
				over:'green'
		})
	})
</script>

在这里插入图片描述
`第三个 3.ajax

核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));
2. jackson将java–>json
2.1 JavaBean/Map

//		json对象
		Student stu=new Student("s001","zhangsan");
		ObjectMapper mapper=new ObjectMapper();
		System.out.println(mapper.writeValueAsString(stu));

2.2 数组/List/Set

//		json数组
		Student stu1=new Student("s002","李四");
		List<Student> list=new ArrayList<>();
		list.add(stu1);
		list.add(stu);
		System.out.println(mapper.writeValueAsString(list));

混合模式

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

AJAX的应用
JsonBaseDao

package com.lj.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<>();
//				获取原数据
				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.lj.dao;

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

import com.lj.util.JsonBaseDao;
import com.lj.util.JsonUtil;
import com.lj.util.PageBean;
import com.lj.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.lj.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.lj.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.lj.dao.RegionDao;
import com.lj.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.lj.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>
哇，你怎么这么好看
关注
jQuery
谁D了我的BUG
05-22 405
学习jQuery学习重点 1.掌握如何使用jQuery的【选择器和过滤器】定位DOM对象 2.掌握【jQuery对象功能函数】--------定位DOM对象 jQuery对象和DOM对象的关系： DOM对象：是由浏览器负责创建对象。DOM对象管理对应的html标签 一个html标签对应一个DOM对象 jQuery对象：是由jQuery函数($())负责创建的对象；jQuery对象本质上就是一个数组...
JQuery的引用
zwjl1017的博客
04-01 4068
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3452
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
基于大模型技术的算力产业监测服务平台设计
09-17
内容概要：本文提出了一种新型算力产业监测服务平台的设计理念，运用国内自主研发的大模型技术支持，通过对传统技术的改进和完善，提出了三层架构的设计方法，即基础设施层（含向量数据库和模型训练）、大模型应用框架层（强化数据处理与多维关系挖掘）及业务层（如智能分析助手）。这种设计方案旨在提高算力产业发展监测与决策制定的质量。 适合人群：电信行业的从业人员及研究人员；算力产业链各环节管理者；政府相关机构和政策决策者。 使用场景及目标：在多种算力相关的应用场景（如云计算中心管理，数据中心监测，政策分析）中辅助决策者进行快速有效的信息获取和技术选择；助力算力产业发展方向的精确把控和战略调整。 其他说明：随着大模型技术的日臻成熟，该算力产业监测服务平台预计将进一步丰富自身的应用领域和服务深度，以促进算力行业更智慧化发展。
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot.zip
最新发布
09-17
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot
吉他谱_What I've Done - Linkin Park.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Too sweet - Hozier.pdf
09-17
初级入门吉他谱 guitar tab
Linux使用的一些笔记，包括shell命令，软件，一些实用的网站的整理_Linux_note.zip
09-17
Linux使用的一些笔记，包括shell命令，软件，一些实用的网站的整理_Linux_note
基于ssm的机房预约系统设计与实现.docx
09-17
基于ssm的机房预约系统设计与实现.docx
app执行Linux命令_app-Linux-.zip
09-17
app执行Linux命令_app-Linux-
吉他谱_Would - Alice in Chains.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Yellow Ledbetter - Pearl Jam.pdf
09-17
初级入门吉他谱 guitar tab
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值