JavaWeb---Day 06

最新推荐文章于 2024-07-29 13:25:32 发布
最新推荐文章于 2024-07-29 13:25:32 发布
阅读量61 收藏
点赞数
分类专栏： JavaWeb 文章标签： 后端 html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49544301/article/details/130512470
版权

目录

一、jQuery介绍

（一）jq的特点

（二）jq的基本语法

二、jq选择器

（一）基本选择器

（二）层级选择器

（三）基本筛选器

（四）属性选择器

（五）表单对象属性

三、jq常用事件

四、jq操作dom对象

一、jQuery介绍

        jQuery是一个快速、简洁的 js 框架，并且开源免费。
        引入jq ：将 jq 的 js 包放到项目的文件中，并且在需要的地方进行引入

（一）jq的特点

        1.简化 dom 操作
        2.轻量级
        3.跨浏览器

（二）jq的基本语法

$(selector).action()
selector代表获取元素
action代表获取元素之后的操作
$代表jQuery

二、jq选择器

（一）基本选择器

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<!-- 引入jQuery -->
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<span id="sp1">111</span>
		<span id="sp2">333</span>
		<p id="p1">222</p>
		<p class="p2">444</p>
		<p class="p2">555</p>
		<img id="img1" src="../img/chensen.jpg" height="100px" width="50px"/>
	</body>
</html>
<script>
	$("#img1").fadeIn("1000");
	// 1.引入jq，验证$是否绝对相等jQuery
	console.log($===jQuery);
	// ⒉.通过dom和jq的方式获取元素
	var sp1 = document.getElementById("sp1");
	console.log(sp1);
	var p1 = $("#p1");
	console.log(p1);
	// 3.验证基本选择器，包括*选择器
	// id选择器
	var sp2 = $("#sp2");
	console.log(sp2);
	// 标签选择器
	var sps = $("span");
	console.log(sps);
	// 类选择器
	var cls = $(".p2");
	console.log(cls);
	// *选择器
	var all = $("*");
	console.log(all);
	// 群组选择器
	var qz = $("#sp1,span");
	console.log(qz);
</script>

（二）层级选择器 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层级选择器</title>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<div id="div1">
			<span>111</span>
			<p>222</p>
			<div id="div2">
				<span>555</span>
				<p>666</p>
			</div>
			<span>
				333
				<p>444</p>
			</span>
		</div>
	</body>
</html>
<script>
	// 后代选择器
	console.log($("div span"));
	// 子代选择器
	console.log($("div>span"));
	// 获取所有跟在指定元素后面的元素的选择器
	console.log($("span+p"));
	// 获取所有跟在指定元素后面同辈的元素的选择器
	console.log($("span ~ p"));
</script>

（三）基本筛选器

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本筛选器</title>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
		<style type="text/css">
			table{
				text-align: center;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<table border="1px" width="200px">
			<tr>
				<th>1-1</th>
				<th>1-2</th>
				<th>1-3</th>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<td>4-3</td>
			</tr>
			<tr>
				<td>5-1</td>
				<td>5-2</td>
				<td>5-3</td>
			</tr>
		</table>
	</body>
</html>
<script>
	// $("table tr:even").css("background-color","red");
	// $("table tr:odd").css("background-color","pink");
	// $("table tr:first").css({"color":"blue","font-size":"30px"});
	// $("table tr:last").css({"text-align": "center","font-size":"20px","color":"white"});
	// $("table tr:eq(2)").css({"text-align": "center","font-size":"20px"});
	var ths = $("table tr th");
	var tds = $("table tr td");	
	for(i=0;i<ths.length;i++){
		$(ths[i]).hover(
		function(){
			$(this).css("background-color","blue");
		},
		function(){
			$(this).css("background-color","pink");
		})
	}
	for(i=0;i<tds.length;i++){
		$(tds[i]).hover(
		function(){
			$(this).css("background-color","blue");
		},
		function(){
			$(this).css("background-color","pink");
		})
	}
</script>

（四）属性选择器

（五）表单对象属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<button id="btn1">选择</button>
		<input name="hobby" type="checkbox" value="唱歌" checked="checked"/>
		<input name="hobby" type="checkbox" value="跳舞"/>
		<input name="hobby" type="checkbox" value="rap"/>
		<input name="hobby" type="checkbox" value="篮球"/><br />
		<select>
			<option>陈森</option>
			<option>小艾森</option>
			<option>森狗</option>
			<option>阿森纳</option>
			<option>森森</option>
		</select>
	</body>
</html>
<script>
	// 1.实现在控制台打印复选框中选中的个数
	$("#btn1").click(function(){
		console.log($("input[name='hobby']:checked").length);
	})
	// 2.实现控制台打印下拉框选中的文本
	$("select").click(function(){
		console.log($("select option:selected").html());
	})
</script>

三、jq常用事件

鼠标事件
键盘事件
表单事件
click
keydown
submit
dblclick
keypress
change
mouseenter
keydown
focus
mouseleave
keyupblur 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<input type="text" />
		<span></span>
		<div id="div1" style="width: 100px;height: 100px;background-color: #00FFFF;"></div><br />
		<button id="btn1">点击一下</button><br />
		<img id="img1" src="../img/chensen.jpg"  width="300px" height="500px"/>
	</body>
</html>
<script>
	// 1.在输入框输入时显示输入中，键盘松开显示输入完成
	$("input").keydown(function(){
		$("span").html("正在输入中...");
	})
	$("input").keyup(function(){
		$("span").html("输入完成");
	})
	// ⒉鼠标移入图片变大，鼠标移出图片变小
	$("#div1").hover(
	function(){
		$("#div1").css({"width":"200px","height":"200px"});
	},
	function(){
		$("#div1").css({"width":"100px","height":"100px"});
	})
	// 3.实现点击按钮图片出现，再次点击图片隐藏
	$("#btn1").click(
	function(){
		$("#img1").toggle("fast");
	})
</script>
案例 ：实现购物车功能，选择物品后跳转至支付页面并显示所选的物品，购物车页面需包含全选 / 全不选 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<form action="lianxi07.html" method="get">
			全选/全不选<input id="in1" type="checkbox" /><br />
			<input name="shop" type="checkbox" value="book" />书
			<input name="shop" type="checkbox" value="football" />足球
			<input name="shop" type="checkbox" value="pen" />钢笔
			<input name="shop" type="checkbox" value="cloth" />衣服
			<input name="shop" type="checkbox" value="flower" />花<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>
<script>
	$("#in1").click(function(){
		var all = $("input[name=shop]");
		var check = $("#in1")[0];
		for(i=0;i<all.length;i++){
			all[i].checked=$("#in1")[0].checked;
		}
	})
</script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付页面</title>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>
<script type="text/javascript">
	var url = decodeURIComponent(window.location.search);
	var url1 = url.substr(1).split("&");
	var div1 = document.getElementById("div1");
	for(i=0;i<url1.length;i++){
		// 创建元素节点
		var h1 = document.createElement("h1");
		// 创建文本节点
		var text = document.createTextNode(url1[i].substr(5));
		h1.appendChild(text);
		div1.appendChild(h1);
	}
	console.log(url1);
</script>

四、jq操作dom对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom和jq互转</title>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<input id="ip1" type="text" value="陈森"/>
	</body>
</html>
<script>
	// 通过dom对象获取元素
	var ip1 = document.getElementById("ip1");
	console.log(ip1.value);
	// 将dom转为jq
	var $ip1 = $(ip1);
	console.log($ip1.val());
	// 通过jq获取元素
	var $ip2 = $("#ip1");
	console.log($ip2.val());
	// 将jq转为dom-方式一
	var ip3 = $ip2.get(0);
	console.log(ip3.value);
	// 将jq转为dom-方式二
	var ip4 = $ip2[0];
	console.log(ip4.value);
</script>

小麦穗呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——过滤器
weixin_46456187的博客
10-26 354
Servlet过滤器与Servlet十分相似，但它具有拦截客户端(浏览器）请求的功能，Servlet过滤器可以改变请求中的内容，来满足实际开发的需要。对于程序开发人员而言，过滤器实质就是在Web应用服务器上的一个Web应用组件，用于拦截客户端(浏览器)与目标资源的请求，并对这些请求进行一定过滤处理再发送给目标资源。即，对请求和响应进行拦截或者增强的对象，就是过滤器。
Java Web之过滤器（Filter）
热门推荐
喻志强的博客
07-31 21万+
过滤器(Filter) 过滤器实际上就是对web资源进行拦截，做一些处理后再交给servlet。 通常都是用来拦截request进行处理的，也可以对返回的response进行拦截处理 大概流程图如下 应用场景 自动登录 统一设置编码格式 访问权限控制 敏感字符过滤等...
JavaWeb-Day1
m0_74039531的博客
07-10 197
类型的日期时间格式通常使用 "yyyy-MM-ddTHH:mm:ss" 的形式表示。其中，"T" 是一个分隔符，用于区分日期和时间部分。这种格式符合ISO 8601标准，是一种国际通用的日期时间表示方法。在Java中，当你尝试直接打印一个对象时，会调用该对象的。类继承的默认实现，它返回一个字符串，该字符串由类名、问题1：为什么运行该代码会造成如下错误？问题3：用数组和列表，传入多个参数？Java对象的默认输出格式。问题四：日期参数&json参数。问题2：如何进行实体封装？对象的信息，你需要在。
JavaWeb-Day-02
m0_73408560的博客
09-25 468
①:约束是作用在表中列上的规则,用于限制加入表的数据例如:我们可以给某列加约束,让其值不能重复,不能为null②:约束的存在保证了数据库中数据的正确性,有效性,完整性添加约束可以在添加数据的试试就限制不正确的数据,类似于年龄3000岁,数学成绩-12分这样无效的数据,继而保障数据的完整性。
JavaWeb-Day3
zhong_in_furry的博客
07-23 269
协议版本响应状态码(resp.setStatus设置状态码给浏览器看)1XX：指示信息（已接收请求）2XX：成功（200）3XX：重定向（302）（304访问本地缓存网页）4XX：客户端错误（400请求参数有误）（404网页不存在）（405前端请求方式有误）（415无法识别的请求参数）5XX：服务器端错误（500Servlet代码有误）响应信息，随响应状态码更改（可能没有）
JavaWeb---Day 04
qq_49544301的博客
04-28 115
来华清JavaWeb学习的第三天
JavaWeb-Day01
山野有雾灯
10-06 353
在java中，动态web资源的开发技术就统称为javaWeb!
javaweb-01day
qq_52610988的博客
04-26 370
day1 请求、响应、三层架构、IOC 和 DI
JavaWeb-day-51
qq_47726356的博客
12-05 812
2021.12.5 表单重复提交之-----验证码 表单重复提交有三种常见的情况： 一：提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键 F5，就会发起最后一次的请求。 造成表单重复提交问题。解决方法：使用重定向来进行跳转 二：用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败， 就会着急，然后多点了几次提交操作，也会造成表单重复提交。 三：用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交
JavaWeb-day01-数据库基础.xmind
11-05
JavaWeb-day01-数据库基础.xmind
javaweb-day20每日作业卷1
08-08
【JavaWeb每日作业卷20】涉及的知识点主要围绕MySQL数据库操作，包括聚合函数的使用、数据库备份恢复、分组查询、表字段约束以及多表设计。以下是对这些知识点的详细说明： 1. **聚合函数**： - `COUNT()`: 统计非...
JavaWeb视频教程-day10
04-25
【JavaWeb视频教程-day10】是一门针对JavaWeb开发的深入学习课程，主要涵盖了JavaWeb开发中的核心概念和技术。本教程可能详细讲解了在实际项目开发中常见且重要的知识点，帮助初学者或有一定基础的开发者提升技能。...
javaweb-day20每日作业卷答案1
08-08
在Java Web开发中，数据库设计是非常重要的一环。在本日的作业中，主要涵盖了数据库表字段的一些关键约束以及如何在MySQL中实现这些约束。同时，还涉及了SQL查询中的聚合函数、数据库备份与恢复以及分组查询的概念和...
JavaWeb视频教程-day08
04-25
在本节"JavaWeb视频教程-day08"中，我们将深入学习JavaWeb开发的核心概念和技术。这个阶段的课程主要关注于在实际项目中常见的应用场景，包括但不限于Servlet、JSP、MVC模式以及数据库操作等。以下是一些关键知识点...
postman请求响应加解密
w_lo__o的博客
07-26 278
部分接口，需要请求加密后，在发动到后端。同时后端返回的响应内容，也是经过了加密。此时，我们先和开发获取到对应的【密钥】，然后在postman的预执行、后执行加入js脚本对明文请求进行加密，然后在发送请求；响应回来后，后执行会解密响应内容。
easyui 多文件上传，demo
最新发布
极客栈
07-29 423
通过上述示例代码，你可以使用 EasyUI 实现多文件上传功能。确保前后端配合良好，以便正确处理文件上传请求并返回相应的结果。
实现一个全栈模糊搜索匹配的功能
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-27 363
提供一个全栈实现的方案，包括 Vue 3 前端、Express 后端和 MySQL 数据库的分类模糊搜索功能。
TCP请求如何获取客户端真实源IP地址
ajax_beijing_java的博客
07-29 389
针对四层的TCP请求（TCP监听器），可以通过在后端主机配置TOA插件获取客户端的真实源IP地址。TOA是操作系统的内核模块，需要在ELB后端主机中安装TOA插件，以实现后端主机可获取客户端真实源IP地址的目的。c. 编译过程若未提示warning或者error，说明编译成功，检查当前目录下是否已经生成toa.ko文件。假如提示信息中包含“TOA: toa loaded”，则证明内核模块已经加载成功。f. 以下步骤是以Ubuntu、Debian环境为例，进行编译环境准备。主备、集群模式资源池列表见。
JSTL标签库与JavaWeb安全实践：崔西凡笔记第13-15天
崔西凡的JavaWeb笔记涵盖了从第13天到第15天的学习内容，主要聚焦于JSTL（JavaServer Pages Standard Tag Library）技术，这是一个广泛应用于Java Web开发中的强大工具集。JSTL由Apache提供，其核心库是开发的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值