【jQuery 】基本使用

• jQuery 是一个着重简化 DOM 操作，AJAX 调用和事件 处理的 JavaScript 库；
• 使用jQuery封装的方法可以极大的提升开发效率。
• jQuery使用：在 jQuery官网上下载文件到本地，再将其导入到页面中即可。

<!-- 导入jquery -->
    <script src="./jquery-3.6.0.min.js"></script>

---

一、选择器和jQuery对象

1.1 选择器

jQuery 中通过选择器来获取 DOM 节点，功能类似于原生的 querySelectorAll 方法，支持的选择器与 CSS 的选择器几乎一致。

语法：

//console.log($)  $是一个函数
$('选择器')
$('li')  // 表示选择页面所在的所有<li>元素

更多语法了解

1.2 jQuery对象

jQuery 中利用选择器获取到的是 jQuery 对象。可在其原型对象中查看 jQuery 对象的方法。

// 对比 jQuery 和 DOM
// jQuery获取对象并修改属性 
$('p').css('backgroundColor', 'green') 

// DOM获取对象并修改属性
document.querySelectorAll('p').style.backgroundColor = 'green'

// 将DOM对象转换为jQuery对象 
$(DOM对象）

---

二、事件绑定和链式编程

2.1 事件绑定

//原生事件绑定
$('选择器').事件名(回调函数) 

//window事件绑定
$(window).事件名(function(){})

可在回调函数中用 this 获取当前触发事件的DOM对象。

• 常见DOM事件：

表单事件	窗口事件	鼠标事件	键盘事件
submit	load	click	keypress
change	resize	dblclick	keydown
focus	scroll	mouseenter	keyup
blur	unload	mouseleave
input		hover

2.2 链式编程

通过点 . 把多个方法连续的写下去,形成一条链结构。

  $('选择器').事件1(回调函数).事件2(回调函数)....

---

三、jQuer常用API

3.1 内容 - html()和text()

设置和读取网页元素文本内容的方法。

• html() ： 能解析和获取标签 ；
• text() ： 不能解析标签，也不能获取标签，只能 获取文本。

// 设置 
$('选择器').html('内容')
$('选择器').text('内容')

// 读取 
$('选择器').html()
$('选择器').text()

• 设置方式支持链式编程

$('选择器').html('内容').事件(回调函数)

3.2 样式 - css()

设置或者获取样式的方法，设置的样式属于行内样式。

// 设置样式-键值对 
.css('样式属性','值')
.css({对象})
 
// 获取样式
.css('样式属性')

3.3 属性 - attr()

设置、获取和删除属性。

// 赋值/自定义属性(data-)
.attr('属性名','值')

// 获取属性
.attr('属性名')

// 删除属性
.removeAttr('属性名')

3.4 value - val()

操纵表单元素value属性的方法，可取值和赋值。

// 赋值
.val('参数')

// 取值
.val()

3.5 类名方法

添加、移除、检测、切换类名的方法。

// 添加类名
.addClass('类名')

// 移除类名
.removeeClass('类名')

// 判断类名 返回布尔值
.hasClass('类名')

// 切换类名  有则移除，无则添加
.toggleClass('类名')

3.6 过滤方法

对 jQuery 对象中的DOM元素再次筛选。

//匹配的第一个元素
.first()

//匹配的最后一个元素
.last()

//匹配的第 索引号+1 个元素  索引号从0开始
.eq(索引号)

3.7 查找方法

基于元素的结构关系查找新的元素。

// 查找后代元素
.find('选择器')

//查找父元素
.parent()

//查找子元素
.children()/.children('选择器')

//查找兄弟元素
.siblings()/.siblings('选择器')

---

四、注册事件和触发事件

4.1 注册事件

// 注册事件 
.on('事件名',function(){})

// 移除指定事件
.off('事件名')

//移除所有事件
.off()

//注册一次性事件
.one('事件名',function(){})

//注册自定义事件
.on('自定义事件',function(){})

• 可在on，one方法回调函数中用 this 获取当前触发事件的DOM对象。
• 例： jQuery中没有input方法，无法直接注册input事件，这个时候就需要通过on方法来注册input事件。

4.2 触发事件

// 触发事件要有相应的注册事件
// 直接调用触发
.事件名()
.click()

// trigger触发 可触发所有事件
.trigger('事件名')
.trigger('input')

// 触发自定义事件
.trigger('自定义事件')