JavaWeb学习笔记2—jQuery

已于 2022-02-06 20:47:58 修改
阅读量530 收藏
点赞数
分类专栏： JavaWeb-javaEE基础 文章标签： jquery javascript 前端
于 2022-02-06 20:40:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beginnerdzz/article/details/122801405
版权

学习视频地址

jQuery

1. helloWorld

image-20220130115137686

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script type="text/javascript">
         // alert($); 有值 说明引入成功
         $(function (){  //页面加载完成后.... ，相当于 window.onload =function (){
             var $btnObj =$("#btnId"); //表示 按id查询 jQ对象 命名前面加一个$
             $btnObj.click(function (){
                 alert("JQuery 的单击事件")
             });
         })
    </script>
</head>
<body>
<button id="btnId">按钮</button>
  
</body>
</html>

2.函数核心介绍

image-20220130143548374

image-20220130144042677

image-20220130144019707如下：

image-20220130143904199

image-20220130145128728

按标签名查：

image-20220130145517373

image-20220130145402534

3.区分dom对象和JQurey对象

image-20220130162254797

image-20220130162352894

  • jQuery对象是dom对象的数组+ jQuery提供的一系列功能函数。

    $a[0] 其实是一个dom对象（命名默认前面有$，是jq对象）

  • image-20220130163447548

  • 相互转化

    image-20220130163613510

4.Jquery选择器

（1）.基本选择器

image-20220130172549984

$("p.myClass")

image-20220130174227463

image-20220130174353134

顺序和页面标签的顺序有关

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
				//1.选择 id 为 one 的元素 "background-color","#bbffaa"
				$(function (){
					$("#btn1").click(function (){
						//css 方法设置和获取样式
						$("#one").css("background-color","red");

					})
				})
				//2.选择 class 为 mini 的所有元素
				$(function (){
					$("#btn2").click(function (){
						//css 方法设置和获取样式
						$(".mini").css("background-color","#bbffaa")

					})

				})

				//3.选择 元素名是 div 的所有元素 
				$(function (){
					$("#btn3").click(function (){
						//css 方法设置和获取样式
						$("div").css("background-color","#bbffaa")

					})
				})

				//4.选择所有的元素 
				$(function (){
					$("#btn4").click(function (){
						$("*").css("background-color","#bbffaa")

					})
				})

				//5.选择所有的 span 元素和id为two的元素   
				$(function (){
					$("#btn5").click(function (){
						$("span,#two").css("background-color","#bbffaa")

					})
				})




		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>
（2）.层级选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){  //以前的是简写
				//1.选择 body 内的所有 div 元素 
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body>div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>
（3）.基本的过滤选择器

使用时查看CHM。

image-20220130204243670

image-20220130213136542

（4）.内容过滤选择器

image-20220131101131134

（5）.属性过滤选择器

image-20220131102522651

（6）.表单过滤选择器

注意点：

  • 可用和不可用属性

  • 相当于dom对象的value属性 （！！表单项中的）

​ 不传参数是获取，传参是赋值。val(“xxxx”)

image-20220201192645781

  • 遍历方法

    image-20220201194028121

（7）.表单对象属性过滤选择器

5.JQuery元素筛选

image-20220201195447000

image-20220202103352069

image-20220202103021189

image-20220202103107404

6.jquery的属性操作

image-20220202110443707

  • text()文本 包括后代节点中的文本

  • 注意：val 是设置获取表单项的value 。div,span…不是表单项。

  • val方法还可以同时设置多个表单项的选中状态: 加【】

    image-20220202113358417

image-20220202120141401

prop解决了 attr（checked） 可能 返回undefined的问题

下图是attr获取和设置普通属性，

7.DOM的增删改

image-20220203092457546

image-20220203092548869

image-20220203092827204

创建一个h1插入到两个div中

image-20220203095356151

8.css样式操作

image-20220203134500883

<!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">
<title>Insert title here</title>
<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
/*
	div 表示限制只能div使用 .border表示给border类使用
*/
	div.border{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blackDiv{
		border: 5px blue solid;
	}
	
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		/*
CSS
css(name|pro|[,val|fn])       读写匹配元素的样式属性。 
								a.css('color')取出a元素的color
								a.css('color',"red")设置a元素的color为red

CSS 类

addClass(class|fn) 			为元素添加一个class值;<div class="mini big">
removeClass([class|fn]) 	删除元素的class值；传递一个具体的class值，就会删除具体的某个class
							a.removeClass()：移除所有的class值

**/
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass("redDiv blackDiv");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass()
		});

		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			//切换就是如果具有该类那么删除，如果没有那么添加上
			$divEle.toggleClass("redDiv");
		});
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var os = $divEle.offset();
			//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
			alert("顶边距："+os.top+" 左边距："+os.left);
			
			//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
			//offset({ top: 10, left: 30 });
			 $divEle.offset({
				 top:50,
				 left:60
			 }); 
		});
		
	})
</script>
</head>
<body>

	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	
	<br /> <br />
	
	<br /> <br />
	
</body>
</html>

9.JQuery动画

image-20220203161643202

image-20220203162057844

image-20220203161350905

image-20220203162157325

透明度：0~1；

10.原生js和jQuery页面加载完成之后的区别

image-20220203192214264

image-20220203193015331

如下，原生js会等img 和iframe 都加载完

image-20220203192112076

image-20220203192822307

11.JQuery中常用事件处理方法

image-20220203211523359

image-20220203213448210

image-20220206203858898

image-20220203212058270

image-20220203213034586

无参数就是全部解除绑定

12.事件的冒泡

image-20220203214215701

比如 div 里面 有个span ，span和div都有点击事件， 你点击了span，那么span和div会先后触发点击事件

image-20220203214413862

span事件里加return false解决。

13.事件对象

image-20220203215011567

下图就是这个js对象里的信息:

image-20220203215218569

使用举例：

可以实现丰富的功能

image-20220203215638321

14.练习—图片跟随

image-20220204105230645

左上到右下会闪，因为进入了大图片，页面以为出去了小图片，大图片hide，然后页面又以为进入了小图片。解决：

image-20220204110208820

DongGei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery学习笔记
09-16
jquery的学习笔记，从入门到精通，笔记做的比较详细，通俗易懂。可以参考借鉴。
圣思源的jquery学习笔记
09-16
圣思源张龙老师讲解的jquery的学习笔记，讲的比较深入。值得借鉴学习。
韩顺平JavaWeb笔记
12-27
韩顺平 JavaWeb 笔记 JavaWeb 开发技术栈图包括前端、后端、数据库三大组成部分。...本笔记对 JavaWeb 开发技术栈图进行了详细的介绍，并对 HTML 语言进行了深入的讲解，为学习 JavaWeb 的学生提供了系统的指导。
那些年，我还在学习Ajax 学习笔记
10-28
无论你是在ASP.NET、JavaWeb还是PHP的环境中工作，掌握Ajax都是不可或缺的技能。Ajax的核心在于实现页面的局部刷新，即在不重新加载整个网页的情况下，通过与服务器进行异步通信，更新部分网页内容。 在使用Ajax时...
JavaWeb每日总结思维导图
05-22
本资源免费下载供大家阅读使用，全程知识点，使用思维导图的方式对知识进行梳理，包含各技术名词的概念及代码，内容清晰有序，适合初学者学习使用——每日一个 ，亦可以作为开发老鸟回顾知识的笔记。选择下载该内容...
不出网上线CS的各种姿势（内网横向）
qq_64395221的博客
06-21 908
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 1001
JSON，Ajax
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 487
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 232
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 328
【element 】修改下拉菜单
什么是try-catch?
qq_60504665的博客
06-18 430
try-catch是编程中用于处理异常（errors 或 exceptions）的一种结构，特别是在许多编程语言中，如 JavaScript、Java、C#、Python（尽管 Python 的语法略有不同）等。它的主要目的是在代码执行过程中捕获并处理运行时错误，从而防止程序因未处理的异常而意外终止。以下是try-catch。
Vue3中的常见组件通信（超详细版）
m0_63165331的博客
06-19 1005
本文详细讲述了vue3中常用的组件通信使用方法。主要包括props、自定义事件、mitt、v-model、$attrs、$refs和$parent、probide和inject、pinia、插槽。
vue3文件目录解析
HWL5679的博客
06-24 255
assets：用于存放项目中需要导入的静态资源，如图片、字体文件等。
Vue生命周期
weixin_63680330的博客
06-19 226
定义：指一个对象从创建到销毁的整个过程。
JavaWeb系列十七: jQuery选择器 上
最新发布
你好, 我在学java的博客
06-24 267
jQuery选择器jQuery基本选择器jquery层次选择器基础过滤选择器内容过滤选择器可见度过滤选择器 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器 jQuery选择器的优点 $(“#id”) 等价于 document.getElementById(“id”); $(“tagName”) 等价于 document.getElementsByTagName(“tagName”); 完善的事件处理机制 应用实例 前端报错的位置
ios CCInfoPlistFileReader.m
编程语言技巧经验分享
06-21 395
// // CCInfoPlistFileReader.m // CCFC // // Created by xichen on 11-12-18. // Copyright 2011 ccteam. All rights reserved. // #import "CCInfoPlistFileReader.h" static id InfoPlistObj; @
C++设计模式之单例模式
congwang3960的博客
06-19 425
单例模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。
在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组
李长渊的博客
06-21 596
在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组
项目实训-vue（十三）
weixin_64015449的博客
06-23 120
本篇博客将记录我在图片上传页面中的工作。
javaweb学习笔记 pdf
09-19
javaweb学习笔记 PDF 是一种电子文档格式，可以用于保存和分享学习javaweb的笔记。通过将学习的内容整理成PDF格式的笔记，可以方便地在不同的设备上阅读和使用。 首先，学习javaweb的过程中会接触到很多理论知识和...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值