JQuery基础学习

Posted 2022-12-08 十九万里

1 jQuery的基础

官网地址：https://jquery.com/

在线手册地址：https://jquery.cuishifeng.cn/

1.1 jQuery的版本

不同的版本

jQuery-3.6.0.js             完整版、开发版，适合开发环境
jquery-3.6.0.min.js         压缩版、产品版(去掉了空格、换行，简化了变量名)，适合生产环境。
jQuery-3.6.0..slim.js       瘦身版(不兼容IE，去掉了jQuery动画)
jQuery-3.6.0..slim.min.js   

版本号

1.x.x              可以兼容IE8以及以下的浏览器
2.x.x / 3.x.x      不兼容IE8

1.2 如何使用 jQuery

1.使用script标签引入jQuery文件
2.写自己的js代码

1.3 核心函数 / jQuery对象

jQuery中最核心的一个函数叫jQuery，别名是$.

核心函数有如下功能：

1.使用核心函数获取文档中的元素，参数是个字符串
2.使用核心函数把原生DOM转为jQUery DOM，参数是原生DOM对象。
3.文档就绪事件,参数是回调函数

1.4 jQuery DOM对象

① jQuery DOM对象

使用jQuery核心函数，返回的元素对象称为jQuery DOM/

② 原生DOM

使用元素 js 方式获取到的元素的对象，称为原生DOM。

③ 原生DOM和jQuery DOM相互转换

原生DOM和jQuery DOM：

1. jQuery DOM和原生 DOM都是对html元素的映射，都用于从元素获取信息或者设置元素的样式、属性
2.jQuery DOM元素和原生DOM是不同类型的对象，各自具有各自的属性和方法
3.jQuery学习的就是jQuery DOM的属性和方法

原生DOM转为jQuery DOM：

使用核心函数可以把原生 DOM 转为 jQuery DOM

jQuery DOM 转为原生 DOM：

jQuery DOM 本质上是由原生DOM组成的集合，是个伪数组，通过索引可以取出其中的原生DOM

1.5 文档就绪事件

① 语法

//完整写法
$(document).ready(function()
	code...
);

//简写
$(function()
	code...
);

② ready 事件与 load 事件的区别

1.load事件是页面中所有的一切加载完毕才触发
2.ready事件是页面中元素加载完毕就触发，类似于 DOMContentLoaded事件。

1.6 链式调用（连贯操作）

$(dom).csss().width().height()

**链式调用实现原理：**方法中返回this(方法中返回调用该方法的对象)。

1.7 jQuery优势

轻量、开源、免费、易于学习
兼容性处理
强大的选择器
链式操作
便捷的DOM操作
可靠的事件机制
封装了简单易用的Ajax操作
丰富的插件

2 jQuery获取元素：选择器

使用选择器获取元素，类似于原生js中的querySelector()、querySelectorAll()等。

2.1 基本选择器

与 CSS3 的基本选择器是一样的

2.2 层级选择器

与 CSS3 的层级选择器是一样的

2.3 基本筛选器（过滤选择器）

部分与 CSS3 的伪类选择器是一样的，jQuery 所特有的选择器：

:first
:last
:eq()		索引从0开始
:lt()		小于
:gt()		大于
:odd		奇数
:event		偶数

2.4 内容选择器

:empty		选择到没有内容也没有后代的元素
:parent		选择到有内容或者有后代的元素

2.5 可见性选择器

:visible	能够显示的元素
:hidden		隐藏的元素（display：none visibility:hidden）

2.6 属性选择器

同 CSS3 的属性选择器

2.7 子元素选择器

同 CSS3 中结构伪类选择器

2.8 表单选择器

:text
:password
....
:input		选择到所有的表单控件 包括 input、textarea、select

2.9 表单对象选择器

同 CSS3 的UI元素伪类选择器

3 jQuery获取元素：筛选器方法

使用筛选器方法，类似于原生js中的文档结构，子元素、父元素、兄弟元素等。

3.1 过滤方法

对 jQueryDOM 这个集合的处理，这些过滤方法返回的还是 jQuery DOM

eq()
first()
last()
slice()
filter('选择器')
not('选择器')

3.2 查找方法

类似于原生JS中的文档结构，子元素、父元素、兄弟元素等。

children(选择器)
find(选择器)

parent(选择器)
parents(选择器)

next(选择器)
nextAll(选择器)
prev(选择器)
prevAll(选择器)

4 元素的属性、样式、内容操作

4.1 属性操作

1. 读写内置属性
   $dom.prop(属性名 [, 值]);
   
2. 读写自定义属性
   $dom.attr('属性名' [, 值]);
   
3. 读写 data- 格式的自定义属性
   $dom.data('属性名' [, 值]);

1. 读取属性值的时候，只读取 jQuery DOM 集合中第一个元素属性的值
2. 设置属性值的时候，jQuery DOM 集合中所有的元素都会被设置
3. prop()、attr()、data() 都支持链式调用

4.2 样式操作

1. 直接读写样式
   $dom.css('css属性名' [ ,值])
   
2. 操作类名
   $dom.addClass()
   $dom.removeClass()
   $dom.toggleClass()
   $dom.hasClass()	返回布尔值

4.3 内容操作

html()		读写元素的 innerHTML
text()		读写元素的 innerText
val()		读写输入框输入的内容

4.4 读写元素的尺寸

width() / height()	读写内容大小
innerWidth() / innerHeight() 	读写内容+内边距大小
outerWidth() / outerHeight()    读写总的大小

4.5 位置

offset()		返回包含 left 和 top 属性的对象， 得到是元素在整个文档上的位置
			    可以读取，可以设置

5 元素的创建、添加、删除、克隆

5.1 内部插入（添加子元素）

append()
appendTo()
prepend()
prependTo()

5.2 外部插入（添加兄弟元素）

after()
insertAfter()
before()
insertBefore()

5.3 替换

旧元素.replaceWith(新元素)
新元素.replaceAll(旧元素)

5.4

remove()	自己删除自己
empty()		清空，删除所有的后代和内容

5.5 克隆元素

clone()	    返回克隆好的元素，深度克隆	

6 jQuery的事件机制

6.1 添加事件监听

① 把事件作为方法调用

$dom.click(function(
    
))

② 使用 on 添加事件

$dom.on('click', function() 
    
);

6.2 解除事件的监听

$dom.off();		// 解除元素上所有的事件
$dom.off('click');    // 解除元素上的 click 事件

6.3 事件对象

jQuery 事件的回调函数也可以获取到事件对象，同原生 js 的事件对象没有区别！

6.4 事件委托

$('ul').on('click', 'li', function() 
    $(this).toggleClass('active');
);