深入学习 jQuery
jQuery 的优点
- 无所不能的选择器
- 无处不在的隐式迭代
- 无与伦比的链式编程
- jQuery 号称全兼容
jQuery 选择器
- css 中的选择器，这里都可以用
- 特殊选择器
- :first 获取第一个
- :last 获取最后一个
- :eq(n) 获取索引为 n 的那一个
- :odd() 获取索引为 奇数 的那些
- :even() 获取索引为 偶数 的那些
jQuery 筛选器
- first() 筛选出元素集合里面的第一个
- last() 筛选出元素集合里面的最后一个
- eq(n) 筛选出一个集合里面索引为 n 的那个元素
- next() 筛选出元素后面一个兄弟元素
- nextAll() 筛选出元素后面所有的兄弟元素
- nextUntil(选择器) 筛选出元素后面所有的兄弟元素，直到选择器为止
- prev() 筛选出元素上一个兄弟元素
- prevAll() 筛选出元素前面所有的兄弟元素
- prevUntil(选择器) 筛选出元素前面所有兄弟元素，直到选择器为止
- parent() 筛选出元素的父元素
- parents() 筛选出元素的所有祖先元素，直到 HTML 元素为止
- parentsUntil(选择器) 筛选出元素的所有祖先元素，直到选择器为止
- children() 筛选出元素的所有子级元素
- children(选择器) 筛选出符合选择器的子级元素
- siblings() 筛选出元素的所有兄弟元素
- siblings(选择器) 筛选出所有兄弟元素中符合选择器的元素
- find(选择器) 其一：元素集合的每一个后代满足选择器的元素；其二：元素后代里面满足选择器的元素
- index() 获取元素在父级元素下的第几个元素索引值
jQuery 操作文本内容
- html() 一个读写方法
- 不传递参数时，表示获取元素内部的 超文本内容
- 传递参数时，表示你设置元素内部的 超文本内容
- text() 一个读写方法
- 不传递参数时，表示获取元素内部的 文本内容
- 传递参数时，表示设置元素内部的 文本内容
- val() 一个读写方法，用来操作表单元素的 value 值
- 不传递参数时，表示获取标签内的 value 值
- 传递参数时，表示设置便签内的 value 值
jQuery 操作元素类名
- addClass() 添加类名
- 给元素集合里面的所有元素添加类名（没有这个类名就加上，有就不加）
- removeClass() 删除类名
- 给元素集合里面的所有元素删除这个类名
- toggleClass() 切换类名
- 给集合里面的所有元素切换类名，即：元素本身有这个类名就删除，没有就添加
- hasClass() 判断元素有没有这个类名
- 返回一个布尔值
jQuery 操作元素样式
- css() 一个读写属性
- css(“样式名称”) 获取元样式，行内样式和非行内样式都可以获取到
- css(“样式名称”, “样式值”) 样式值不写单位，则默认是 px
- css({}) 可以批量操作样式
jQuery 操作元素属性
- attr() 和 removeAttr()
- attr() 读写方法
- 所有的属性都会显示在标签上（原生属性和自定义属性）
- 不管属性值设置成什么，都会变成字符串
- removeAttr() 用来删除 attr() 设置的属性
- prop() 和 removeProp()
- prop() 读写方法
- 非原生属性不会显示在标签上
- 属性值设置成什么类型就是什么类型
- removeProp() 不能删除原生属性
- data() 和 removeData()
- 专门操作 自定义属性的
- data() 也可以获取到写在标签内的 **h5 标准（data-xxx）**的自定义属性
jQuery 事件绑定
-
on() 方法，专门用来绑定事件的
// 五种传参方式 on('事件类型', '事件处理函数') on('事件类型', '事件委托', '事件处理函数') on('事件类型', '复杂数据类型', '事件处理函数') on('事件类型', '事件委托', '复杂数据类型', '事件处理函数') on({}) // 给一个元素绑定多个事件的方式，这种方式不能实现事件委托 -
off() 方法，专门用来解绑事件的
// 两种传参方式 off('事件类型') // 给该事件的所有处理函数解绑 off('事件类型', '事件处理函数名字') // 解绑指定的事件处理函数 -
trigger() 方法，专门用来触发事件的
- 不用点击就可以自动触发
jQuery 把常用事件封装成了函数
- 例如
- click()
- dblclick()
- mouseover() 等
jQuery 中唯一一个特殊的事件函数
- hover() ，表示事件悬停动作
- 语法：hover(‘鼠标移入触发的事件函数’, ’鼠标移出触发的事件函数‘)
- 当只传入一个事件处理函数时，鼠标移入移出都会触发这个事件处理函数
jQuery 操作节点
-
创建节点
- $(html 格式文本)
-
插入节点
- 插入父级关系节点
- 父级元素.append(要插入的元素) 插在最后
- 要插入的元素.appendTo(父级元素) 插在最后
- 父级元素.prepend(要插入的元素) 插在最前
- 要插入的元素.prependTo(父级元素) 插在最前
- 插入兄弟节点
- 页面元素.after(要插入的元素) 在页面元素后面插入一个元素
- 要插入的元素.insertAfter(页面元素) 把元素插在页面元素的后面
- 页面元素.before(要插入的元素) 在页面元素的前面插入一个元素
- 要插入的元素.insertBefore(页面元素) 把元素插在页面元素的前面
- 插入父级关系节点
-
删除节点
- empty() 把标签的内容清空，干掉里面所有的子节点
- remove() 把自己从页面中移除掉
-
替换节点
- 页面元素.replaceWith(替换元素)
- 替换元素.replaceAll(页面元素)
-
克隆节点
-
页面元素.clone(布尔值, 布尔值) 参数可选，默认是 false
- 第一个参数：表示是否克隆元素事件
- 第二个参数：表示是否克隆子节点的事件
注意：当第一个参数为 false 时，第二个参数就没有意义了
-
jQuery 获取元素尺寸
三套方法，四种使用方式
- width() 和 height() 获取元素内容的宽高，不包括 padding
- 浏览器可视区域的高度 $(‘window’).height()
- innerWidth() 和 innerHeight() 获取元素内容 + padding
- outWidth() 和 outHeight() 获取元素内容 + padding + border
- outWidth(true) 和 outHeight(true) 获取元素内容 + padding + border + margin
jQuery 获取元素位置
- offset()
- 不传递参数时，获取元素相对页面的位置，返回值 { left: xxx, top: xxx }
- 传递参数时，设置元素的位置，这里设置的是绝对位置，不管元素本身和页面的位置是多少
- position() 只读方法
- 获取元素相对定位父级元素的位置关系，返回值 { left: xxx, top: xxx }
jQuery 获取卷曲出去的距离
- scrollTop() 读写方法，获取页面向上卷曲的距离
- 类似原生 js ：document.documentElement.scrollTop
- scrollLeft() 读写方法，获取页面上左卷曲的距离
jQuery 的方法
-
ready() 类似于原生 js 中的 window.onload 事件
- 会在页面 HTML 结构加载完成后执行
- 简写： $(function() { })
-
each() 遍历数组的方法
- 用的比较少，因为有 隐式迭代，会自动遍历
arr.each((index, item) = { }) // 注意：第一个参数是 index
jQuery 的动画
- 标准动画
- show() 显示
- hide() 隐藏
- toggle() 切换
- 折叠动画
- slideDown() 显示
- slideUp() 隐藏
- slideToggle() 切换
- 渐隐渐现动画
- fadeIn() 显示
- fadeOut() 隐藏
- fadeToggle() 切换
- 综合动画
- animate({}, 动画时间, 动画曲线, 动画结束后的回调)
- 停止动画
- stop() 函数触发就立即停止动画，运动到哪，停在哪
- finish() 函数触发就立即停止动画，瞬间达到运动完成位置
jQuery 的 ajax 请求
-
$.get(请求地址，携带的参数，成功的回调，期望后端返回的数据格式)
- 请求地址：请求的后端 url 地址 （必填）
- 携带的参数：可以是字符串（key1=value1&key2=value2），也可以是对象 {a: 10, b: 20}
- 期望的数据格式，就是需不需要 jQuery 帮你解析响应体，默认不解析，当你传递一个 ‘json’，会自动执行 JSON.parse()
-
$.post(请求地址，携带的参数，成功的回调，期望后端返回的数据格式)
- 传参与 get 请求一样
-
$.ajax({})
- 用来发送综合 ajax 请求（get，post，put…），也可以发送 jsonp 请求
$.ajax({ url: '', // => 请求地址(必填) type: '', // => 请求方式(GET, POST, ...) 默认是 GET data: '', // => 携带到后端的参数 dataType: '', // => 期望后端返回的数据类型, 默认不解析 async: true, // => 是否异步, 默认是 true success: function () {}, // => 成功的回调 error: function () {}, // => 失败的回调 timeout: number, // 单位是 ms, 超时时间(超过你写的时间没有响应, 那么就算失败) cache: true, // 是否缓存, 默认是 true context: 上下文, // 改变回调函数里面的 this 指向 ... }) // 注意：type 也可以写成 method， 在2015以后版本有了 promise ， // 所以 也可以 .then() 的方式 来接收 成功的回调- 发送 jsonp 请求
// 发送一个 jsonp 请求 $.ajax({ url: 'http://127.0.0.1/server/jsonp.php', dataType: 'jsonp', // 表示我要发送一个 jsonp 请求 jsonp: 'cb', // 你带到后端表示你函数名的那个 key, 默认值是 callback cache: true, // 是否缓存，当 dataType === 'jsonp' 的时候, 默认 cache 就是 false success: function (res) { console.log(res) } })
jQuery 的 ajax 全局钩子函数
这些全局钩子函数都是挂在 ajax 身上的，ajax 的每一个动作都与全局钩子函数有关系
-
$(window).ajaxStart() 会在同一个作用域内多个 ajax 请求的时候，第一个 ajax 请求开始之前触发
-
$(window).ajaxSend() 每一个 ajax 请求发送出去之前触发
-
$(window).ajaxSuccess() 每一个 ajax 请求成功的时候触发
-
$(window).ajaxError() 每个 ajax 请求失败的时候触发
-
$(window).ajaxComplete() 每一个 ajax 请求完成的时候触发
-
$(window).ajaxStop() 会在同一个作用域内多个 ajax 请求的时候，最后一个 ajax 请求完成以后触发
注意：ajaxStart() 和 ajaxStop() 两个钩子函数同一作用域下只触发一次
利用：钩子函数可以做 loading 加载效果
jQuery 的多库并存机制
-
因为 jQuery 引入页面以后, 向全局添加了 $ 和 jQuery 两个变量，为了避免引入别的库，而导致变量命名冲突，jQuery 中提供了一个方法解决这个问题。
/* 语法: $.noConflict() 或者 jQuery.noConflict() => 当你执行了 noConflict() 以后, jQuery 就交出了 $ 的控制权 => jQuery 向全局暴露的不在有 $ 这个名字了 => 当你执行了 noConflict(true) 以后, jQuery 就交出了 $ 和 jQuery 的控制权 => 交出去以后, 我的 jQuery 就用不了 -> noConflict() 的返回值: 就是一个新的控制权 => 你只要接收一个返回值, 你定好的变量是什么 => jQuery 的控制权就是什么 */ // 交出 $ 的控制权 $.noConflict() // 交出 $ 和 jQuery 的控制权 $.noConflict(true) // 改变 jQuery 的控制权 var $$ = $.noConflict(true) // 控制权变成 $$
jQuery 的插件扩展机制
-
$.extend()
- 扩展个 jQuery 本身使用的
// 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) { // ... } }) -
$.fn.extend()
-
扩展给元素集合使用的
注意： . e x t e n d ( .extend( .extend(.fn, 对象) 相当于是 $.fn.extend(对象)
// 2. 扩展给元素集合 // 例如：扩展一个 input 全选的方法 // 方法以执行, 就能让 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 } }) -
jQuery 拷贝对象
-
$.extend()
/* jQuery 的拷贝对象问题 $.extend() 传递一个对象的时候, 可以做到插件扩展机制, 传递多个对象的时候, 可以将后面几个对象的内容复制到第一个对象里面 语法: $.extend(是否深拷贝, 对象1, 对象2, 对象3, ...) 是否深拷贝: 默认是 false, 可以不写, 从 对象2 开始, 后面所有对象的内容都会被拷贝到 对象1 里面, 再拷贝的时候, 如果有重复的 key, 那么以写在后面的为准(后来者居上) */
7120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
