学会jQuery 学会忘记IE

96
蓝海00
0.4 2019.06.04 20:25 字数 2304

https://lanhai1.github.io/archives/ 👈 个人博客

1⃣️、什么是jQuery

是一个封装了很多方法的外部JavaScript库

1.1 什么是JavaScript库?

把一些浏览器兼容代码或者是常用的函数
封装到JavaScript文件中
这个文件就是JavaScript库 也可以叫JavaScript函数库

1.2 jQuery的特点

  • Write Less,Do More(写的少做的多)
  • 体积小
  • 功能强大
  • 链式编程
  • 隐式迭代
  • 插件丰富
  • 开源
  • 免费

2⃣️、聊聊链式编程

对象.方法 如果返回的还是一个jQuery对象 则就可以继续点方法 这个现象就叫做链式编程

2.1 什么是断链?

jQuery对象调用方法后返回的不是当前jQuery对象了

2.2 如何处理断链?

调用 end() 方法 返回上一层状态


3⃣️、原生JavaScript和jQuery相比较

3.1 原生JavaScript的缺点

  • 不能给window添加多个onload事件 后面的会把前面的覆盖
  • 原生JavaScript的API名字都太长 太难记
  • 代码冗余
  • 原生JavaScript中的有些API存在浏览器兼容问题
  • 容错率低 前面代码出错 后面代码则不会继续执行

3.2 jQuery的优点

  • 可以写多个入口函数
  • jQuery的方法名都易记
  • 代码简洁、隐式迭代(偷偷的遍历)、链式编程
  • jQuery处理了浏览器兼容问题
  • 容错率高 前面代码出错 不会影响后面代码的执行

4⃣️、$

$ 是一个方法
$ 方法根据传递的参数不同 实现的功能也不一样(多态)

  • 如果传递的是一个匿名函数 则就是一个入口函数
  • 如果传递的是一个字符串 则就是一个选择器 或 是一个创建元素的(需要配合append()方法去追加至页面)
  • 如果传递的是一个 DOM 对象 则是将 DOM 对象转换为 jQuery 对象

5⃣️、jQuery中的this

jQuery为了方便程序员的操作 把this指向修改成了 e.target


6⃣️、jQuery入口函数和DOM入口函数的区别

6.1 jQuery入口函数写法

$(function(){
})
jQuery(function(){
})
$(document).ready(function(){
})

6.2 DOM入口函数写法

window.onload = function(){
}

6.3 jQuery入口函数和DOM入口函数之间的区别

jQuery入口函数可以写多个 并且不会被覆盖 (DOM入口函数只能写一个 并且会被覆盖)
jQuery入口函数比DOM入口函数先执行
jQuery入口函数等页面上的DOM树加载完毕后就会执行
window.onload要等待页面上所有资源加载完毕后才会执行(DOM树、外部图片、外部链接的Css/Js/icon...都加载完毕后才会执行)


7⃣️、jQuery对象 与 DOM对象

7.1 jQuery对象与DOM对象的区别

7.1.1 jQuery对象

  • 就是用jQuery选择器获取到的对象
  • 只能调用jQuery的方法 不能调用DOM的属性和方法.
  • jQuery对象其实是一个伪数组 里面存放的是DOM对象
  • jQuery对象其实是DOM对象的包装集

7.1.2 DOM对象

  • 就是用原生JavaScript获取到的对象
  • 只能调用DOM的属性和方法 不能调用jQuery的方法

7.2 jQuery对象和DOM对象互转

7.2.1 BOM对象转换jQuery对象

$(document.getElementById(“”));

7.2.2 jQuery对象转换BOM对象

document.getElementById(“”)[0]
||
jQuery对象.get(0);

8⃣️、jQuery获取元素尺寸图释

9⃣️、jQuery事件

9.1 鼠标移入移出事件

  • mouseenter
    鼠标移入
  • mouseleave
    鼠标移出

9.2 mouseenter和mouseover的区别

  • mouseover
    事件在鼠标移动到选取的元素及其子元素上时触发
  • mouseenter
    事件在鼠标移动到选取的元素上是触发

9.3 事件发展历程

9.3.1 简单事件注册

$("div").click(fn)
  • 不能同时注册多个事件
  • 不能动态注册

9.3.2 bind()注册事件

$("div").bind({
    "click":fn,
    "mouseenter":fn
})
  • 同时注册多个事件
  • 不能动态注册

9.3.3 delegate()注册事件

$("div").delegate({
    "click":fn,
    "mouseenter":fn
})
  • 同时注册多个事件
  • 支持动态注册

9.3.4 on()注册事件

9.3.4.1 on简单注册
$("div").on("click",fn)
9.3.4.2 on委托注册
$(父级元素).on("click","子级元素",fn)
  • 支持动态注册
9.3.4.3 解绑on事件
$("div").off("click",fn)

不传递参数则解绑该元素上的所有事件
注意 fn 需要写函数名

9.4 阻止事件

  • 阻止浏览器默认行为
    e.preventDefault()
  • 阻止事件冒泡
    e.stopPropagation()
  • 同时阻止浏览器默认行为和事件冒泡
    return false

1⃣️0⃣️、jQuery选择器

10.1 基本选择器

名称 用法 描述
ID选择器 $(“#id”) 获取指定ID的元素
类选择器 $(“.class”) 获取同一类class的元素
标签选择器 $(“div”) 获取同一类标签的所有元素
并集选择器 $(“div, p,li,.renClass”) 使用逗号分隔,只要符合条件之一即可
交集选择器 $(“div.renClass”) 获取class为redClass的div元素,注意,连接之间不要打空格

10.2 层级选择器

名称 用法 描述
子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $(“ul li”) 使用空格,表示后代选择器,获取ul下的所有li元素,包括孙子层级的元素等

10.3 过滤选择器(这类选择器都带冒号:)

名称 用法 描述
基数选择器 :odd $(“ul>li:odd”) 获取基数元素
偶数选择器 :even $(“ul>li:even”) 获取偶数元素
索引选择器 :eq(index) $(“ul>li:eq(2)’) 选择索引为2的元素,索引index从0开始

1⃣️2⃣️、jQuery常用方法

  • text()
    获取/设置文本
    如果是设置会覆盖标签原有的数据
  • html()
    获取/设置页面内容
    会覆盖原来的内容 如果设置的内容中有标签会被解析
  • css()
    获取/设置样式

设置单个样式

$().css()

设置多个样式

$().css({
})

用css()设置的样式都是行内样式
如果获取的jQuery对象包含的是多个DOM对象
则获取的第一个DOM对象的样式
如果设置的jQuery对象包含的是多个DOM对象
则会将所有的DOM对象都设置对应的样式(隐式迭代)

  • val()
    获取/设置表单元素的值(value)

以下操作元素的方法
参数一: 必填项 动画执行的时长 可以是毫秒 也可以是'slow' 'normal' 'fast'
参数二: 可填项 动画执行完毕后的回调函数

  • show()
    显示
  • hide()
    隐藏
  • toggle()
    切换
  • slideDown()
    滑入
  • slideUp()
    滑出
  • slideToggle()
    切换
  • fadeIn()
    淡入
  • fadeOut()
    淡出
  • fadeToggle()
    切换
  • fadeTo()
    淡入到哪里

参数一 执行动画的时长
参数二 执行到多少透明度
参数三 回调函数

  • stop()

参数1: 是否清除队列
参数2: 是否跳转到当前动画的最终效果
如果不写参数默认都是false

  • animate()
    自定义动画

参数1: 必填项 对象 做动画的属性们
参数2: 可填项 做动画的时长
参数3: 可填项 值可以是'linear'匀速 也可以是'swing'缓动 不写默认是缓动
参数4: 可填项 动画执行完毕后的回调函数

  • each()
    显式迭代

参数=>函数(index,ele){}=>(索引值,元素DOM对象)

  • clone()
    克隆节点

参数为boolean值 默认false
true => 深克隆 会克隆事件
false => 浅克隆 不会克隆事件

  • offset()
    `获取元素距离document的距离
/*获取*/
offset().top
offset().left
/*设置*/
offset({
 top:10,
 left:10
})
/*如果元素之前未设置定位 则自动设置相对定位*/
  • position()
    获取元素距离父级定位的距离
/*获取*/
position().left
position().top

只能获取不能设置

  • scrollTop()\scrollLeft()
    获取元素卷曲(滚)出去的距离
    传参就是设置 不传参就是获取

1⃣️3⃣️、操作属性的方法

  • attr()
    attr(属性名) => 获取属性值
    attr(属性名,属性值) => 设置单个属性
    attr({属性名:属性值,....}) => 设置多个属性
  • removeAttr()
    removeAttr(属性名) => 移除属性

可以设置自定义属性

移除自定义属性


1⃣️4⃣️、筛选选择器的方法

  • children()
    获取当前元素的子元素
    参数是标签名
  • find()
    获取当前元素的指定后代元素
    不传递参数则获取的是当前元素的所有后代元素
    传递参数(标签名)则获取的是当前元素的指定后代元素
  • siblings()
    获取当前元素的兄弟元素 不包括自己
    参数是标签名
  • parent()
    获取当前元素的父级元素
  • next()
    获取当前元素的下一个兄弟元素
  • nextAll()
    获取当前元素的后面所有的兄弟元素
  • prev()
    获取当前元素的上一个兄弟元素
  • prevAll()
    获取当前元素的前面所有兄弟元素
  • eq(索引)
    获取匹配索引的元素
  • prop()
    获取 prop("checked")
    设置 prop("checked",true)
    处理checked、selected、disabled这类boolean值的方法

1⃣️5⃣️、class 操作

  • addClass()
    添加类
  • removeClass()
    移除类
  • hasClass()
    判断类 => 返回boolean值
  • toggleClass()
    切换类 => 有这个类就移除 没有就添加

添加类和移除类 可以传递多个类名参数
会隐式迭代


1⃣️6⃣️、创建元素的两种方式

  • html()

直接传入字符串形式的标签
会被解析至页面
但是会覆盖原来的内容

  • $()

直接传入字符串形式的标签
需要配合append()方法追加至页面
不会覆盖原来的内容


1⃣️7⃣️、添加节点的五种方式

  • append()
    需要配合 $() 一起使用
父元素.append(子元素)
作为最后一个子元素添加
  • prepend()
父元素.prepend(子元素)
作为第一个子元素添加
  • before()
兄弟元素A.before(兄弟元素B)
把元素B插入到元素A前面
  • after()
兄弟元素A.after(兄弟元素B)
把元素B插入到元素A后面
  • appendTo()
子元素.appendTo(父元素)
作为最后一个子元素添加

1⃣️8⃣️、删除节点的三种方式

  • html("")

不推荐使用 因为这个方法只会清空内容
如果内容标签有事件 事件不会被清除 可能内存泄漏不安全

  • empty()

可以清空内容 也可以清除元素上的事件

  • remove()

需删除的元素.remove()
需要删除的元素自己调用这个方法


XMind 思维导图

日记本