jQuery基础知识

最新推荐文章于 2024-08-09 02:16:38 发布

suiseidesu

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量97

点赞数

分类专栏：笔记学习笔记

本文链接：https://blog.csdn.net/qq_50270170/article/details/108874282

版权

学习笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

jQuery

1.基础知识

1.1基本概念

jQuery是JS库，能够帮助我们轻松实现一些原本比较麻烦的功能
jQuery每个版本分两个小版本：压缩版与未压缩版，压缩版文件较小，但是没有排版和注释
不便于阅读；未压缩版文件较大，有排版和注释，便于阅读
jQuery实际上就是一个js文件，加载到页面就可以直接使用了

也可以通过CDN（Content Distrubute Net）来引用jquery
1.2基本语法

$（选择器）.action（）；
$：定义了这是一个jquery的代码
选择器：按照一定规则选择DOM元素，与CSS选择器非常类似
action：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<p>111111111111</p>
		<p>222222222222</p>
		<p>333333333333</p>
		<p>444444444444</p>
	</body>
	<script type="text/javascript">
		$("p").click(function(){
			this.style.color="red"
		})
</script>
</html>

jQuery可以极大的简化程序员的工作

2. 选择器

基本选择器：

（1）id选择器KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 3: （“#̲idName”）（2）类选择…（“.className”）
（3）元素选择器（ “ Tagname （标签名） ” ）（4）选择所有元素（“*”）
（5）选择器分组$（“选择器1，选择器2，选择器n”）
层次选择器：

（1）后代选择器（“ 祖先元素后代元素 ”）（2）子元素（“父元素>子元素”）
（3）下一个兄弟元素（“ 前一个 + 后一个 ”）（4）下面所有兄弟元素（“前一个~后边所有”)
过滤选择器

参见jqueryAPI
选择p标签的第一个

$("p:first")

选择所有具有name属性的标签

$("p[name]")

选择name属性等于#的标签

$("p[name='#']")

事件

什么是事件

页面对不同访问者的响应叫做事件
事件处理程序指的是当HTML中发生某些事件时所调用的方法

常见的DOM事件

鼠标事件
单击事件 click
双击事件 dblclick
鼠标移入 mouseenter
鼠标移出 mouseleave
模仿悬停事件 hover
键盘事件
键盘编码 keypress
按下 keydown
抬起 keyup
表单事件
表单提交事件 submit
表单改变事件 change
获取焦点事件 focus
失去焦点事件 blur
窗口/文档事件
加载完触发 load
调整窗口大小触发 resize
滚动窗口触发 scroll
关闭窗口触发 unload