JavaWeb学习笔记2—jQuery

已于 2022-02-06 20:47:58 修改
阅读量529 收藏
点赞数
分类专栏： 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学习笔记之——JQuery高级
前尘忆梦的博客
11-17 94
JQuery 高级 文章目录JQuery 高级1、动画2、遍历2.1、js 的遍历方式2.2、jq 的遍历方式3、事件绑定3.1、jquery 标准的绑定方式3.2、on 绑定事件/off 解除绑定3.3、事件切换：toggle 1、动画 三种方式显示和隐藏元素： 默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数： speed：动画的速度。三个预定义的值（“slow”,“normal”, “fast”）或表示动画时长的毫秒数值（如：1000） easing：用来指定
JavaWeb学习笔记——jQuery动画、事件
MCC
12-18 169
jQuery-3动画方法练习：品牌显示事件文档加载事件绑定事件移除事件冒泡事件对象练习：图片跟随 动画 方法 基本： show([speed,[easing],[fn]]) 显示 hide([speed,[easing],[fn]]) 隐藏 toggle([speed],[easing],[fn]) 交替，可见就隐藏，不可见就显示。 滑动： slideDown([spe],[eas],[fn]) slideUp([speed,[easing],[fn]]) slideToggle([speed],[easi
【JavaWeb学习笔记】15 - jQuery
qq_41891655的博客
12-24 984
1. jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML，css，dom2.提供方法、events、选择器，并且方便地为网站提供AJAX交互3.其宗旨是 --WRITE LESSDO MORE，写更少的代码,做更多的事情.4. jQuery实现了浏览器的兼容问题1.jQuery对象就是对DOM对象进行包装后产生的对象比如: $("#test").html() 意思 是指:获取ID为test的元素内的htmI代码。
JavaWeb学习笔记——JQuery与AJAX基础
spark2010的博客
03-12 618
本文是学习Java时所记录的学习笔记，本节是JQuery和AJAX的基础内容，掌握后能实现JQuery操作页面元素以及JQuery配合AJAX实现前后端数据交互，实现局部刷新。
JavaWeb学习笔记5 jQuery2 jQuery对象和dom对象
qq_38785034的博客
02-21 69
jQuery对象和dom对象区分什么是jQuery对象，什么是dom对象 什么是jQuery对象，什么是dom对象 Dom对象 1.通过getElementById（）查询出来的标签对象是Dom对象 2.通过getElementsByName（）查询出来的标签对象是Dom对象 3.通过getElementsByTagName（）查询出来的标签对象是Dom对象 4.通过createElement（）方法创建的对象是Dom对象 DOM对象Alert：[object HTML 标签名 Element] jQue
Javaweb学习笔记 JQuery篇
赵宸的博客
08-31 153
1.jQuery介绍 什么是jQuery? jQuery，顾名思义也就是javascript和query（查询），他就是辅助JavaScript开发的js类库 jQuery核心思想 他的核心思想是write less ，do more （写得更少，做得更多），所以它实现了很多浏览器的兼容功能 jQuery流行程度 Jquery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery jQuery的好处 jQuery是免费的，开源的，JQuery的语法设
JavaWeb学习笔记——JQuery
超级圈的博客
01-04 159
# JQuery 基础： 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常...
JavaWeb学习笔记5 jQuery8 jQuery 事件操作
qq_38785034的博客
02-23 124
$( function(){} ); 和 window.onload = function(){} 的区别？ 他们分别是在什么时候触发？ 1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。 2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载 完成。 他们触发的顺序？ 1、jQuery 页面加载完成之后先执行 2、原生 js 的页面加载完成之后 他们执行的次数？ 1、原生 js 的页面加载
JavaWeb学习笔记5 jQuery4 元素筛选
qq_38785034的博客
02-21 237
元素筛选 eq() 获取给定索引的元素 功能跟 :eq() 一样 first() 获取第一个元素 功能跟 :first 一样 last() 获取最后一个元素 功能跟 :last 一样 filter(exp) 留下匹配的元素 is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样 not(exp) 删除匹配选择器的元素 功能跟 :not 一样 children(exp) 返回匹配给定选择器的子元素 功能跟 pare
韩顺平JavaWeb笔记
12-27
韩顺平 JavaWeb 笔记 JavaWeb 开发技术栈图包括前端、后端、数据库三大组成部分。...本笔记对 JavaWeb 开发技术栈图进行了详细的介绍，并对 HTML 语言进行了深入的讲解，为学习 JavaWeb 的学生提供了系统的指导。
那些年，我还在学习Ajax 学习笔记
10-28
无论你是在ASP.NET、JavaWeb还是PHP的环境中工作，掌握Ajax都是不可或缺的技能。Ajax的核心在于实现页面的局部刷新，即在不重新加载整个网页的情况下，通过与服务器进行异步通信，更新部分网页内容。 在使用Ajax时...
JavaWeb每日总结思维导图
05-22
本资源免费下载供大家阅读使用，全程知识点，使用思维导图的方式对知识进行梳理，包含各技术名词的概念及代码，内容清晰有序，适合初学者学习使用——每日一个 ，亦可以作为开发老鸟回顾知识的笔记。选择下载该内容...
Day43
最新发布
m0_67496588的博客
06-20 513
JSON，Ajax
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1479
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 342
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1171
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
javaweb学习笔记 pdf
09-19
javaweb学习笔记 PDF 是一种电子文档格式，可以用于保存和分享学习javaweb的笔记。通过将学习的内容整理成PDF格式的笔记，可以方便地在不同的设备上阅读和使用。 首先，学习javaweb的过程中会接触到很多理论知识和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值