视频地址:【千锋前端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:90
11.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)
}
})
之前前后端交互没有搞好,就这样吧。