目录
2. $.post( ) - 专门发送 post 请求的方法
1. jQuery 发送 ajax 请求 :
+ jQuery 内的 ajax 封装模式就是按照 回调函数 和 promise 两种形式进行封装的
+ 你使用的时候, 可以按照 回调函数 的形式使用, 也可以按照 promise 的形式使用
1. ajax( )
+ 专门用来发送 ajax 请求的方法
+ 使用不需要选择到元素
+ 语法: $.ajax({ 对本次请求的配置信息 })
=> url : 必填 , 表示 请求地址
=> method : 选填, 表示 请求方式 (默认是 GET)
~> method 可以写成 type 也可以写成 method
=> data : 选填, 表示携带给后端的 参数 (默认是 空字符串)
~> 在 jquery 内, 不光可以写查询字符串格式
~> 也可以直接书写 对象 数据类型
=> async : 选填, 表示是否 异步 (默认是 true , 表示异步)
=> dataType : 选填, 表示是否 解析 后端返回的数据,
默认是 'string' 不解析, 选填 ' json ' 表示解析
=> success : 选填, 表示 成功 的回调函数
=> error : 选填, 表示 失败 的回调函数 ( jquery 认为失败就是失败 )
~> 失败可以不光是请求失败
~> 如果解析失败也会走失败 error 的回调函数
=> timeout : 选填, 默认是 true( 表示永久 ), 可以选填一个数字, 表示 超时时间 , 单位是 ms
=> cache : 选填, 表示是否 缓存 , 在发送 ajax 请求的时候默认是 true, 表示缓存
~> 选填为 false 的时候, 表示不缓存
~> 额外给你添加一个参数叫做 _ , 值是 时间戳
=> context : 选填, 表示 ajax 回调函数的 上下文 , 回调函数内的 this 指向
~> 默认是 jquery 自己封装的 ajax 对象
~> 可以自己调整, 填写任意内容
=> headers : 选填, 默认是没有, 当你需要额外设置 请求头 信息的时候
~> 可以在这个 headers 内书写
~> 注意: headers 的值是一个 对象数据类型,
把你要设置的请求头直接书写在对象内就可以了
// ( 1 ) $.ajax({ url: './ajax', // 必填 , 请求的地址 method: 'POST', // 选填 , 请求的方式(默认是'GET') data: { name: 'Jack', age: 18 },// 选填, 发送请求时携带的参数 dataType: 'json', // 选填, 默认是 string ,不解析, 'json'表示解析 success: function (res) { console.log(res) } // 选填, 成功的回调函数 }) // ( 2 )按照 promise 的形式书写 $.ajax({ url: './ajax', // 必填 , 请求的地址 method: 'POST', // 选填 , 请求的方式(默认是'GET') data: { name: 'Jack', age: 18 },// 选填, 发送请求时携带的参数 dataType: 'json' // 选填, 默认是 string ,不解析, 'json'表示解析 }).then(res => console.log(res)) // 选填, 成功的回调函数 // ( 3 ) async function fn() { const res = await $.ajax({ url: './ajax', // 必填 , 请求的地址 method: 'POST', // 选填 , 请求的方式(默认是'GET') data: { name: 'Jack', age: 18 },// 选填, 发送请求时携带的参数 dataType: 'json' // 选填, 默认是 string ,不解析, 'json'表示解析 }) console.log(res) } fn()const obj = { name: '我是自己创建的一个 obj 对象' } $.ajax({ url: './ajax', method: 'GET', data: { name: 'Jack', age: 18 }, dataType: 'json', success: function (res) { console.log('成功', this) }, error: function (xhr, err, info) { // xhr: jquery 封装的 ajax 对象 // err: 错误信息 // info: 错误信息的描述 console.log('请求失败了') console.log(xhr) console.log(err) console.log(info) }, // 表示超过 1000ms 服务器还没有给出响应, 那么直接取消请求, 认定请求失败 timeout: 1000, // 会在请求发送的时候, 额外添加一个参数 // 表示不缓存, 会给你添加一个参数, 叫做时间戳 cache: false, // 表示把 success 回调函数内的 this 指向 obj 这个对象 context: obj, // 表示你所有需要额外设置的请求头信息 headers: { authorization: 'abcdef', abc: 100 } })
1. $.get( ) - 专门发送 get 请求的方法
+ 语法: $.get(请求地址, 携带的参数, 回调函数, 是否解析)
=> 携带的参数: 可以选填, 可以是查询字符串, 也可以是 对象
+ 按照 promise 和 回调函数 两种方式封装的// 1. 发送一个 get 请求 $.get('./ajax.php', 'a=100&b=200', res => console.log(res), 'json')
2. $.post( ) - 专门发送 post 请求的方法
+ 语法: $.post(请求地址, 携带的参数, 回调函数, 是否解析)
=> 携带的参数: 可以选填, 可以是查询字符串, 也可以是 对象
+ 按照 promise 和 回调函数 两种方式封装的// 2. 发送一个 post 请求 $.post('./ajax.php', { username: 'zhangsan', password: '123456' }).then(res => console.log(res))
2. jQuery 发送 jsonp 请求 :
回顾 + jsonp 原理 :
+ 利用 script 标签能把请求回来的内容当做 js 代码执行
+ 利用 src 不受同源策略的影响
+ 要求:
=> 后端返回的是一个可以执行的合法的 js 代码
=> 后端返回的内容是一个 '函数名(数据)' 这样的字符串
=> 前端在发送请求的时候, 把准备好的函数名给到后端
使用的方法是 $.ajax( )
+ 要求: dataType 必须写成 'jsonp'
=> dataType 你写成 json 或者 string 的时候, 都是发送 ajax 请求
=> dataType 你写成 jsonp 的时候, 就不会发送 ajax 请求了,
而是 创建 script 标签 发送 jsonp 请求
+ 注意: 在配置项内有两个专门为 jsonp 请求设置的配置项
1. 会自动帮你添加一个参数叫做 callback, 表示我准备好的回调函数
=> 名字是 jquery 随机组成的
=> 名字可以修改
=> 使用 jsonpCallback 字段 : 表示函数名
2. jquery 默认添加的字段名字叫做 callback
=> 表示给后端传递回调函数名的字段
=> 可以修改的
=> 使用 jsonp 字段修改
3. cache 缓存机制
=> 当你发送 ajax 请求的时候, cache 默认值是 true, 表示缓存,
不会添加一个时间戳作为参数
=> 当你发送 jsonp 请求的时候, cache 默认值是 false, 表示不缓存,
会添加一个时间戳作为参数$.ajax({ url: './jsonp.php', // 表示发送一个 jsonp 请求 dataType: 'jsonp', // success: function (res) { console.log(res) }, jsonpCallback: 'fn', // jsonp 请求的时候回调函数的名称 jsonp: 'cb' // 表示在参数中把 回到函数的 字段名改成 cb }) function fn(res) { console.log('我是 fn 函数') console.log(res) }
// 百度搜索引擎
$.ajax({
url: 'https://www.baidu.com/sugrec',
data: {
pre: 1,
p: 3,
ie: 'utf-8',
json: 1,
prod: 'pc',
from: 'pc_web',
sugsid: '34099,33970,34004,33855,33607,26350,22159',
wd: 'a',
req: 2,
csor: 1
},
// 表示发送一个 jsonp 请求
dataType: 'jsonp',
// 表示我准备好的函数叫做 fn 函数
jsonpCallback: 'fn',
// 表示在参数中把 回到函数的 字段名改成 cb
jsonp: 'cb',
cache: true,
success (res) {
console.log(res)
}
})
3. jQuery 内的全局 ajax 生命周期函数 :
+ 也叫作 ajax 的 钩子函数
1. ajaxStart( ) - 请求开始
+ 语法: $(window).ajaxStart(function () {})
+ 时机: 同一个作用域下的第一个 ajax 发送的时候, 会触发执行
2. ajaxSend( ) - 发送之前
+ 语法: $(window).ajaxSend(function () {})
+ 时机: 会在每一个请求发送出去之前 触发执行
3. ajaxSuccess( ) - 成功之后
+ 语法: $(window).ajaxSuccess(function () {})
+ 时机: 会在每一个请求成功了之后 触发执行
4. ajaxError( ) - 失败之后
+ 语法: $(window).ajaxError(function () {})
+ 时机: 会在每一个请求失败了之后 触发执行
5. ajaxComplete( ) - 完成之后
+ 语法: $(window).ajaxComplete(function () {})
+ 时机: 会在每一个请求完成之后 触发执行, 不管成功还是失败, 都是完成
6. ajaxStop( ) - 请求结束
+ 语法: $(window).ajaxStop(function () {})
+ 时机: 同一个作用域下的最后一个 ajax 完成以后, 触发执行
// 1. ajaxStart() - 请求开始 $(window).ajaxStart(function () { console.log('第一个请求发送之前, ajax 开始') }) // 2. ajaxSend() - 发送之前 $(window).ajaxSend(function () { console.log('有一个请求发送出去了') }) // 3. ajaxSuccess() - 成功之后 $(window).ajaxSuccess(function () { console.log('有一个请求成功了^_^') }) // 4. ajaxError() - 失败之后 $(window).ajaxError(function () { console.log('有一个请求失败了') }) // 5. ajaxComplete() - 完成之后 $(window).ajaxComplete(function () { console.log('有一个请求完成') }) // 6. ajaxStop() - 请求结束 $(window).ajaxStop(function () { console.log('最后一个请求完成了') })
案例 : 利用钩子函数完成一个 loading 效果
button {
padding: 20px;
font-size: 20px;
}
div {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, .5);
display: flex;
justify-content: center;
align-items: center;
display: none;
}<button>发送请求</button>
<div class="loading">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F16f7121aedf9990f3ddd8725e99fe4d8369e06692d18-J0TUcl_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630134491&t=e1a2d516e36c3b9be945e4faebf565da" alt="">
</div>
<script src="./jquery/jquery.min.js"></script>// 1. 什么时候开始显示 loading 效果
// 只要有一个请求发送出去, 就要显示
$(window).ajaxSend(() => $('.loading').css('display', 'flex'))
// 2. 什么时候小时 loading 效果
// 只要有一个请求完成了, 就要消失
$(window).ajaxComplete(() => $('.loading').hide())
// 3. 点击按钮发送请求
//(可自己配置一个 ajax.php 文件, 需要在本地打开)
$('button').click(() => {
$.get('./ajax.php')
})可将网络切换到弱的 3G 状态下, 查看效果更佳 :
4. jQuery 的入口函数 :
+ 语法: $(window).ready(function () { ... })
+ 注意: 会在页面 DOM 结构加载完毕后执行
+ 类似于: window.onload = function () {}
+ 区别:
=> window.onload 是所有 资源 加载完毕后触发
=> jQuery 入口函数是只要 html 结构加载完毕就触发了
+ 简写:
=> jQuery 的入口函数有一个简写形式
=> $(function () { ... })<img src="https://img2.baidu.com/it/u=3228549874,2173006364&fm=26&fmt=auto&gp=0.jpg" alt=""> <script src="./jquery/jquery.js"></script>// 1. 入口函数 // 1-1. onload window.onload = function () { console.log('页面所有资源加载完毕') } // 1-2. 入口函数 $(window).ready(function () { console.log('jQuery 的入口函数') console.log('DOM 结构加载完毕了') }) // 入口函数简写 : $(function () { console.log('入口函数') console.log('DOM 结构加载完毕了') })
5. jQuery 的多库并存 :
+ 如果你引入了别的框架插件等第三方文件内容也是使用 $ 和 jQuery 这个名字
+ 那么你把 jQuery 引入在最后面
+ 通过 jQuery 的 语法来还原 $ 和 jQuery
+ jQuery 可以交出 $ 和 jQuery 的控制权给别人
1. 还原 $
+ 语法: $.noConflict( )
+ 这个代码一旦执行,就会让出 $ 这个变量的控制权
+ jQuery 不再占用 $ 这个名字了
$.noConflict( )
2. 还原 $ 和 jQuery
+ 语法: $.noConflict(true)
+ 这个代码一旦执行, 就会让出 $ 和 jQuery 的控制权
+ jQuery 不再占用 $ 和 jQuery 这两个名字了
$.noConflict(true)
3. 直接定义行的控制权
+ 直接接受 $.noConflict( ) 的 返回值 , 就是新的控制权
+ 你自己定义一个新的名字当做 jQuery 的名字
const love = $.noConflict(true)
6. jQuery 实现深浅拷贝 :
1. 深浅拷贝
+ 在复制一个数据类型的时候(特指复杂数据类型, 数组或者对象)
+ 在 JS 内, 对于 "复制" 有三个级别 :
1. 赋值
2. 浅拷贝
3. 深拷贝
1. 赋值 :
+ 简单的地址复制
+ 使用 赋值符号( = ) 进行的操作
+ 对于基本数据类型, 赋值之后两个变量之间没有任何关系
+ 对于复杂数据类型, 赋值之后两个变量操作同一个数据存储空间
// 1. 赋值 let n1 = 5 // 把 n1 的值赋值给了 n2 let n2 = n1 console.log(n1, n2) // 5 5 n2 = 10 console.log(n1, n2) // 5 10 const o1 = { name: 'Jack' } // 进行赋值操作, 把 o1 的值赋值给了 o2 // 因为 o1 这个变量内存储的是指向一个 对象数据类型 的空间地址 // 赋值的过程中, 就是把 o1 存储的地址赋值给了 o2 // 所以给到 o2 的依旧是一个 地址 // 从此以后 o1 和 o2 操作一个对象存储空间 const o2 = o1 console.log(o1, o2) // 使用任意一个变量名修改对象空间内的成员 o2.name = 'Rose' console.log(o1, o2)
2. 浅拷贝 :
=> 创建一个和原先数据结构一模一样的数据结构
+ 假如原先是个数组数据类型, 那么就新创建一个数组
+ 假如原先是个对象数据类型, 那么就新创建一个对象
=> 通过 for in 循环去遍历原先数据结构
+ 把里面的每一个数据分别在新的数据结构中复制一份
+ 对于一维数据结构有效
+ 如果是多维数据结构,没有意义 , 那么从第二维度开始, 依旧是操作同一个存储空间
// 2. 浅拷贝 const o1 = { name: 'Jack', age: 18, info: { height: 180 } } // 2-1. 创建一个和原先数据结构一模一样的结构 const o2 = {} // 2-2. 循环遍历原始数据结构 for (const key in o1) { // 2-3. 分别在新的数据结构中进行赋值 // 在进行 for in 遍历的时候 // 在这里, 当 key === info 的时候 // o1[key] 存储的也是一个地址 // o2[key] 就是把 o1[key] 存储的地址复制了一份过去 // 从此以后, o1 和 o2 虽然是两个数据空间 // 但是 o1.info 和 o2.info 操作的是一个数据空间 // o2.info = o1.info // 因为 info 内存储的是一个 地址 // 赋值以后, o2.info 和 o1.info 存储的是同一个地址 o2[key] = o1[key] } // 此时 o1 和 o2 不是一个对象存储空间 // 只是长得一模一样的两个对象存储空间 // 用任意一个区操作的时候, 另外一个不会改变 console.log(o1, o2)
// 修改 o2.name = 'Rose' o2.age = 20 console.log(o1, o2)
// 修改第二维度 info 内的数据 o2.info.height = 200 console.log(o1, o2)
知识点扩展 :
// 准确的判断所有数据类型 // 语法: Object.prototype.toString.call(你要判断的数据类型) // 返回值: 该数据类型的 类型字符串 '[object 类型]' console.log(Object.prototype.toString.call({})) // Object console.log(Object.prototype.toString.call([])) // Array console.log(Object.prototype.toString.call(123)) // Number console.log(Object.prototype.toString.call('123')) // String console.log(Object.prototype.toString.call(true)) // Boolean console.log(Object.prototype.toString.call(null)) // Null console.log(Object.prototype.toString.call(undefined))// Undefined console.log(Object.prototype.toString.call(/^$/)) // RegExp console.log(Object.prototype.toString.call(new Date()))// Date console.log(Object.prototype.toString.call(function () {}))//Function
// 如果一个数据是数组数据类型
// 那么当你访问他的 constructor 的时候, 自己没有, 就要去自己的 __proto__ 上查找
// 数组的 __proto__ 就是 Array.prototype
// Array.prototype 上面的 constructor 就是 Array// 如果一个数据是对象数据类型
// 那么当你访问他的 constructor 的时候, 自己没有, 就要去自己的 __proto__ 上查找
// 对象的 __proto__ 就是 Object.prototype
// Object.prototype 上面的 constructor 就是 Object
3. 深拷贝 :
=> 不停地重复浅拷贝的工作
=> 复制出一份完全一模一样的数据结构
=> 不管多少维度的数据结构, 都能完整独立的复制过来
=> 实现方式:
+ 使用 递归 的方式进行逐层数据结构的 遍历数据并赋值
+ 当我循环遍历的时候, 如果碰到的还是复杂数据类型
+ 那么就递归进行遍历
// 3. 深拷贝 const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180, desc: { msg: '这个人很懒, 什么都没有留下!' } }, hobby: ['吃饭', '睡觉', ['篮球', '足球']] } const o2 = {} // 3-1. 书写函数来完成(递归函数) // 使用递归的方式进行深拷贝 function deepCopy(o2, o1) { // 做: 把 o1 内的所有数据全部拷贝到 o2 内部 // console.log(o1, o2) //3-2. 直接循环遍历 o1 数据 for (let key in o1) { // console.log(key); // 判断, 如果是 对象数据类型 或者 数组数据类型, 不进行赋值 // 否则, 才进行赋值 // 如果 o1[key] 是一个对象数据类型 // o2[key] 也要创建为一个对象数据类型 // 如果 o1[key] 是一个数组数据类型 // o2[key] 也要创建为一个数组数据类型 // 如果 o1[key] 是一个基本数据类型 // o2[key] 直接赋值 if (Object.prototype.toString.call(o1[key]) === '[object Object]') { // 是对象 // console.log('o1[key] 是一个对象数据类型 : ', key) o2[key] = {} // 在这个位置, o1[key] 是一个对象数据类型 // o2[key] 也是一个数据类型 // o1[key] 里面的每一个数据复制一份到 o2[key] deepCopy(o2[key], o1[key]) } else if (o1[key].constructor === Array) { // 是数组 // console.log('o1[key] 是一个数组数据类型 : ', key) o2[key] = [] // 把 o1[key] 内部的所有数据放在 o2[key] 内 deepCopy(o2[key], o1[key]) } else { // console.log('o1[key] 是一个基本数据类型 : ', key) // 直接复制 o2[key] = o1[key] } } } // 将来使用的时候 deepCopy(o2, o1) console.log(o1, o2) // 修改数据 o2.info.desc.msg = 'hello world'
4. 深拷贝 - 方案2
+ 只能是在 对象 和 数组 数据结构中使用
+ 不能有函数
+ 利用 json 格式字符串
4-1. 把源数据转换成 json 格式字符串
4-2. 把 json 格式字符串转换回 js 数据类型
// 4. 深拷贝 - 方案2 const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180, desc: { msg: '你好 世界' } }, hobby: [ '吃饭', '睡觉' ] } console.log(o1) // 把 o1 转换成 json 格式字符串 // 现在的 jsonStr 就是基本数据类型 const jsonStr = JSON.stringify(o1) console.log(jsonStr) // 把 s 转换成一个 JS 的对象格式 const o2 = JSON.parse(jsonStr) console.log(o2) // 修改 o2.info.desc.msg = 'hello world' console.log(o1, o2)
jQuery 内有实现深浅拷贝的方法 :
+ $.extend( )const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180, desc: { msg: '这个人很懒, 什么都没有留下!', title: '你好 世界' } }, hobby: [ '吃饭', '睡觉', [ '篮球', '羽毛球', '足球' ] ] }+ 浅拷贝 :
=> 语法: $.extend(对象1, 对象2, 对象3, ...)
=> 作用: 把从 对象2 开始的所有对象内的数据进行浅拷贝到 对象1 内
=> 实现的是浅拷贝// 1. 实现浅拷贝 // 把 o1 内的所有数据进行浅拷贝到 o2 身上 let o2 = {} $.extend(o2, o1) console.log(o1, o2) // 修改一下数据 o2.name = 'Rose' // 第二维度修改 o2.info.height = 200 console.log(o1, o2)
+ 深拷贝:
=> 语法: $.extend(true, 对象1, 对象2, 对象3, ...)
=> 作用: 把从 对象2 开始的所有对象内的数据进行深拷贝到 对象1 内
=> 实现的是深拷贝// 2. 实现深拷贝 let o2 = {} $.extend(true, o2, o1) // console.log(o1, o2) // 修改 o2.name = 'Tom' o2.info.height = 250 o2.info.desc.msg = '这个人更懒' console.log(o1, o2)
7. jQuery 的插件扩展机制 :
+ jQuery 提供的一些扩展内容
+ 当你认为 jQuery 内的方法不够用的时候
+ jQuery 的方法分成两类
1. 扩展给 jQuery 自己本身的方法 :
+ 语法: $.extend({
方法名: 函数 ,
...
})
+ 扩展以后是给 jQuery 本身使用的
+ 使用: $.方法名( )
=> 不需要依赖 DOM 来执行的方法
// 1. 给 jQuery 本身扩展方法 $.extend({ a: function () { console.log('我是一个 a 方法') }, // 我是一个 a 方法 setCookie: function (key, value, expires) { if (!expires) { document.cookie = key + '=' + value return } const time = new Date() time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires) document.cookie = key + '=' + value + ';expires=' + time }, getCookie: function (key) { // ... } }) $.a() // 可以使用 给 jQuery 扩展的方法 $.setCookie('a', 100, 30)
2. 扩展给原型上的方法 :
+ 语法: $.fn.extend({
方法名: 函数 ,
...
})
+ 扩展以后是给所有元素集合使用的
+ 使用: $().方法名( )
+ 第二种书写方式:
$.extend($.fn, { 方法名: 函数, ... })
=> 需要依赖 DOM 来执行的方法
<input type="checkbox"> <input type="checkbox"> <input type="checkbox">// 2. 扩展给 jQuery 的原型上的方法 $.fn.extend({ // 我向 jquery 的原型上扩展了一个叫做 a 的方法 a: function () { console.log('你好 世界') }, checked: function (type = true) { // type 是 true 就设置为 true, type 是 false 就设置为 false // console.log('我能让元素集合内的所有内容选中') // 问题: 这里的 this 是谁 ? // 这个 checked 函数调用方式, xxx.checked() // 这个 checked 函数内的 this 是 点前面的内容 // 这里的 this 就是 jQuery 获取到的元素集合 => input 的元素集合 // 只要我遍历 this, 让内部的每一个都选中 // 在方法内循环, 就是为了 隐式迭代 this.each((index, item) => { item.checked = type }) // 只要这个函数内返回一个 jQuery 的元素集合 // 就可以达到链式编程的效果了 return this // 在方法内返回 this, 就是为了使用链式编程 } }) $('input').checked(false)$('input').checked( ).css('width',60)
报错 :
Cannot read property 'css' of undefined
// 使用的时候
// 问题: 为什么我们书写的方法没有办法实现链式编程 ?
// 因为必须是元素集合, 才可以调用 css 这个方法
// .css( ) 这个方法需要依赖 jQuery 的元素集合使用
// 元素集合.css( )
// .css() 的前面是 $( ).checked( )
// 说明这一坨不是 jQuery 的元素集合
// 问题3: $( ).checked( ) 是什么东西 ?
// 依旧是 undefined
// $('input').checked( )扩展知识=>便与你理解一下 :
function fun() { const n = 10 + 20 } // res 是 const res = fun() console.log(res) // undefinedconst obj = { fn: function () { const n = 1 + 2 } } // res 是什么 ? // undefined const res = obj.fn() console.log(res) // undefined// 定义了一个函数 function fun() { return 123 } // fun 函数名, 存储的是该函数的地址 // 你使用 fun 的时候, 就是在使用这个函数的地址, 其实就是函数体本身 console.log(fun) // ƒ fun() { return 123 } // 把 fun 存储的函数地址赋值给 r1 变量 // 从此以后 r1 就是 fun 函数 const r1 = fun console.log(r1) // ƒ fun() { return 123 } console.log(r1 === fun) // true // fun() 是把函数调用 // r2 就是把函数调用完毕, 函数内给出的返回值 const r2 = fun() console.log(r2) // 123 // 函数名() === 函数体内的 return
jQuery 简图 : ( 下 )
总结一下 : $( )
1. $('选择器') => 获取页面元素
2. $(DOM节点) => 把 DOM 节点转换成 jquery 的元素集合
3. $('html 结构字符串') => 创建节点
4. $(函数)
=> jQuery 的入口函数, 会在 DOM 结构加载完毕后执行
前端 _ jQuery 之 小白版 ( 上 ) : https://blog.csdn.net/weixin_58099903/article/details/119208398
整理不易 , 望大家点点赞多多支持一下 (#^_^#)
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
