JS学习打卡Day07

信徒不伤

于 2022-04-08 10:09:21 发布

阅读量271

点赞数

本文链接：https://blog.csdn.net/Narcissus__/article/details/124034518

版权

jQuery 选择器事件处理动画 ajax

关键词由CSDN通过智能技术生成

1、当你引入 jQuery 文件以后
+ 会在全局暴露两个变量名
=> $
=> jQuery

2、选择器: 不管使用任何选择器, 获取到的元素都是一个元素集合

3、筛选器
// 1. first()
// 2. last()
// 3. eq(索引) 注意: 索引从0 开始, 依次 +1
// 4. next()
// 5. nextAll()
// 6. prev()
// 7. prevAll()
// 8. parent()
// 9. parents()
// 注意: 获取到的是该元素所有父级结构, 逐层获取, 直到 html 标签为止
// 10. siglings()
// 注意: 拿到该元素的所有兄弟元素
// 11. find(选择器)
// 注意: 找到该元素的所有后代元素中, 满足选择器要求的元素

4、操作文本内容
// 1. html()
// 等价于我们原生 JS 中的 innerHTML
// 1-1. html() 获取
// console.log($('div').html())

// 1-2. html() 设置
// 语法: 元素集合.html(你要设置的内容)
// 注意: 可以识别并解析 html 结构字符串
// $('div').html('<h2>我是后来设置的内容</h2>')

// 2. text()
// 等价于我们原生 JS 中的 innerText
// 2-1. text() 获取
// console.log($('div').text())

// 2-2. text() 设置
// 语法: 元素集合.text(你要设置的内容)
// 注意: 不可以识别并解析 html 结构字符串
// $('div').text('<h2>我是后来设置的内容</h2>')

// 3. val()
// 等价于我们原生 JS 中 value
// 3-1. val() 获取
console.log($('input').val())

// 3-2. val() 设置
// 语法: 元素集合.val(你要设置的内容)
// 作用: 用来设置该表单元素的 value 值
$('input').val('我是后来设置的内容')

5、操作元素类名
// 1. addClass()
// 语法: 元素集合.addClass(需要添加的类名)
// $('div').addClass('e')

// 2. removeClass()
// 语法: 元素集合.removeClass(你要删除的类名)
// $('div').removeClass('b')

// 3. toggleClass()
// 语法: 元素集合.toggleClass(你要切换的类名)
// 切换: 如果本身有这个类名, 那么就是删除, 如果本身没有这个类名, 那么就是添加
var btn = document.querySelector('button')
btn.onclick = function () {
// 执行 jQuery 切换 div 类名的操作
$('div').toggleClass('box')
}

6、操作元素样式 + css()
// 1. css 获取样式
// 注意: 可以获取到元素的行内样式, 也可以获取到元素的非行内样式
// 语法: 元素集合.css(你要获取的样式名称)
// 返回值: 该样式的样式值
// console.log($('div').css('width'))
// console.log($('div').css('height'))
// console.log($('div').css('background-color'))

// 2. css 设置样式
// 语法: 元素集合.css(样式名, 样式值)
// 注意: 当你需要给一个元素设置样式值为 px 单位的时候, 可以省略单位不写
// $('div').css('width', '300px')
// $('div').css('height', 500)
// $('div').css('background-color', 'red')

// 3. css 批量设置样式
// 语法: 元素集合.css({ 你所有需要设置的样式 })

7、操作元素属性
1. attr()
=> 可以进行设置和获取元素的属性
=> 注意: 一般用于操作元素的自定义属性
=> 注意: attr 操作的所有属性都会直接出现在元素的标签身上
=> 获取:
-> 语法: 元素.attr(你要获取的属性名)
-> 返回值: 该属性名对应的属性值
=> 设置:
-> 语法: 元素.attr(属性名, 属性值)
2. removeAttr()
=> 对元素的属性进行删除操作
=> 语法: 元素集合.removeAttr(你要删除的属性名)

3. prop()
+ 可以获取和设置元素的属性
+ 注意:
=> 当 prop 设置元素的原生属性, 会直接响应在元素标签身上
=> 当 prop 设置元素自定义属性, 不会直接响应在元素标签身上, 会响应在元素对象身上
+ 注意: prop 方法不能获取元素标签身上的自定义属性, 只能获取到 prop 方法自己设置的自定义属性
+ prop() 设置
=> 语法: 元素集合.prop(属性名, 属性值)
+ prop() 获取
=> 语法: 元素集合.prop(你要获取的属性名)
=> 返回值: 该属性对应的值
4. removeProp()
+ 用来删除元素属性的方法
+ 注意:
=> 不能删除原生属性
=> 只能删除由 prop 方法设置的自定义属性
+ 语法: 元素集合.removeProp(你要删除的属性名)

8、获取元素尺寸
+ 注意:
1. 不管该元素是否隐藏, 都能获取到该元素的值
2. 不管盒子模型是什么状态, 拿到的尺寸区域不变

// 1. width() 和 height()
// 获取到的就是元素内容区域的尺寸
// 2. innerWidth() 和 innerHeight()
// 获取到的就是元素内容+padding区域的尺寸
// 3. outerWidth() 和 outerHeight()
// 获取到的就是元素内容区域+padding+border的尺寸
// 4. outerWidth(true) 和 outerHeight(true)
// 拿到的包含你设置的 margin 尺寸值

9、获取元素偏移量
// 1. offset()
// 获取元素相对于页面左上角的坐标位置
// 注意: 返回值是一个对象数据类型, { top: yyy, left: xxx }
// 2. position()
// 获取的就是元素的定位位置
// 注意: 如果你设置的是 right 和 bottom, 会自动帮你换算成 left 和 top 的值给到你

10、事件绑定
// 1. on() 方法绑定事件
// 1-1. 基础绑定事件
// 语法: 元素集合.on('事件类型', 事件处理函数)
// $('div').on('click', function () { console.log('我是div 的点击事件') })
// 1-2. 事件委托绑定事件
// 语法: 元素集合.on('事件类型', 选择器, 事件处理函数)
// 把事件绑定给 div 元素, 当你在 div 内的 p 元素触发事件的时候, 执行事件处理函数
// 事件委托, 把 p 元素的事件委托给了 div 元素来绑定
// $('div').on('click', 'p', function () { console.log('我是事件委托形式的事件') })
// 1-3. 批量绑定事件
// 语法: 元素集合.on({ 事件类型1: 处理函数, 事件类型2: 处理函数 })
// 注意: 不能进行事件委托了
// $('div').on({
// click: function () { console.log('点击事件') },
// mouseover: function () { console.log('鼠标移入事件') },
// mouseout: function () { console.log('鼠标移出事件') }
// })

// 2. one()
// 用来绑定事件, 和 on 方法绑定事件的方式是一样的
// 区别: one 方法绑定的事件, 只能执行一次
// 2-1. 基础绑定事件
// $('div').one('click', function () { console.log('基础绑定事件') })
// 2-2. 事件委托
// $('div').one('click', 'p', function () { console.log('事件委托绑定事件') })
// 2-3. 批量绑定事件
// $('div').one({
// click: function () { console.log('点击事件') },
// mouseover: function () { console.log('鼠标移入事件') },
// mouseout: function () { console.log('鼠标移出事件') }
// })

// 3. hover()
// 注意: jQuery 里面一个特殊的事件
// 语法: 元素集合.hover(移入时触发的函数, 移出时触发的函数)
// 当你只传递一个函数的时候, 会在移入移出都触发
// $('div').hover(
// function () { console.log('函数1') },
// function () { console.log('函数2') }
// )

// 4. 常用事件函数
// jQuery 把我们最长用到的一些事件, 单独做成了事件函数
// 我们通过调用这些事件函数, 来达到绑定事件的效果
// click(), mouseover(), mouseout(), change(), ...

11、事件的绑定和触发
// 1. off() 事件解绑
// 1-1. 解绑全部事件处理函数
// 语法: 元素集合.off(事件类型)
// 会把 div 的 click 事件对应的所有事件处理函数全部移除
// $('div').off('click')
// 1-2. 解绑指定的事件处理函数
// 语法: 元素集合.off(事件类型, 要解绑的事件处理函数)
// 会把 div 的 click 事件对应的 handlerB 事件处理函数移除
// $('div').off('click', handlerB)

// 2. trigger() 事件触发
// 使用代码的方式, 来触发事件
// 语法: 元素集合.trigger(事件类型)
// 就会触发该元素的该事件
setInterval(function () {
// 表示每 1000ms 触发一次 div 的 click 事件
$('div').trigger('click')
}, 1000)

12、动画
（1）基本动画
1. show() 显示
2. hidt() 隐藏
3. toggle() 切换
=> 本身如果是显示的, 就隐藏
=> 本身如果是隐藏的, 就显示
+ 对于以上三个运动函数, 有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第三个表示运动结束的回调函数
（2）折叠动画
1. slideDown() 显示
2. slideUp() 隐藏
3. slideToggle() 切换
=> 本身如果是显示的, 就隐藏
=> 本身如果是隐藏的, 就显示
+ 对于以上三个运动函数, 有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第三个表示运动结束的回调函数
（3）渐隐渐显动画
1. fadeIn() 显示
2. fadeOut() 隐藏
3. fadeToggle() 切换
=> 本身如果是显示的, 就隐藏
=> 本身如果是隐藏的, 就显示
+ 对于以上三个运动函数, 有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第三个表示运动结束的回调函数
4. fadeTo(运动时间, 指定的透明度, 运动曲线, 运动结束的回调函数)
（4）综合动画
+ animate()
=> 第一个参数: 要运动的样式, 以一个对象数据类型传递
=> 第二个参数: 运动时间
=> 第三个参数: 运动曲线
=> 第四个参数: 运动结束的回调函数
+ 注意:
=> 关于颜色相关的样式是不能运动的
=> 关于 transform 相关的样式是不能运动的
（5）结束动画
+ 需要用到运动结束的函数
1. stop()
=> 当任何一个元素, 执行了 stop 方法以后
=> 会立即结束当前的所有运动, 目前运动到什么位置, 就停留在什么位置
=> 一般对于结束动画的时候, 都是在运动开始之前
2. finish()
=> 放任何一个元素, 执行了 finish 方法以后
=> 会立即结束当前的所有运动, 直接去到动画的结束位置

13、jQuery 的 ajax 请求
+ 注意:
=> 因为发送 ajax 请求, 不是操作 DOM
=> 不需要依赖选择器去获取到元素
=> 他的使用, 是直接依赖 jQuery 或者 $ 变量来使用
-> 语法: $.ajax({ 本次发送 ajax 的配置项 })
+ 配置项:
1. url: 必填, 表示请求地址
2. method: 选填, 默认是 GET, 表示请求方式
3. data: 选填, 默认是 '', 表示携带给后端的参数
4. async: 选填, 默认是 true, 表示是否异步
5. success: 选填, 表示请求成功的回调函数
6. error: 选填, 表示请求失败的回调函数