视频地址：【千锋前端JavaScript全套教程_JS零基础完美入门到项目实战】 https://www.bilibili.com/video/BV1W54y1J7Ed/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目录
11.8.2 innerWidth() 和 innerHeight()
11.8.3 outerWidtrh() 和 outerHeight()
11.8.4 outerWidth() 和 outerHeight()
11 jQuery
- 一个大型的，简单的，第三方类库
-
类库：将常用的操作封装到一起，需要用的时候直接使用。
-
jQuery，对DOM操作进行完善的封装，把最常用的DOM操作封装到了一起，包括各种元素操作以及ajax操作。
- 对DOM操作进行封装
- 获取DOM节点
- 操作节点文本
- 操作节点样式
- 操作节点类名
- 操作节点属性
- 获取节点尺寸
- 获取节点偏移量
- 操作节点事件
- 节点动画操作
- ajax封装
- ...
11.1 引入jQuery
- 当引入jQuery文件以后，会在全局暴露两个变量名
- $
- jQuery
代码实现（在body标签内部）
<!-- 引入jquery文件 -->
<script src="./jquery/jquery.js"></script>
<script>
// 当引入jQuery文件以后，
// 会在全局暴露两个变量
// $
// jQuery
console.log($)
console.log(jQuery)
</script>结果
可见，$和jQuery是一模一样的，能用jQuery写的就能用$写。然后就可以利用jQuery进行DOM操作了。
11.2 jQuery的选择器
- 语法： $('选择器')
代码实现
html
<ul>
<li class="a">1</li>
<li>2</li>
<li class="b">3</li>
<li>4</li>
<li>5</li>
<li class="a">6</li>
<li>7</li>
<li id="box">8</li>
<li>9</li>
<li>10</li>
</ul>jQuery
<!-- 先引入jQuery文件 -->
<script src="./jquery/jquery.js"></script>
<script>
// 不管使用任何选择器，获取到的元素都是一个元素集合
// id选择器
console.log($('#box'))
// 类名选择器
console.log($('.a'))
// 标签名选择器
console.log($('li'))
// 结构选择器
console.log($('li:nth-child(odd)')) // 所有奇数个li
console.log($('li:nth-child(even)')) // 所有偶数个li
</script>11.3 jQuery的筛选器
- jQuery的筛选器：jQuery选择器获取到的元素进行筛选
- 语法：$('选择器').筛选器名称()
- 常用筛选器
- first()
- last()
- eq(索引)
- next()
- nextAll()
- prev()
- prevAll()
- parent()
- parents()
- siblings()
- find()
代码实现
html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5
<i>子二级</i>
</li>
<span>我是ul里的一个span标签</span>
<li>6</li>
<li>7</li>
<li>8</li>
<i>子一级</i>
<li>9</li>
<li>10</li>
</ul>JS
<script src="./jquery/jquery.js"></script>
<script>
// 筛选器
// 1 first
console.log($('li').first())
// 2 last
console.log($('li').last())
// 3 eq(索引)
// 索引从0开始，依次加1
console.log($('li').eq(5))
// 4 next nextAll
console.log($('span').next())
console.log($('span').nextAll())
// 5 prev prevAll
console.log($('span').prev())
console.log($('span').prevAll())
// 6 parent parents
console.log($('span').parent())
// 获取到的是该元素所有父级结构，逐层获取，直到 html 标签为止
console.log($('span').parents())
// 7 siblings
// 拿到该元素的所有兄弟元素
console.log($('span').siblings())
// 8 find(选择器)
// 找到该元素的所有后代元素中，满足选择器要求的元素
console.log($('ul').find('i'))
</script>11.4 操作文本内容
- jQuery提供了3个方法操作文本内容
- html()
- text()
- val()
11.4.1 html()
等价于原生JS中的innerHTML
获取选择器下的所有内容。
看注释。
// 操作文本内容
// 1 html()
// 等价于原生JS中的 innerHTML()
// 1-1 html() 获取
console.log($('div').html())
// div下所有内容，以字符串形式返回
// 1-2 html() 设置
// 语法：元素集合.html(你要设置的内容)
// 注意：可以识别并解析 html 结构字符串
$('div').html('<h2>最新内容</h2>')11.4.2 text()
等价于原生JS中的 innerText()。
看注释。
将选择器内所有的内容都替换为text()括号内的内容。
// 2 text()
// 等价于原生JS中的 innerText()
// 2-1 text() 获取
console.log($('div').text())
// div下所有文本内容
// 2-2 text() 设置
// 语法：元素集合.text(你要设置的内容)
// 注意：不可以识别并解析 html 结构字符串
$('div').text('最新内容')11.4.3 val()
获取value属性值。
// 3 val()
// 等价于原生JS里的 value属性
// 3-1 val() 获取 主要获取表单元素的内容(input)
console.log($('input').val())
// 3-2 val() 设置
// 语法：元素集合.val(要设置的内容)
// 作用：用来设置该表单元素的 value 值
$('input').val('not world')11.5 操作元素类名
- jQuery提供了3个方法操作类名
- addClass()
- removeClass()
- toggleClass()
11.5.1 addClass()
元素本来类名为class=“a b c d”，添加类名后为class=“a b c d e”
// 操作元素类名
// 1 addClass()
// 语法：元素集合.addClass(需要添加的类名)
$('div').addClass('e')11.5.2 removeClass()
元素本来类名为class=“a b c d”，添加类名后为class=“a c d e”
// 2 removeClass()
// 语法：元素集合.removeClass(要删除的类名)
$('div').removeClass('b')11.5.3 toggleClass()
切换的类名。
切换：如果本身有这个类名，那么就删除；如果本身没有这个类名，那么就添加。
// 3 toggleClass()
// 语法：元素集合.toggleClass(你要切换的类名)
// 切换：如果本身有这个类名，那么就删除；如果本身没有这个类名，那么就添加
$('div').toggleClass('box')11.6 操作元素样式
- css()用来操作元素样式
- 获取样式
- 1 css() 获取样式
注意：可以获取元素的行内样式，也可以获取元素的非行内样式
语法：元素集合.css(要获取的样式名称)
返回值：该样式的样式值
- 1 css() 获取样式
- 设置样式
- 2 css() 设置样式
语法：元素集合.css(样式名, 样式值)
样式值是px为单位，这个px可以省略不写（在jQuery里）
- 2 css() 设置样式
- 批量设置样式
- 3 css()批量设置样式
语法：元素集合.css({你所有需要设置的样式})- 在元素集合里传一个对象。
- 3 css()批量设置样式
- 获取样式
代码实现
html
<style>
div {
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div style="width:100px;"></div>js
// css()
// 1 css() 获取样式
// 注意：可以获取元素的行内样式，也可以获取元素的非行内样式
// 语法：元素集合.css(要获取的样式名称)
// 返回值：该样式的样式值
console.log($('div').css('width')) // width是行内样式 不在style里
console.log($('div').css('height')) // height是非行内样式 在style里
// 2 css() 设置样式
// 语法：元素集合.css(样式名, 样式值)
// 样式值是px为单位，这个px可以省略不写（在jQuery里）
$('div').css('width', '300px')
$('div').css('height', '500')
// 3 css()批量设置样式
// 语法：元素集合.css({你所有需要设置的样式})
$('div').css({
width: 200,
height: 300
})
11.7 操作元素属性
- attr()
- removeAttr()
- prop()
- removeProp()
11.7.1 attr()和removeAttr()
-
1 attr()
-
进行设置和获取元素的属性
-
注意：一般用于操作元素的自定义属性
-
attr操作的所有属性都会直接出现在元素的标签上（区别与prop()）
-
1 获取 attr()
-
语法：元素.attr(你要获取的属性名)
-
返回值：该属性名对应的属性值
-
-
2 设置
-
语法：元素.attr(属性名，属性值)
-
可以设置原生属性，也可以设置元素没有的属性（给元素新增属性）
-
注意：原生属性：元素本身就有的属性。自定义属性不是原生属性。
-
注意：attr一般不用来设置原生属性
-
-
-
2 removeAttr()
-
作用：对元素的属性进行删除操作
-
语法：元素集合.removeAttr(你要删除的属性名)
-
// 1-1 attr()
console.log($('div').attr('hello'))
// 当然也可以获取id属性值
console.log($('div').attr('id'))
// 1-2 设置
$('div').attr('hello', 'JavaScript')
// 1-3
$('div').removeAttr('hello')
$('div').removeAttr('id') //也可以删除原生属性'id'11.7.2 prop()和removeProp()
- 1 prop()
- 可以获取和设置元素的元素属性
- 注意：
- 当prop设置元素的原生属性，会直接响应在元素标签的身上；
- 当prop设置元素的自定义属性，不会响应在元素标签身上，会响应在元素对象身上；
- prop方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性。
- 总结：可以设置原生属性，原本的自定义属性，自己的自定义属性。
- 1 prop设置
- 语法：元素集合.prop(属性名，属性值)
// 1-1 prop() console.log($('div').prop('id','contaniner')) console.log($('div').prop('a','100')) // 发现，标签身上没有属性值为100的a属性， // 但是打印可以打印出来a属性，即在div对象自己身上存储了a属性
- 语法：元素集合.prop(属性名，属性值)
- 2 prop获取
- 语法：元素集合.prop(你要获取的属性名)
- 返回值：该属性对应的值。
- 注意：prop只能获取自己设置的自定义属性，因此不能获取原本自定义属性hello的属性值
// 1-2 prop() console.log($('div').prop('id')) console.log($('div').prop('hello')) // 返回 underfined， -
总结：只能获取原生属性和自己的自定义属性
-
2 removeProp()
-
用来删除元素属性的方法
-
注意：（不试了，应该没啥问题p74 9:57）
-
不能删除原生属性
-
只能删除由prop方法设置的自定义属性。
-
-
11.8 获取元素尺寸
- width()
- innerwidth()
- outerwidth()
- height()
- innerHeight()
- outerHeight()
获取元素尺寸
11.8.1 width() 和height()
获取到的就是元素内容区域的尺寸
返回值就是原本的大小。
// 1 width()和height()
console.log($('div').width()) // 300
console.log($('div').height()) //300
11.8.2 innerWidth() 和 innerHeight()
返回值是原本大小+padding
// 2 innerWidth 和 innerHeight
console.log('-------------------------------------')
console.log($('div').innerWidth()) // 340
console.log($('div').innerHeight()) // 340
11.8.3 outerWidtrh() 和 outerHeight()
console.log($('div').outerWidth()) // 380
console.log($('div').outerHeight()) // 380返回值是原本大小+padding+border
380*380
11.8.4 outerWidth() 和 outerHeight()
outerXxxx(true)返回值是包含你设置的margin的大小
// outerXxxx(true)返回值是包含你设置的margin的大小
console.log($('div').outerWidth(true))
console.log($('div').outerHeight(true)) 
11.8.5 注意事项
- 不管元素是否隐藏，都能获取到该元素的值
- 1、display: none，即不显示，也是会返回相应的值
- 2、visibility: hidden，也是不显示，也会返回相应的值
- 不管盒子模型是什么状态，拿到的尺寸区域不变
- 如果box-sizing（css样式）由content-box改为border-box（内嵌式），相应的函数返回值会变化，因为尺寸变小了。
11.9 获取元素偏移量
正常显示
css
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
margin: 30px;
background-color: skyblue;
overflow: hidden;
}
p {
width: 300px;
height: 500px;
margin: 30px;
background-color: orange;
}
span {
/* 为了设置width和height */
display: block;
width: 100px;
height: 100px;
margin: 30px;
background-color: pink;
}
</style>html
<div>
<p><span></span></p>
</div>正常显示
11.9.1 offset() 绝对位置
- offset
- 获取元素相对于页面左上角的坐标位置
- 注意：返回值是一个对象数据类型，{top: xxxx, left: xxxxx}
案例
// 1 offset
console.log($('div').offset()) // 返回 top：30 left：30
console.log($('p').offset()) // 返回 top：60 left：60
console.log($('span').offset()) // 返回 top：90 left：9011.9.2 position() 相对位置
修改上面的例子
p {
width: 300px;
height: 500px;
margin: 30px;
background-color: orange;
overflow: hidden;
/* 新增 */
position: relative;
}
span {
/* 为了设置width和height */
display: block;
width: 100px;
height: 100px;
/* margin: 30px; */
background-color: pink;
/* 新增 */
position: absolute;
left: 30px;
top: 30px;
}- position()
- 获取的就是元素的定位位置
- position()返回的是相对于被定位的父元素的坐标
案例
给span去掉了margin，添加了position：absolute，和left top（分别为30px）的位置。
给p添加了position：relative
显示效果还是跟上面一样
// 2 position
console.log($('span').position()) // 返回 top：30 left：30如果span的位置变化了，改为right 和bottom都为30px
显示
注意：会自动换算为top和left返回
因为是定位位置，所以就是pink相对于orange的和位置，left：orange的width-右边的30=170
top也是170
因此，top和left均为170.
11.10 事件绑定
案例的结构
代码
<style>
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
p {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div>我是div标签
<p>我是div内的p标签</p>
</div>11.10.1 on()
- 1 基础绑定事件
- 语法：元素集合.on( ’事件类型’ ，事件处理函数)
- 使用：
$('div').on('click', function() {console.log('我是div的点击事件')})
- 2 事件委托绑定事件
- 语法：元素集合.on( ‘事件类型’, 选择器，事件处理函数)
- 把事件绑定给div元素，当在div内的p元素触发事件的时候，执行事件处理函数
- 事件委托，将p元素的事件委托给div元素来绑定
- 使用：
// 事件委托绑定事件 $('div').on('click', 'p', function() {console.log('我是事件委托形式的事件')})
- 3 批量绑定事件
- 语法：元素集合.on( { 事件类型1：处理函数， 事件类型2： 处理函数} )
- 注意：批量绑定事件就不可进行事件委托
- 使用：
// 批量绑定事件 $('div').on({click: function() {console.log('我是div的点击事件')}, mouseover: function() {console.log('我是div的鼠标移入事件')}, mouseout: function() {console.log('我是div的鼠标移出事件')},
移入移出事件很有意思
11.10.2 one()
用来绑定事件，与on()绑定事件的方式是一样的。
区别：one方法绑定的事件，只能执行一次。
比如，1 点击事件，只能触发一次，再次点击，就不能触发点击事件了；2 事件委托，也是只能触发一次事件委托；3 批量绑定事件，批量绑定的事件都只能执行一次。
（这里就不给例子了，无非就是将11.10.1代码的on替换为one）
11.10.3 hover()
- hover
- 注意：jQuery里面一个特殊的事件。
- 语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
- 当只传递一个函数时，会在移入移出都触发
- 使用：
// hover $('div').hover(function() {console.log('我是div的移出事件')},function() {console.log('我是div的移入事件')}) $('div').hover(function() {console.log('我是div的移出事件')})
11.10.4 常用事件函数
- 常用事件函数
- jQuery 把最常用到的一些事件，单独做成了事件函数
- 通过调用这些事件函数，来达到绑定事件的效果
- 语法：$('div').click(事件处理函数)
- click()，mouseover()，mouseout(), change(), ...
- 使用：
// 事件绑定函数 $('div').click(function() {console.log('我是div的移出事件')})
11.11事件解绑和触发
案例
html
<div>
我是div标签
</div>js
// 准备事件处理函数
function handlerA() { console.log('我是handlerA事件处理函数')}
function handlerB() { console.log('我是handlerB事件处理函数')}
function handlerC() { console.log('我是handlerC事件处理函数')}
// 给div元素绑定事件
$('div').click(handlerA)
$('div').click(handlerB)
$('div').click(handlerC)11.11.1 off() 事件解绑
- 1 全部解绑
- 语法：元素集合.off( 事件类型 )
- 作用：将div的click事件对应的所有事件处理函数全部移除
- 使用：
// 1 off() 事件解绑 $('div').off('click')
- 2 解绑指定的事件处理函数
- 语法：元素集合.off( 事件类型，要解绑的事件处理函数)
- 使用：
// 1-2 $('div').off('click',handlerA)
11.11.2 trigger() 事件触发
- trigger()
- 使用代码的方式来触发事件
- 语法：元素集合.trigger( 事件类型 )
- 注意：调用一次触发一次
- 使用：
$('div').trigger('click')
11.12 jQuery的基本动画函数
将基本的DOM元素运动封装起来了，可以便捷写出基本的动画效果。
- jQuery的基本动画函数
- show() 显示
- hide() 隐藏
- toggle() 切换
- 对于以上三个函数，都有共同的参数
- 第一个参数：运动时间
- 第二个参数：运动曲线
- 第三个参数：运动结束的回调函数
- 回调函数应该也就是结束时要调用的函数了，感觉名字起得太大了，我还以为是递归函数之类的。
案例
css
<style>
*{ margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>html
<button> show </button>
<button> hidden </button>
<button> toggle </button>
<div>
</div>代码
// 基本动画
$('button:nth-child(1)').click( function () {
// 执行show动画函数
$('div').show(1000, 'linear', function () {
console.log('show 结束')
})
})
$('button:nth-child(2)').click( function () {
// 执行hide动画函数
$('div').hide(1000, 'linear', function () {
console.log('hide 结束')
})
})
$('button:nth-child(3)').click( function () {
// 执行toggle动画函数
$('div').toggle(1000, 'linear', function () {
console.log('toggle 结束')
})
})11.12.1 show()
11.12.2 hide()
11.12.3 toggle()
11.13 jQuery的折叠动画
- jQuery的折叠动画函数
- slideDown() 显示
- slideUp() 隐藏
- slideToggle() 切换
代码
<script>
// 基本动画
$('button:nth-child(1)').click( function () {
// 执行slideDown动画函数
$('div').slideDown(1000, 'linear', function () {
console.log('slideDown 结束')
})
})
$('button:nth-child(2)').click( function () {
// 执行slideUp动画函数
$('div').slideUp(1000, 'linear', function () {
console.log('slideUp 结束')
})
})
$('button:nth-child(3)').click( function () {
// 执行slideToggle动画函数
$('div').slideToggle(1000, 'linear', function () {
console.log('slideToggle 结束')
})
})
</script>效果
本质是在改变元素的高，显示就是高变大，隐藏就是高变小，切换也是同理。
11.13.1 slideDown()
11.13.2 slideUp()
11.13.3 slideToggle()
11.14 jQuery的渐隐渐现动画
- jQuery的渐隐渐现动画函数
- fadeIn() 显示
- fadeOut() 隐藏
- fadeToggle() 切换
- 以上三个函数的参数与11.13的函数一致，有三个参数，效果如其名，类似ppt的淡入淡出功能。
- fadeTo()
- 参数1：运动时间，参数2：指定的透明度，参数3：运动曲线，参数4：回调函数
代码不写了
11.14.1 fadeIn()
11.14.2 fadeOut()
11.14.3 fadeToggle()
11.14.4 fadeTo()
11.15 jQuery的综合动画 animate()
- animate()
- 参数1：要运动的样式，以一个对象数据类型传递
- 参数2：运动时间
- 参数3：运动曲线
- 参数4：回调函数
- 注意：关于 颜色 和 transform 相关的样式是不能运动的，其他都可以，比如left， top，border-radius
搜嘎
代码
$('button').click(function () {
// animate
$('div').animate({
width: 500,
height: 600
}, 1000, 'linear', function () {
console.log('animate 结束')
})
})
效果
原来的div的宽高一起长到指定的width和height
11.16 jQuery的运动结束函数
需要用到运动结束的函数：多次点击toggle切换，导致div盒子一直在此消彼长，点击多少次就实现多少次。当点击事件已经结束，但是div盒子还在放缩。（类似手机卡了但是用户一直点点点，等手机恢复正常后，一直在执行用户点点点的操作）。
11.16.1 stop()
- stop()
- 当任何函数执行了stop()以后，会立即结束当前所有的运动。
- 停在此刻
代码
$('button:nth-child(1)').click(function () {
$('div').toggle(2000)
})
$('button:nth-child(2)').click(function () {
$('div').stop()
})效果：点击一次toggle按钮，然后立刻点击stop按钮就会停止动画效果
代码2
- stop
- 利用结束动画书写动画函数
- 每次触发，都会把之前的动画停止，只执行本次最新的动画
$('button:nth-child(1)').click(function () {
// 利用结束动画书写动画函数
$('div').stop().toggle(2000)
})效果：每次从上次结束的地方开始变化。
11.16.2 finish()
- finish()
- 会立即结束当前的所有运动，直接去到动画的结束位置。
- 利用完成动画书写动画函数
- 每次触发的时候，都会将之前的动画瞬间完成，只执行本次最新的动画，这里就是toggle
- 实现
$('button:nth-child(1)').click(function () { // 利用结束动画书写动画函数 $('div').finish().toggle(2000) })
11.17 jQuery的ajax请求
- jQuery的ajax请求
- 注意：因为发送ajax请求不是操作DOM，因此不需要依赖选择器去获取到元素
- 使用：直接依赖jQuery变量，或者$变量
- 语法：$.ajax({ 本次发送ajax的配置项 })
- 配置项
- 1 url： 必填，表示请求地址
- 2 method：选填，默认是get，表示请求方式
- 3 data：选填，默认是''(空字符串)，表示携带给后端的参数
- 4 async：选填，默认是true，表示是否异步
- 5 success：选填，表示请求成功的回调函数
- 6 error：选填，表示请求失败的回调函数
- 配置项
代码
$.ajax({
url: 'http://localhost:8888/test/first',
success: function() {
// res接收的是后端给回的响应结果
console.log(res)
}
})之前前后端交互没有搞好，就这样吧。
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
