JavaWeb之jQuery基础学习与总结

最新推荐文章于 2022-05-01 01:43:21 发布
最新推荐文章于 2022-05-01 01:43:21 发布
阅读量424 收藏 3
点赞数
分类专栏： JavaSE&JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LINHONG_1994/article/details/99181229
版权

jQuery是一个兼容多浏览器的、轻量级的JavaScript库。

jQuery是继prototype之后又一个优秀的JavaScript库，如今，jQuery已经成为最流行的JavaScript库

jQuery，顾名思义，也就是JavaScript和查询（Query），其宗旨是
                                    ——WRITE LESS,DO MORE（写的少，做的多）

在这里插入图片描述

笔记大纲

  • jQuery使用

  • 核心函数"$"

  • jQuery对象和DOM对象的转换

  • jQuery的选择器

    • 基本选择器、层级选择器、过滤选择器、表单对象属性过滤选择器

  • 经典案例（选中问题）

  • DOM操作

  • 事件（冒泡）

jQuery重点标记
在这里插入图片描述

1.jQuery使用

jQuery的核心语法：$(selector).action()

   A.selector:选择器（迅速定位）

   B.action()：方法()||事件


   注意：jQuery（正确书写）与JQuery，区分大小写！

1.1.jQuery库

   实际上即是一个js文件，只需要在网页中直接引入文件就OK。

<script type="text/javascript" src="路径/jquery-1.7.2.js"></script>
2.2.JQuery库版本

   A.开发测试时，用未压缩的版本

   B.上线项目中，用压缩后的版本

在这里插入图片描述

2.3.案例应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HellojQuery</title>
<!--引入js库 -->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//使用$()代替window.onload
	$(function(){
		<!--获取按钮对象并绑定单机响应函数  click是方法-->
		$("#btnId").click(function(){
			alert('Hello,codinglin');
		});
	});
</script>

</head>
<body>
	<button id="btnId">jQuery小案例测试</button>
</body>
</html>
2.核心函数
2.1.$是什么？

   $本质是核心函数的作用，是jQuery函数的引用。

   $ ==（等价于） jQuery == $() == jQuery()==核心函数

2.2.核心函数的作用

   A.$(function(){})=== 相当于window.onload = function(){}

      即：传入参数为【函数】时，在文档加载完成后执行这个函数。

   B.$(“选择器”) ======根据这个选择器查找元素节点对象

      即：传入参数为【选择器字符串】时，根据这个字符串查找元素节点对象。

   C.$(“html字符串”)=== 根据这个html字符串创建元素节点对象

      即：传入参数为【HTML字符串】时，根据这个字符串创建元素节点对象。

   D.$(“DOM对象”)=======将DOM对象包装为jQuery对象

      即：传入参数为【DOM对象】时，将DOM对象包装为jQuery对象返回。

3.jQuery对象和DOM对象的转换

jQuery对象本质上是DOM对象的数组。

3.1.DOM对象为什么要转换为jQuery对象？

   因为需要使用jQuery强大的方法。

   DOM对象–>jQuery对象 $(DOM对象)

3.2.jQuery对象为什么要转换为DOM对象？

   因为在特殊情况，jQuery对象没有实现，需要原生的js实现。

   jQuery对象–DOM对象> ：将jQuery看成数组或集合。（本质jQuery是伪数组实现的）

      A. $xxx.[0]–数组 B.xxx.get[0]–集合

4.jQuery的选择器

   jQuery操作（如：改变指定元素节点的背景颜色）样式表

​      css(参数1，参数2)：为参数1赋值，值为参数2
      css(参数1：获取参数1的样式值

   jQuery中获取元素个数：①.length②.size()

   jQuery操作属性

​      attr(参数1，参数2)：为参数1赋值，值为参数2
      attr(参数1：获取参数1的属性值

   jQuery操作文本

序号Javascript（DOM）jQuery
⑴.innerText（取值、赋值操作即“=”在其前后位置）.text（取值.text()、赋值text(“文本”)）
⑵.innerHTML.html
⑶.value.val

说明：val()主要作用：操作value属性，针对下拉框、单选、多选框主要作用为”选中“!
   对象：this表示当前触发函数得对象（就近的），this是DOM对象

4.1.基本选择器
序号格式说明
1element【标签选择器】根据给定的元素名匹配所有元素如$(“P”)
2#id【id选择器】根据给定一个id匹配一个元素 如$("#id名")
3.class【类选择器】根据给定的类匹配元素如$(".类名")
4*【全局（所有）选择器】匹配所有元素如$("*")
5selector1,selector2,selectorn【并集选择器】将每一个选择器匹配到的元素合并后一起返回。如$("#id名，h2,.class名")
4.2.层次（层级）选择器
序号格式说明
1ancestor[祖先] descendant[子孙]【后代选择器】在给定的祖先元素下匹配所有的后代元素如：$(“E F”)
2parent > child【子代选择器】在给定的父元素下匹配所有的元素如：$(“E > F”)
3prev +next【相邻选择器（下一个相邻）】匹配所有紧接在prev元素后的next元素如：$(“E+F”)
4prev ~ siblings[兄弟姐妹]【同辈（兄弟）选择器（后面的兄弟）】匹配prev元素后的所有的siblings元素 如：$(“E ~ F”)
4.3.过滤选择器

  以下参看jQuery1.7API:

（1）基本

序号格式说明
1:first获取【第一个】元素
2:last获取【最后一个】元素
3:not(selector)去除所有与给定选择器匹配的元素【非】
4:even匹配所有索引值为【偶数】的元素，从0开始计数
5:odd匹配所有索引值为【奇数】的元素，从0开始计数
6:eq(index)匹配一个给定索引值的元素，从0开始计数【等于】
7:gt(index)匹配所有【大于】给定索引值的元素，从0开始计数
8:lt(index)匹配所有【小于】给定索引值的元素，从0开始计数
9:header匹配如h1、h2…h6之类的【标题】元素
10:animated匹配所有正在执行【动画】效果的元素
11:focus触发每一个匹配元素的focus事件（函数）。【焦点】

（2）内容

序号格式说明
1:contains(text)匹【包含】给定文本的元素
2:empty匹配所有不包含子元素或者文本的【空元素】
3:has(selector)匹配含有选择器所匹配的元素的元素
4:parent匹配含有子元素或者文本的元素

（3）可见性

序号格式说明
1:hidden匹配所有不可见元素，或者type为hidden的元素【隐藏】
2:visiable匹配所有的【可见】元素

（4）属性

序号格式说明
1[attribute]匹配包含给定【属性的元素】
2[attribute=value]匹配给定的【属性是某个特定值】的元素
3[attribute!=value]匹配所有不含有指定的元素，或者属性不等于特定值的元素
4[attribute^=value]匹配给定的属性是以某些值【开始】的元素—类似模糊查找（头）
5[attribute$=value]匹配给定的属性是以某些值【结尾】的元素—类似模糊查找（尾）
6[attribute*=value]匹配给定的属性是以【包含】某些值的元素—类似模糊查找（全）
7[attrSel1] [attrSel2] [attrSelN]复合属性选择器，需要同时满足多个条件时使用—（同时成立）

（5）子元素

序号格式说明
1:nth-child [() ]匹配其父元素下的第N个子或奇偶元素
2:first-child（每个父元素）匹配第一个元素
3:last-child（每个父元素）匹配第最后一个子元素
4:only-child如果某个父元素是父元素中唯一的子元素，那将会匹配，如果父元素中含有其他元素，那将不会被匹配

（6）表单

   ①所有的表单项：$(":inpput")

   ②单个表单项：$(":text|:password|:radio|:checkbox|：submit…")

序号格式说明
1:input匹配所有input、textarea、select、button元素
2:text匹配所有的单行文本框
3:password匹配所有的密码框
4:radio匹配所有的单选框
5:checkbox匹配所有复选框
6:submit匹配所有提交按钮
7:image匹配所有图像域
8:reset匹配所有重置按钮
9:button匹配所有按钮
10:file匹配所有文件域
11:hidden匹配所有不可元素，或者为type为hidden的元素
4.4.表单对象属性过滤选择器
序号格式说明
1:enabled匹配所有可用户元素 如：$(“input:enabled”)
2:disabled匹配所有不可用元素 如：$(“input:disabled”)
3:checked匹配所有选中的被选中元素（单选框、复选框等，不包括select中的option）如：$(“input:selected”)
4:selected【下拉框】匹配所有选中的option元素 如：$(“select option:selected”)
5.经典案例（选中问题）
5.1.功能需求

   （1）点击【全选】按钮后，以上所有精通的技术都会选中

   （2）点击【全不选】按钮后，以上所有精通的技术都不会选中

   （3）点击【反选】按钮后，以上所有精通的技术选中的状态进行反转

   （4）点击【提交】按钮后，以上所有精通的技术选中的内容一次弹出

代码示例：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选案例1</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#checkedAllBtn").click(function(){
				//获取所有的复选框，为checked属性赋值，true
				$(":checkbox").attr("checked",true);
			});
			
			
			$("#checkedNoBtn").click(function(){
				//获取所有的复选框，为checked属性赋值，false
				$(":checkbox").attr("checked",false);
			});
			
		
			$("#checkedRevBtn").click(function(){
				var $cb =$(":checkbox");
				//遍历获取所有的复选框
				$cb.each(function(){
					//checked属性为false 更改为checked属性为true(没选中->选中)
					this.checked=!this.checked;
				});
			});
			
			$("#sendBtn").click(function(){
				//遍历获取选中的复选框
				$(":checkbox:checked").each(function(){
					//窗口弹出值
					alert(this.value);
				});
			});
		});
		
	</script>
	</head>
	<body>
		<form method="post" action="">
			您精通的技术是：
			<br/>
			<input type="checkbox" name="skill" value="Java" />Java
			<input type="checkbox" name="skill" value="Oracle" />Oracle
			<input type="checkbox" name="skill" value="Linux" />Linux
			<input type="checkbox" name="skill" value="框架" />框架
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		</form>
	
	</body>
</html>

页面效果：

在这里插入图片描述

5.2.功能需求

   （1）点击【全选框】（选中/不选中）后，则所有的【岗位框】状态与自己一致

   （2）点击所有【岗位框】即选中状态 ，则【全选框】选中，否则全选框不选中

代码示例：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选案例2</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">

		$(function(){
			$("#checkedAllBox").click(function(){
				//获取全选框checked
				var ce =this.checked;
				//将全选框checked的状态赋值给爱好框
				$("input[name='position']").attr("checked",ce);
			});
			
			$("input[name='position']").click(function(){
				//获取所有的岗位框的个数
				var lenAll =$("input[name='position']").length;
				//获取选中的岗位框的个数
				var lenCheck =$("input[name='position']:checked").length;
				
				if(lenAll == lenCheck){
					$("#checkedAllBox").attr("checked",true);
				}else{
					$("#checkedAllBox").attr("checked",false);
					
				}
			});
		});
	</script>
	</head>
	<body>
		<form method="post" action="">

			您求职的岗位是：<input type="checkbox" id="checkedAllBox" />全选/全不选 
			<br />
			<input type="checkbox" name="position" value="开发" />开发
			<input type="checkbox" name="position" value="前端" />前端
			<input type="checkbox" name="position" value="运维" />运维
		</form>
</html>

页面效果：

在这里插入图片描述

6.DOM操作
6.1.DOM常用查询
（1）过滤
序号格式说明
1eq()获取第N个元素
2first()获取第一个元素
3last()获取最后一个元素
4filter()筛选出与指定表达式匹配的元素集合
5has()保留包含特定的后代元素
（2）查找
序号格式说明
1children()查询子元素
2find查询后代元素
3parents()查询父n代
4next()查询下一个兄弟的元素
5prex()查询上一个兄弟的元素
（3）串联
序号序号说明
1add()把表达式匹配的元素添加到jQuery对象中（用于连接）
2end()将匹配的元素列表变为之前一次的状态
6.2.DOM增删改
（1）增加
序号类型格式说明
1内后append()a.ppend(b) 将b追加到a的内后
2appendTo()a.ppend(b):将a追加到b的内后
3内前prepend()
4prependTo()
5外后after()
6insertAfter()
7外前before()
8insertBeFore()
（2）删除
序号格式说明
1empty()删除匹配的元素集合中所有的子节点
2remove()从DOM中删除所有匹配的元素
（3）修改
序号格式说明
1replaceWith()a.replaceWith(b) 将b替换a
2repalceAll()a.replaceWith(b) 将a替换b
7.事件
7.1.文档加载

  window.onload与$(区别：

比较内容window.onload核心函数$()
触发时机在整个文档完全加载后执行（标签、图片等）在整个文档绘制成功后执行（标签）
书写数量整个文档中只可以书写一次，书写多次，后面会覆盖前面的代码可以书写多次
语法格式只有一种语法格式两种语法格式

  说明：HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

在这里插入图片描述

7.2.事件冒泡

（1）定义

  当触发内部节点元素事件时，同时也会触发外部与之关联的节点事件。此现象称之为事件冒泡。

  取消事件冒泡：return false;

（2）常用事件

序号格式说明
1read(fn)当DOM载入就绪可查询及操纵时绑定一个要执行的事件
2click(fn)触发每一个匹配元素的click事件
3bind(fn)为每个匹配元素的特定事件绑定事件处理函数
4live(“事件名”,“fn”)这个元素是以后再添加进来的也有效
5delegate(“子元素”,“事件名”，fn)指定的元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
6blur(fn)失去焦点事件
7change(fn)文本改变且失去焦点时触发
8mouseover()鼠标移入时触发
9mouseout()鼠标移除时触发

 ☝上述分享来源个人总结，如果分享对您有帮忙，希望您积极转载；如果您有不同的见解，希望您积极留言，让我们一起探讨，您的鼓励将是我前进道路上一份助力，非常感谢！我会不定时更新相关技术动态，同时我也会不断完善自己，提升技术，希望与君同成长同进步！

☞本人博客：https://coding0110lin.blog.csdn.net/  欢迎转载，一起技术交流吧！

CRUD_CODER_LIN
关注
专栏目录
学习笔记 - JavaWeb知识点总结
大湿的学徒的博客
06-22 1929
一、HTML+CSS 二、JavaScript 三、JQuery、BootStrap框架 四、XML 五、Web概述和Tomcat服务器 5.1 使用tomcat前的准备 安装并配置jdk 下载并解压Tomcat 配置环境变量 变量名：CATALINA_HOME 变量值：刚刚安装的路径 5.2 tomcat的目录结构 目录名 作用 bin 专门用来存放Tomcat服务器的可执行程序 conf 存放Tomcat的配置文件 lib 存放Tomcat的jar包 logs 存放Tom
JavaWeb学习之jQuery学习(上)
WOD_MAAYA的博客
09-15 188
jQuery学习 jQuery介绍 什么是jQuery？ 就是JavaScript和Query的结合，是辅助JS开发的JS类库 jQuery的核心思想 核心思想是write less ，do more 。所以实现了很多浏览器的兼容问题
Java学习之------jQuery
你好，Java！的博客
06-24 162
jQuery jQuery是一个简洁的JavaScript框架,它的宗旨是"write less,do more" . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he...
java script jquery_Java Script 学习笔记 -- jQuery
weixin_35436076的博客
02-25 346
一 jquery简介1 jquery是什么jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k)，这是其它的js库所不及的，它兼容CSS3，还兼...
jQuery学习总结
程序猿_hw的博客
08-09 2537
一、jQuery选择器 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 &lt;p&gt; 元素。 $("p.intro") 选取所有 class="intro" 的 &lt;p&gt; 元素。 $("#demo") 选取所有 id="demo" 的 元素。 $(this)选取当前的html元素（关于this
Java课后总结（jQuery语法）
hmh9527的博客
06-05 216
jQuery对象与DOM对象转换&lt;script&gt;                                                                              //DOM对象获取    var dOM = document.getElementById("tv_div")    alert(dOM.innerHTML)    //DOM转jq...
JavaWeb每日总结思维导图
05-22
JavaWeb每日总结思维导图，包含JavaWeb开发的多项技术，方便复习知识点使用。内容包括：MySQL、MySQL约束&多表、MySQL多表&事务、JDBC、数据库连接池、HTML、CSS、JS基础&高级、BootStrap、XML、Tomcat、Servlet&...
JavaWeb 开发之路经验总结
02-16
在JavaWeb开发的世界里，开发者们常常需要面对各种挑战，从基础的HTML、CSS和JavaScript交互，到服务器端的Servlet和JSP处理，再到数据库的连接与操作，每一步都需要扎实的技术基础和实践经验。本经验总结将围绕这些...
javaweb开发要学习的所有技术和框架总结：.pdf
11-28
JavaWeb开发涵盖了一系列技术和框架，对于想要进入这个领域的学习者来说，掌握这些知识至关重要。以下是对标题和描述中提到的主要技术及其重要性的详细说明： **前端技术：** 1. **HTML** - 超文本标记语言是网页...
javaweb开发要学习的所有技术和框架总结：.docx
09-30
- **Java基础**：学习Java语法、数组、集合、面向对象编程、异常处理、多线程、图形用户界面（GUI）、注解、泛型和反射机制。 - **动态代理**：Java动态代理允许在运行时创建新类的实例，这些新类实现了给定接口，...
关于Jquery学习的几点反思
dc540127070的博客
08-21 110
1、应用的API插件时，先看说明文档，仔细看，多花点时间也没关系。 2、写出你要完成工作的几个步骤，细化你的工作。保证每一步结果都是正确（特别是在用你不会的东西的时候），这样看起来是在浪费时间，但是最后你会发现其实这样是最快的方法。 3、想清楚了再动手，这个非常重要。 4、注意引用路径，因为这个是不会报错的，最后结果是显示不出来。 5、先弄清原理，工作原理是什么，如果是我来完成，...
『 高达 购物车案例 』jQuery + Java Script 全功能实现【超详细 代码分析】
weixin_52212950的博客
05-01 6100
『 高达 购物车 』jQuery + Java Script 全功能实现【超详细 代码分析】
jquery简单学习
wangjinju77777的博客
08-07 323
入门： 1.在官网中下载jquery 2.在html页面中引入,使用script标签对引入jquery 3.在html页面中使用jquery 使用: 通过jquery实现隔行换色 先引入： <script src="js/jquery-3.6.0.min.js"></script> <script> $(function (){ /*获取所有的奇数行设置背景色*/ ($("tr:odd").css("background","pink"))
前端基础之JQuery
ailengjiu5238的博客
09-09 209
JQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery...
JavaWeb学习总结：JQuery
怪咖的博客
09-02 353
JQuery基础 一，概念 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScrip...
Javaweb开发了解前端知识三、Jquery(一)
mxcsdn的博客
05-31 763
1、JQuery 的初体验！！！2、Jquery 核心函数  $()3、JQuery对象和dom对象区分3.1、什么是jquery对象，什么是dom对象3.2、问题：JQuery对象的本质是什么？3.3、Jquery对象和Dom对象使用区别3.4、Dom对象和Jquery对象互转4、jQuery选择器4.1、基本选择器4.2、层级选择器4.3、过滤选择器5、JQuery 元素筛选什么是JQuery...
JS如何校验表单用户名、密码是否为空，"return false;"语句又有什么作用？
林大侠
08-10 4990
  在系统登录页面，我们常常会用JS去进行校验用户名、密码等信息是否为空的操作，一般就是在校验的文本框中添加id属性，在script标签中申明函数，然后去关联事件，起到一个触发的效果，最后在函数中进行判断条件的书写。逻辑没有多大问题，但是一个细节不到位，就达不到我们理想的效果。比如明明在页面判断条件一旦满足（为空条件）就会有弹窗【警告弹窗】，按理浏览器就会阻止事件继续触发，但却继续跳转了…   其...
jQuery事件冒泡#change(fn)事件结合应用案例--校验用户名是否存在
林大侠
08-12 2730
  事件冒泡即当触发内部节点元素时，同时会触发外部与之关联的节点事件。取消事件冒泡：return false;   blur(fn):blur()与change()区别：   （1）blur(fn):失去焦点，触发每一个匹配元素的blur事件；   （2）change(fn):文本改变且失去焦点，触发每个匹配元素的change事件。 应用场景：   在一个用户注册登录页面，输入用户名，如果已经存在...
jQuery之常见正则表达式整理与归纳【非常重要】
林大侠
08-12 2072
1.什么是正则表达式？ 正则表达式是对字符串操作的一种逻辑公式，就是事先定义好的一些特定字符以及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式（Regular Expression）又称规则表达式。 2.基本语法 <font size=3 color=red>var reg = /^[规则字符]{n,m}$/;</font...
JavaWeb驱动的实验室管理系统设计与实现
本文档标题为《基于JavaWeb的...总结来说，这份文档提供了实用的JavaWeb技术在实验室管理系统中的具体应用实例，对于高校实验室管理者、软件开发者以及对实验室信息化感兴趣的读者来说，具有很高的参考价值和学习意义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值