首页 前端知识 2024年最新jQuery超详细总结(1),大厂前端研发岗面试复盘

2024年最新jQuery超详细总结(1),大厂前端研发岗面试复盘

2024-05-19 09:05:01 前端知识 前端哥 340 370 我要收藏

最后

文章到这里就结束了,如果觉得对你有帮助可以点个赞哦

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 创建一个 div 元素

console.log($(‘

我是一个创建出来的节点 ’))

2. 插入节点
  • 对应原生 js 里面的 appendChild()

  • 内部插入

  • 放在页面元素的子元素位置, 放在末尾

  • 页面元素.append(要插入的元素)

  • 要插入的元素.appendTo(页面元素)

  • 放在页面元素的子元素位置, 放在最前

  • 页面元素.prepend(要插入的元素)

  • 要插入的元素.prependTo(页面元素)

  • 外部插入

  • 放在页面元素的下一个兄弟元素位置

  • 页面元素.after(要插入的元素)

  • 要插入的元素.insertAfter(页面元素)

  • 放在页面元素的上一个兄弟元素位置

  • 页面元素.before(要插入的元素)

  • 要插入的元素.insertBefore(页面元素)

3. 删除节点
  • 对应原生 js 里面的 removeChild()

  • 页面元素.empty() -> 把自己变成空标签,将所有子元素移除

  • 页面元素.remove() -> 把自己移除

  • 没有删除某一个子节点的方法,因为 jQuery 的选择器的强大,直接找到要删除的节点, remove()

4. 替换节点
  • 对应原生 js 里面的 replaceChild()

  • 页面元素.replaceWith(替换元素)

  • 替换元素.replaceAll(页面元素)

5. 克隆节点
  • 对应原生 js 里面的 cloneNode()

  • 元素.clone()

  • 两个参数的值为 truefalse

  • 第一个参数: 自己的事件是否克隆

  • 第二个参数: 子节点的事件是否克隆

  • 如果第一个参数的值为false,那么第二个参数不起作用,没有意义。

  • 不管你是否传递参数, 都会把所有后代元素都克隆下来

  • 元素 + 文本内容 + 属性 + 行内样式

  • 参数只决定是否克隆元素身上的事件

九 获取元素尺寸


尺寸: 元素的占地面积
  • width 和 height

  • padding

  • border

  • margin

三套方法, 四种使用方式
  • 这些方法都是不考虑盒模型的状态(不管是什么型, 都是固定区域)
  1. width()height()
  • 获取元素的 内容 区域的尺寸
  1. innerWidth()innerHeight()
  • 获取元素的 内容 + padding 区域的尺寸
  1. outerWidth()outerHeight()
  • 获取元素的 内容 + padding + border 区域的尺寸
  1. outerWidth(true)outerHeight(true)
  • 获取元素的 内容 + padding + border + margin 区域的尺寸

十 获取元素位置


1. offset()
  • offset: 偏移量

  • 是一个读写的属性

  • 读取

  • 不传递参数就是读取

  • 读到的元素相对于页面的位置关系

  • 返回值是一个对象 { left: xxx, top: xxx }

  • 书写

  • 传递一个对象就是写入 { left: xxx, top: xxx }

  • 注意: 绝对写入

  • 不管你本身和页面的尺寸是什么样,写多少就是多少

2. position()
  • postition: 定位

  • 只读的方法

  • 读取:

  • 元素相对于定位父级的位置关系

  • 得到的也是一个对象 { left: xxx, top: xxx }

  • 如果你写的是 right 或者 bottom, 会自动计算成 left 和 top 值给你

十一 获取卷去的尺寸(页面滚动条)


scrollTop()
  • 原生 js 里面 document.documentElement.scrollTop

  • 读写的方法

  • 不传递参数的时候就是获取卷去的高度

  • 传递一个参数就是设置卷去的高度

scrollLeft()
  • 原生 js 里面 document.documentElement.scrollLeft

  • 读写的方法

  • 不传递参数的时候就是获取卷去的宽度

  • 传递一个参数的时候就是设置卷去的宽度

十二 jQuery中的函数


ready() 事件
  • 类似于 window.onload 事件,但是有所不同

  • window.onload 会在页面所有资源加载行

  • ready() 会在页面 html 结构加载完毕后执行

  • 也叫做 jQuery 的入口函数

  • 有一个简写的形式 $(function () {})

each() 方法
  • 类似于 forEach(), 遍历数组的

  • jQuery 的元素集合, 是一个 jQuery 数组, 不是一个数组, 不能使用 forEach()

  • forEach语法: forEach(function (item, index) {})

  • each语法:each(function (index, item) {})

  • 比较少用到, 因为 jQuery 隐式迭代 自动遍历

十三 jQuery中的动画


让元素出现不同的移动, 改变
  • transition -> 过渡动画

  • animation -> 帧动画

标准动画
  1. show() 显示元素
  • 语法: show(时间, 运动曲线, 运动结束的函数)
  1. hide() 隐藏元素
  • 语法: hide(时间, 运动曲线, 运动结束的函数)
  1. toggle() 改变元素显示或隐藏(如果显示就隐藏,如果隐藏就显示)
  • 语法: toggle(时间, 运动曲线, 运动结束的函数)

  • 三个方法的参数都可以选填,不需要每个都填写

折叠动画
  1. slideDown() 下滑显示
  • 语法: slideDown(时间, 运动曲线, 运动结束的函数)
  1. slideUp() 上滑隐藏
  • 语法: slideUp(时间, 运动曲线, 运动结束的函数)
  1. slideToggle() 切换滑动和隐藏
  • 语法: slideToggle(时间, 运动曲线, 运动结束的函数)
渐隐渐显动画
  • 实质是透明的opacity的变化
  1. fadeIn() 逐渐显示
  • fadeIn(时间, 运动曲线, 运动结束的函数)
  1. fadeOut() 逐渐消失
  • fadeOut(时间, 运动曲线, 运动结束的函数)
  1. fadeToggle() 切换显示和消失
  • fadeToggle(时间, 运动曲线, 运动结束的函数)

  • 以上三个方法的参数,均有默认值

  1. fadeTo() 设置元素透明度变为你指定的数字
  • fadeTo(时间, 你指定的透明度, 运动曲线, 运动结束的函数)
综合动画
  • animate()

  • 基本上大部分的 css 样式都可以动画

  • transform 不行, 颜色不行

  • 语法: animate({}, 时间, 运动曲线, 运动结束的函数)

  • { }里面就写你要运动的 css 属性,默认单位为px

停止动画
  • 让当前的动画结束

  • 因为 jQuery 的动画你一直点击,就会一直触发。即使不再点击让事件发生,还是会把没执行完的动画执行完毕。

  • 你点击 10 次, 他就会触发 10 次, 直到 10 次全都完毕才结束

  1. stop()
  • 当这个函数触发的时候, 就会让运动立刻停下来

  • 你运动到哪一个位置了就停止在哪一个位置

  1. finish()
  • 当这个函数触发的时候, 就会让运动立刻停下来

  • 不管你运动到了哪一个位置, 瞬间到达运动完成位置

十四 jQuery发送ajax请求


jQuery 里面帮我们封装好了几个方法
专门用来发送 ajax 请求的
  1. $.get() -> 专门用来发送 get 请求的

  2. $.post() -> 专门用来发送 post 请求的

  3. $.ajax() ->

  • 发送什么请求都可以(get, post, put, delete)

  • 并且还可以发送一个 jsonp 请求

jQuery 发送一个 GET 请求
  • 语法: $.get(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

  • 请求地址: 你要请求的后端接口地址(必填)

  • 携带参数: 你需要给后端传递的参数

  • 可以是一个固定格式的字符串 ‘key=value&key=value’

  • 也可以是一个对象 { a: 100, b: 200 }

  • 成功回调: 当请求成功的时候会执行的函数

  • 期望数据类型: 就是你是不是需要 jQuery 帮你解析响应体

- 默认是不解析

- 当你传递一个 ‘json’ 的时候, 会自动帮你执行 JSON.parse()

// 打开页面就发送 GET 请求了

// $.get(‘./server/get.php’, ‘a=100&b=200’, function (res) {

// // res 就是后端返回的数据, 也就是响应体

// // console.log(JSON.parse(res))

// console.log(res)

// }, ‘json’)

// $.get(‘./server/get.php’, { a: 300, b: 400 }, res => {

// console.log(res)

// }, ‘json’)

jQuery 发送一个 POST 请求
  • 语法: $.post(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

  • 四个参数和 $.get 是一摸一样的

// 打开页面就发送 POST 请求了

// $.post(‘./server/post.php’, ‘c=hello&d=world’, function (res) {

// console.log(res)

// }, ‘json’)

// $.post(‘./server/post.php’, { c: ‘你好’, d: ‘世界’ }, res => {

// console.log(res)

// }, ‘json’)

jQuery 的 $.ajax 方法
  • 用来发送综合 ajax 请求的(GET, POST, PUT, …)
  1. 语法: $.ajax(对象)对象是对本次请求的所有配置
  • $.ajax({

url: ‘’, // => 请求地址(必填)

type: ‘’, // => 请求方式(GET, POST, …) 默认是 GET

data: ‘’, // => 携带到后端的参数

dataType: ‘’, // => 期望后端返回的数据类型, 默认不解析

async: true, // => 是否异步, 默认是 true

success: function () {}, // => 成功的回调

error: function () {}, // => 失败的回调

timeout: 数字, // 单位是 ms, 超时时间(超过你写的时间没有响应, 那么就算失败)

cache: true, // 是否缓存, 默认是 true

context: 上下文, // 改变回调函数里面的 this 指向

})

  1. $.ajax 里面失败的回调
  • 不光是请求失败的时候会触发

  • jQuery 认定失败就是失败

  • 当 dataType 写成 json 的时候, jQuery 会帮我们执行 JSON.parse()

  • 当后端返回一个不是 json 格式的字符串的时候

  • 执行 JSON.parse() 就会报错

  • 也会执行失败的回调, 请求虽然成功, 但是解析失败了, 也是失败

  • JSON.parse(‘你好 世界’) -> 就会报错了

  1. $.ajax 里面是否缓存的问题
  • 这个请求要不要缓存

  • 当两次请求地址一样的时候, 就会缓存

  • 如果你写成 false, 表示不要缓存

  • jQuery 就会自动再你的请求后面加一个参数 _=时间戳

  • 第一次请求 ./server/get.php?_=11:10:01.325的时间戳

  • 第二次请求 ./server/get.php?_=11:10:02.326的时间戳

  1. $.ajax 里面的回调 this 指向问题
  • ajax 的回调里面默认 this 指向被 jQuery 加工过的 ajax 对象

  • context 的值你写的是谁, 回调函数里面的 this 就时谁

  1. $.ajax 里面的请求方式的问题
  • $.ajax 这个方法里面, type 表示请求方式

  • jQuery 还给了我们一个参数叫做 method,也表示请求方式

  • 当你写请求方式的时候

  • 可以写成 type: ‘POST’

  • 也可以写成 method: ‘POST’

  1. $.ajax 里面的接收响应的问题(2015年以后的版本才有 promise 的形式)
  • jQuery 默认把 ajax 封装成了 promsie 的形式

  • 你可以用 success 选项接收成功的回调

  • 也可以用 .then() 的方式接收响应

jQuery 的 ajax 全局钩子函数
  • 钩子: 挂在你的身上, 你的所有动作都和它有关系

  • 这些全局函数都是挂在 ajax 身上的, 这个 ajax 的每一个动作都和全局函数有关系

  • 全局的钩子函数

1.ajaxStart()

  • 会在同一个作用域下多个 ajax 的时候, 第一个 ajax 之前开始的时候触发

  • 如果有多个 ajax 他只触发一次

2.ajaxSend()

  • 每一个 ajax 再发送出去之前, 都会触发一下

  • xhr.send() 之前触发

  1. ajaxSuccess()
  • 每一个 ajax 再成功的时候触发

  • 只要有一个 ajax 成功了就会触发

  1. ajaxError()
  • 每一个 ajax 再失败的时候触发

  • 只要有一个 ajax 失败了就会触发

  1. ajaxComplete()
  • 每一个 ajax 完成的时候触发

  • 只要有一个 ajax 完成了, 不管成功还是失败, 都会触发

  1. ajaxStop()
  • 会在同一个作用域内多个 ajax 的时候, 最后一个 ajax 完成以后触发

  • 如果有多个 ajax 它只触发一次

  • 作用: 通常用来做 loading 效果

// 利用ajax钩子函数 做一个lading效果 等待页面

// 提前利用钩子函数准备 loading 效果

// 每一次发送出去的时候都要显示图片

$(window).ajaxSend(() => {

$(‘img’).show()

})

// 每一次完成的时候都要图片再隐藏起来

$(window).ajaxComplete(() => {

$(‘img’).hide()

})

// 每次点击按钮的时候都会发送一个 ajax 请求

$(‘button’).click(() => {

// 发送一个 ajax 请求

$.ajax({

url: ‘./server/get.php’,

data: { a: 100, b: 200 },

dataType: ‘json’,

success: function (res) {

console.log(‘请求成功了’)

console.log(res)

}

})

})

十五 jQuery 发送一个 jsonp 请求


  • jQuery 也提供给我们发送 jsonp 请求的方式

  • jsonp: 利用 script 标签的 src 属性来请求

  • 返回值: 是一个字符串, 字符串里面写了一个 函数名(后端传递给前端的参数)

  1. 使用 $.ajax() 这个方法
  • 必须写的:dataType: 'jsonp'
  1. 发送 jsonp 请求
  • jQuery 帮我们准备好了一个函数名, 并且以参数的形式带到了后端

  • jQuery 帮我们带过去的 callback 参数, 就是它准备好的函数名

  • 后端就应该返回一个 jQuery 准备好的函数名()

  1. 其他参数
  • jsonp: '', 你带到后端表示你函数名的那个 key, 默认值是 callback

  • cache: false, 当 dataType === ‘jsonp’ 的时候, 默认 cache 就是 false

// 发送一个 jsonp 请求

$.ajax({

url: ‘http://127.0.0.1/server/jsonp.php’,

dataType: ‘jsonp’, // 表示我要发送一个 jsonp 请求

jsonp: ‘cb’, // 表示参数里面的 cb 属性时我准备好的函数名

cache: true, // 表示缓存本次请求

success: function (res) {

console.log(res)

}

})

// jQuery 准备好的函数名

// + jQuery34108160883644340862_1582255906750

// + 变量名包含 数字 字母 下划线 $

// + function jQuery34108160883644340862_1582255906750() {}

十六 jQuery 的多库并存机制


  • 因为 jQuery 引入页面以后, 向全局添加了两个名字

  • 一个叫做 $

  • 一个叫做 jQuery

  • 万一有别的类库也起名叫做 jQuery 或者$ 怎么办

  • 当我两个库都需要使用的时候

  • 因为向全局暴露的名字一样, 就会发生冲突了

  • 谁的文件引再后面, 谁的名字就占主要位置了

  • 两个只能选择一个使用

  • jQuery 提供了一个方法

  • 我可以不占用$ 或者 jQuery 这个名字

  • noConflict()

  • 语法: $.noConflict() 或者jQuery.noConflict()

  • 当你执行了 noConflict() 以后, jQuery 就交出了$的控制权。

jQuery向全局暴露的不在有$ 这个名字了。当你执行了noConflict(true) 以后, jQuery就交出了 $jQuery 的控制权。

  • 交出去以后, 我的 jQuery 就用不了

  • noConflict() 的返回值: 就是一个新的控制权

  • 你只要接收一个返回值, 你定好的变量是什么,jQuery 的控制权就是什么

// 交出 $ 的控制权

// $.noConflict()

// 交出 $ 和 jQuery 的控制权

// $.noConflict(true)

// 改变 jQuery 的控制权

var $$ = $.noConflict(true)

十七 jQuery 的插件扩展机制


  • jQuery 还提供给我们了一个机制, 就是你可以向 jQuery 里面扩展一些方法

  • 两个方法

  1. $.extend()
  • 扩展给 jQuery本身使用的

  • 语法:

$.extend({ 你要扩展的方法名: function () {}, 你要扩展的方法名: function () {}, ... })

  • 使用的时候就是 $.你扩展的方法名()
  1. $.fn.extend() => $.extend($.fn, { 你扩展的方面名 })
  • 扩展给 jQuery 元素集合使用的

  • 语法 $.fn.extend({ 你要扩展的方法名: function () {}, 你要扩展的方法名: function () {}, ... })

  • 使用的时候就是 $(选择器).你扩展的方法名()

  • $('div').html()

// 1. 扩展给 jQuery 本身

// jQuery 本身没有操作 cookie 的方法

// $.extend({

// setCookie: function (key, value, expires) {

// // 写上设置 cookie 的方法

// if (expires) {

// var time = new Date()

// time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)

// document.cookie = ${key}=${value};expires=${time}

// } else {

// document.cookie = ${key}=${value}

// }

// },

// getCookie: function (key) {

// // …

// }

// })

// 使用我们扩展的方法去设置 cookie

// $.setCookie(‘a’, 100)

// $.setCookie(‘b’, 200, 10)

// 2. 扩展给元素集合

// 扩展一个全选的方法

// 方法以执行, 就能让 input checkbox 变成选中状态或者不选中状态

$.fn.extend({

selectAll: function (type = true) {

// type 就是你传递进来的选中或者不选中一个标志

// 你不传递的时候, 我默认是 true, 你传递了就用你传递的

// console.log(this) // 就是你调用的时候前面的哪个元素集合

this.each(function (index, item) {

// 让元素集合中的每一个 input 的 checked 属性为 true

item.checked = type

})

// return 这个元素集合, 达到一个链式编程的效果

return this

}

})

$(‘button’).click(() => {

// 让所有 input 框变成选中状态

console.log($(‘input’).selectAll().attr(‘hello’, ‘world’))

})

十八 jQuery 的拷贝对象问题


  • $.extend() 深拷贝 与 浅拷贝

  • 传递一个对象的时候, 可以做到插件扩展机制

  • 传递多个对象的时候, 可以将后面几个对象的内容复制到第一个对象里面

  • 语法:

  • $.extend(是否深拷贝, 对象1, 对象2, 对象3, ...)

  • 是否深拷贝: 默认是 false, 可以不写

  • 从 对象2 开始, 后面所有对象的内容都会被拷贝到 对象1 里面

  • 再拷贝的时候, 如果有重复的 key, 那么以写在后面的为准(后来者居上)

十九 jQuery 的插件


  • 基于 jQuery 使用的, 别人封装好的插件

  • 我们拿来使用就可以了, 前提就是要有 jQuery

  • 例子 一个叫做 jquery-validate 的插件

  • 专门用来做表单验证的

  • 你输入的内容是不是符合规则

  1. 下载

  2. 引入文件

  3. 去复制粘贴

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8881.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!