一、认识jQuery
jQuery就是一个JavaScript函数库内部包含了大量的封装好的、可以直接调用的
JS函数
官方网站：
网址：
https://www.jquery.com
下载历史版本：下载页面中下拉页面到最底部，可以看到这个链接记录
image.png
下载对应的版本文件
image.png
二、页面加载事件
JavaScript中提供了一个window.onload等待页面DOM元素和静态资源加载完成后再去执行事件中的代码，保障代码执行时可以访问页面中的所有数据jQuery中提供了一个document.ready()等待页面DOM元素加载完成后执行回调函数内部的代码，保障代码执行时可以访问页面中的所有DOM元素
// 完整语法，编写过程过于繁琐
$(document).ready(function() {
// 等待页面DOM加载完成后执行的代码
})
// jQuery进行了页面加载方式简化
// jQuery提供了/封装了一个jQuery()函数
jQuery(function() {
// 等待页面加载后执行的代码
})
// 【推荐的最终语法】
// jQuery再次进行封装，将jQuery()封装成了$()
// jQuery = $
$(function() {
// 等待页面DOM结构加载完成后执行代码
})
三、标签选择器
jQuery提供了一个选择器语法，可以快捷的根据css选择器选择页面中需要的标签
// 选择并获取到的标签对象：jQuery对象
$("css选择器")
(1） 认识jQuery对象
// 1、认识jQuery对象
// JS语法，选择标签
const _ct = document.querySelector("#container")
// JS选择器：标签对象、DOM对象
console.log('_ct', _ct)
// jQ语法，选择标签
const $ct = $("#container")
// JQ选择器：jQuery对象，是一个类似数组的集合
console.log('$ct', $ct)
// JS对象-> jQ对象：JS对象转换后就可以使用jQuery的函数
const jqObj = $(_ct)
console.log(jqObj)
// jQ对象-> js对象
const jsObj = $ct.get(0)
console.log(jsObj)
（2） 常见选择器
官方文档：https://jquery.cuishifeng.cn/
image.png
<body>
<div id="container">
<h3>琵琶行 <small>白居易</small></h3>
<p class="impt">浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
<p>主人下马客在船，举酒欲饮无管弦。</p>
<p>醉不成欢惨将别，别时茫茫江浸月。</p>
<p>忽闻水上琵琶声，主人忘归客不发。</p>
<p>寻声暗问弹者谁，琵琶声停欲语迟。</p>
<p>移船相近邀相见，添酒回灯重开宴。</p>
<p class="impt">千呼万唤始出来，犹抱琵琶半遮面。</p>
<p>转轴拨弦三两声，未成曲调先有情。</p>
<p>弦弦掩抑声声思，似诉平生不得志。 </p>
<div>
<p>低眉信手续续弹，说尽心中无限事</p>
</div>
<hr>
<button id="btn1">id选择器</button>
<button id="btn2">class选择器</button>
<button id="btn3">标签选择器</button>
<button id="btn4">包含选择器</button>
<button id="btn5">子类选择器</button>
<button id="btn6">伪类选择器</button>
</div>
<script src="./js/jquery-2.2.4.js"></script>
<script>
$("#btn1").click(function () {
// id选择器
const $ct = $("#container")
$ct.css("border", "solid 1px red")
})
$("#btn2").click(function () {
// class选择器
const $ps = $(".impt")
$ps.css("background-color", "pink")
})
$("#btn3").click(function () {
// 标签选择器
const $p = $("p")
$p.css("border-bottom", "orangered 2px solid")
})
$("#btn4").click(function () {
// 包含选择器
const $ps = $("#container p")
$ps.css("border-bottom", "pink 5px solid")
})
$("#btn5").click(function () {
// 子类选择器
const $ps = $("#container > p")
$ps.css("border-bottom", "green solid 2px")
})
$("#btn6").click(function () {
// 伪类选择器
const $p = $("#container > p:nth-of-type(1)")
$p.css("border-bottom", "solid 2px red")
})
// 其他选择器，请移步官方文档...
</script>
</body>
四、jQuery动画
jQuery针对网页中的常见的动画效果进行了封装
- 动画：进入动画、离开动画、切换(显示/隐藏)动画
-
toggle()：显示/隐藏直接切换 -
hide()：隐藏 -
show()：显示 -
fadeIn()：透明度显示 -
fadeOut()：透明度隐藏 -
fadeToggle()：透明度显示/隐藏切换 -
fadeTo(0~1)：透明度切换到某个值 -
slideDown()：卷帘动画显示 -
slideUp()：卷帘动画隐藏 -
slideToggle()：卷帘动画显示/隐藏 - ...
-
animate()：自定义动画
五、事件操作
jQuery中提供了事件的绑定方式，也提供了事件拓展功能（阻止冒泡、阻止默认行为）
① 快捷绑定
一般情况下，我们给网页中已经存在的元素进行事件绑定，使用快捷绑定函数；通过回调函数的方式给标签绑定事件
/ 当用户点击了id="box"的标签时，执行传递给click()处理单击事件的回调函数
$("#box").click(回调函数)
// $("#box") 选择器，选择了页面中id="box"的标签
// click() 处理单击事件的函数，jQuery是JS函数库，所有的操作都是函数式开发
// click(回调函数) 当单击事件发生了之后，调用回调函数
$("#box").click(function() {
// 处理单击事件发生后的操作
})
② 常用绑定函数
-
bind()：给指定的元素绑定事件，3.0版本废弃-
unbind()：给指定的元素取消绑定的事件
-
-
live()：给指定的元素绑定事件，支持事件委托；1.7版本废弃-
die()：给指定的元素取消绑定的事件
-
-
delegate()：给指定的元素绑定事件，支持事件委托；3.0版本废弃-
undelegate()给指定的元素取消绑定的事件
-
-
on()：给指定的元素添加绑定事件，支持事件委托（特殊语法）【推荐】-
off()给指定的元素取消绑定的事件
③ 标准规范绑定
规范1：建议页面已有元素的绑定，使用快捷方式；未来元素的绑定使用on()函数进行事件委托绑定
规范2：建议页面中不论是存在的或者未来元素，统一使用on()进行绑定【推荐】，便于提高代码可读性、便于后期的的项目维护
④ 事件拓展
事件执行过程中，需要处理事件冒泡和默认行为的问题，jQuery中如何处理？
-
遵循
JavaScript中处理方式！对原生JS的处理进行了扩展
阻止冒泡：
event.stopPropagation()阻止默认行为：
event.preventDefault()
六、BOM/DOM
（1） BOM
BOM操作，依然使用原生JavaScript中的内建对象进行操作
windowlocationhistorynavigatorscreendocument
jQuery中可以将DOM对象转还成jQuery对象进行操作
console.log(window, "BOM对象")
console.log($(window), "jQuery对象,支持使用jQuery提供的功能函数")
（2） DOM
DOM操作都是对网页文档中标签对象的增删改查
① 查询DOM节点
| 语法 | 描述 |
|---|---|
$(css选择器) |
jQuery选择器 |
② 新增DOM节点
| 语法 | 描述 |
|---|---|
$("<标签名称>") |
创建一个节点<br />如：$("<div>")
|
$box.append($new) |
将$new节点，追加到$box的子节点的末尾[记] |
$new.appendTo($box) |
将$new节点，追加到$box的子节点的末尾 |
$box.prepend($new) |
将$new节点，插入到$box的第一个子节点位置[记] |
$new.prependTo($box) |
将$new节点，插入到$box的第一个子节点位置 |
$ex1.after($ex2) |
将$ex2添加到$ex1的后面（同级/兄弟节点）[记] |
$ex1.before($ex2) |
将$ex2添加到$ex1的前面[记] |
$ex2.insertAfter($ex1) |
将$ex2添加到$ex1的后面（同级/兄弟节点） |
$ex2.insertBefore($ex1) |
将$ex2添加到$ex1的前面 |
③ 查询节点
| 语法 | 描述 |
|---|---|
$ps.eq(index) |
获取索引位置的jQuery对象 |
$ps.get(index) |
获取索引位置的JS对象 |
$ps.first() |
获取第一个匹配的jQuery对象
|
$ps.last() |
获取最后一个匹配的jQuery对象 |
$ps.children() |
获取子节点 |
$ps.parents() |
获取所有父节点 |
$ps.parent() |
获取唯一的直接父节点 |
$ps.next() |
获取下一个兄弟节点 |
$ps.nextAll() |
获取后面所有兄弟节点 |
$ps.prev() |
获取上一个兄弟节点 |
$ps.prevAll(0) |
获取前面所有的兄弟节点 |
④ 删除节点
| 语法 | 描述 |
|---|---|
$box.remove() |
删除当前节点 |
$box.empty() |
删除$box中所有的子节点 |
（3） DOM 属性
| 语法 | 描述 |
|---|---|
$box.attr(name, value) |
给名称为name的属性设置value值[记] |
$box.attr(name) |
获取名称为name的属性值[记] |
$box.removeAttr(name) |
删除名称为name的属性值[记] |
$box.prop(name, value) |
给名称为name的属性设置value值 |
$box.prop(name) |
获取名称为name的属性值 |
$box.removeAttr(name) |
删除名称为name的属性值 |
（4） DOM样式
| 语法 | 描述 |
|---|---|
$box.css(key, value) |
给名称为key的样式设置value值 |
$box.css({k1:v1, k2:v2...}) |
给$box同时设置多个样式 |
$box.css(key) |
获取$box中名称为key的样式 |
（5） DOM内容
| 语法 | 描述 |
|---|---|
$box.text(内容) |
设置文本内容 |
$box.text() |
获取文本内容 |
$box.html(内容) |
设置富文本内容 |
$box.html() |
获取父文本内容 |
（6） class样式处理
| 语法 | 描述 |
|---|---|
$box.addClass(cname) |
给$box添加一个类名称 |
$box.removeClass(cname) |
删除$box上的一个类名称 |
$box.toggleClass(cname) |
TODO |
网友评论