jquery
jQuery 基本介绍
为什么要学 jQuery
使用 JS 操作 DOM 的时候,会遇到以下的一些缺点:
- 获取元素的方法太少且长,麻烦
- 遍历伪数组很麻烦,通常要嵌套一大堆的 for 循环。注册的事件会覆盖
- 有兼容性问题
- 实现动画很麻烦
jQuery 初体验
【让 div 显示与设置内容】
$(document).ready(function() { |
使用 jQuery 的优点
- 获取元素的方式非常的简单,而且非常的丰富
- jQuery 的隐式迭代特性,不再需要书写 for 循环语句
- 使用 jQuery 完全不用考虑兼容性问题
- jQuery 提供了一系列动画相关的函数,使用非常方便
- 代码简单、粗暴
什么是 jQuery
jQuery 是一个快速的、轻量的、功能丰富的 js 库
jQuery 的官网 http://jquery.com/
js 库:把一些常用到的方法写到一个单独的 js 文件,使用的时候直接去引用这 js 文件就可以了。(animate.js、common.js)
版本介绍
官网下载地址:http://jquery.com/download/
jQuery 版本有很多,分为 1.x 2.x 3.x
大版本分类:
1.x 版本:能够兼容IE678浏览器(最终版本1.12.4) |
关于压缩版和未压缩版
jquery.min.js
:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,采用了代码混淆,基本没有可阅读性jquery.js
:未压缩版本,适用于学习与开发环境,源码清晰,易阅读
入口函数
入口函数的好处:
- 等待文档加载完成,不论代码是写在 body、head 中都可以正常去获取到元素
- 形成了一个沙箱,防止全局变量污染
两种写法:
// 第一种写法 |
原生 JavaScript 的入口函数:
window.onload = function() {} |
jQuery 入口函数与 js 入口函数的对比
- JavaScript 的入口函数要等到页面中所有资源(包括图片、文件等外部资源)加载完成才开始执行。jQuery 的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。所以 jQuery 的入口函数要比 js 入口函数先执行
- window.onload 存在覆盖问题;jq 的入口函数不存在覆盖问题
jQuery 使用步骤
<!-- 引包(引入js文件) --> |
jquery 中的 $
符号
$
来源于 jQuery , 是个函数(查看 jQuery 源码中最后几行代码)
// jquery 和 $ 是等价的 |
作用:根据参数的不同, 作用是不同的
参数是个函数
$(function(){})
作用是入口函数参数是个 dom 对象
$(document)
作用是 dom 转 jq参数是选择器
$('body')
作用是获取元素参数是个 html 字符串
$('<a>123</a>')
作用是创建节点
jQuery 对象与 DOM 对象
基本概念:
DOM 对象
:使用 JavaScript 中的方法获取页面中的元素返回的对象就是 Dom 对象jQuery 对象
:jquery 对象就是使用 jquery 的方法获取页面中的元素返回的对象- jQuery 对象其实就是 DOM 对象的包装集(包装了 DOM 对象的集合),是一个 伪数组
jQuery 对象与 DOM 对象的区别:
- DOM 对象与 jQuery 对象的方法不能混用。dom 对象不能使用 jq 对象的方法,jq 对象也不能使用 dom 对象的属性和方法
- DOM 对象可以和 jQuery 对象可以相互转化
- DOM 对象转换成 jQuery 对象:【联想记忆:花钱】
// 将 dom 对象作为参数传递到 $() 里面去, 那么这个整体就是个jq对象 |
- jQuery 对象转换成 DOM 对象:
// 通过 $() 来获取到的元素返回的对象就是jq对象 |
【练习:隔行变色案例】
选择器
jQuery 选择器
jQuery 选择器是 jQuery 为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery 选择器返回的是 jQuery 对象
jQuery 选择器有很多,基本兼容了 CSS1 到 CSS3 所有的选择器,并且 jQuery 还添加了很多更加复杂的选择器
css 选择器
jQuery 完全兼容 css 选择器
名称 | 用法 | 描述 |
---|---|---|
ID 选择器 | $('#id') |
获取指定 id 的元素 |
类选择器 | $('.class') |
获取同一类 class 的元素 |
标签选择器 | $('div') |
获取同一类标签的所有元素 |
并集选择器 | $('div, p, li') |
使用逗号分隔,只要符合条件之一就可 |
交集选择器 | $('div.redClass') |
获取 class 为 redClass 的 div 元素 |
子代选择器 | $('ul>li') |
使用 > 号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $('ul li') |
使用空格,代表后代选择器,获取 ul 下的所有 li 元素,包括孙子等 |
过滤选择器
这类选择器都带冒号 :
名称 | 用法 | 描述 |
---|---|---|
:eq(index) |
$('li:eq(2)') |
获取 li 元素中,选择索引号为 2 的元素,索引号 index 从 0 开始 |
:odd |
$('li:odd') |
获取 li 元素中,选择索引号为奇数的元素 |
:even |
$('li:even') |
获取 li 元素中,选择索引号为偶数的元素 |
:first |
$('li:first') |
获取 li 元素中的第一个 |
:last |
$('li:last') |
获取 li 元素中的最后一个 |
【案例:隔行变色】
筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器
主要是方法
名称 | 用法 | 描述 |
---|---|---|
children(selector) |
$('ul').children('li') |
获取当前元素的所有子元素中的 li 元素 |
find(selector) |
$('ul').find('li') |
获取当前元素中的后代元素中的 li 元素 |
siblings(selector) |
$('#first').siblings('li') |
查找兄弟节点,不包括自己本身 |
parent() |
$('#first').parent() |
查找父亲 |
parents() |
$('#first').parents('') |
查找所有祖宗(参数 指定具体祖宗) |
eq(index) |
$('li').eq(2) |
相当于$('li:eq(2)') ,index 从 0 开始 |
next() |
$('li').next() |
找下一个兄弟 |
nextAll() |
$('li').nextAll() |
找后面所有的兄弟 |
prev() |
$('li').prev() |
找上一个兄弟 |
prevAll() |
$('li').prevAll() |
找前面所有的兄弟 |
【案例:下拉菜单】
【案例:突出展示】
【案例:手风琴】
【案例:淘宝精品】
补充
mouseover
与 mouseenter
- mouseover 和 mouseoverenter 都有鼠标经过的意思,但是在注册鼠标经过事件的时候,推荐使用
mouseenter
mouseover 与 mouseout 是一对事件,当鼠标经过当前元素或者当前元素的子元素的时候,会触发【事件冒泡】。
mouseenter 与 mouseleave 是一对事件,只有当鼠标经过当前元素时,事件会触发,鼠标经过子元素,mousenter 事件是不会触发的
index 方法
index()
方法返回的是当前元素在所有兄弟元素里面的索引
区分 jQuery 与 Javascript
JavaScript 是一门编程语言,jQuery 仅仅是用 JavaScript 实现的一个 JavaScript 库,目的是简化我们的开发
jQuery 样式操作
css 操作
功能:设置或者修改样式,操作的是 style 属性
设置单个样式
// name:需要设置的样式名称 |
设置多个样式
// 参数是一个对象,对象中包含了需要设置的样式名和样式值 |
获取样式
// name: 需要获取的样式名称 |
注意:
- 设置操作的时候,如果是多个元素,那么给所有的元素设置相同的值
- 获取操作的时候,如果是多个元素,那么只会返回第一个元素的值
class 操作
- 添加样式类
// 给所有的 div 添加 one 的样式 |
- 移除样式类
// 移除 div 中 one 类名 |
- 判断是否有某个样式类
判断标准是: 只要有一个元素有指定的类名,就返回 true,所有的元素都没有该类名,就返回 false
// 判断是否有 one 的样式类 |
- 切换样式类
// 如果有,移除该类,如果没有,添加该类 |
【案例:tab 栏切换案例.html】
jQuery 属性操作
attr 操作
设置单个属性
// 第一个参数:需要设置的属性名 |
设置多个属性
// 参数是一个对象,包含了需要设置的属性名和属性值 |
获取属性
// 传需要获取的属性名称,返回对应的属性值 |
移除属性
// 参数:需要移除的属性名 |
【案例:美女相册.html】
prop 操作
在 jQuery1.6 之后,对于 checked、selected、disabled 这类 boolean 类型的属性来说,不能用 attr 方法,只能用 prop 方法
// 设置属性 |
【案例:表格全选案例.html】
jQuery 动画
jquery 提供了三组基本动画,这些动画都是标准的、有规律的效果,jquery 还提供了自定义动画的功能
三组基本动画
- 显示 (show) 与隐藏 (hide) 与切换 (slideToggle)
- 上滑 (slideUp) 与下滑 (slideDown) 与切换 (slideToggle),效果与卷帘门类似
- 淡入 (fadeIn) 与淡出 (fadeOut) 与切换 (fadeToggle)
// show() 系列 |
【案例:下拉菜单动画版.html】
【案例:京东轮播图(呼吸灯).html】
自定义动画
animate:自定义动画(只支持数值型的动画)
$(selector).animate({ params }, [speed], [easing], [callback]) |
动画队列与停止动画
在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行
// 有顺序的执行效果 |
- stop 方法
// 停止当前正在执行的动画,如果元素的动画队列里面有后续动画,后续动画会执行 |
【案例:手风琴特效】
【案例:音乐导航】
jQuery 节点操作
创建节点
// $() |
添加节点
// append |
【案例:城市选择案例】
清空节点与删除节点
empty:清空指定节点的所有元素,自身保留(清理门户)
$('div').empty() // 清空 div 的所有内容(推荐使用,会清除子元素上绑定的内容,源码) |
remove:删除节点,会把元素自身给删除掉
$('div').remove() // 删除 div 节点 |
克隆节点
clone:克隆元素节点
$('div').clone() // 返回复制的 div 新元素,(默认不显示,需要配合 append 方法) |
jQuery 特殊属性操作
val()
val 方法用于设置和获取表单元素的值,例如 input、textarea 的值
// 设置值 |
【案例:搜索框】
html() 与 text()
html 方法相当于 innerHTML,text 方法相当于 innerText
// 设置内容 |
区别:html 方法会识别 html 标签,text 方法会将内容直接当成字符串,并不会识别 html 标签
width() 与 height()
设置或者获取 内容区域 的宽度和高度
// 带参数表示设置 |
获取 内容区域 + padding 的宽度和高度
$('div').innerWidth() |
获取 内容区域 + padding + border 的宽度和高度
$('div').outerWidth() |
获取 内容区域 + padding + border + margin 的宽度和高度
// 传入参数true |
获取网页的可视区宽高
$(window).width() |
scrollTop 与 scrollLeft
设置或者获取垂直滚动条的位置
// 传参表示设置,不传参表示获取 |
返回顶部固定写法
$goTop.click(function() { |
【案例:固定菜单栏案例】
【案例:小火箭返航案例】
offset 方法与 position 方法
offset 方法获取元素距离 document 的位置,position 方法获取的是元素距离有定位的父元素的位置
// 获取元素距离 document 的位置,和父元素没有关系,返回值为对象:{left:100, top:100} |
jQuery 事件机制
JavaScript 中已经学习过了事件,但是 jQuery 对 JavaScript 事件进行了封装,增加并扩展了事件处理机制。jQuery 不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。
jQuery 事件发展历程(了解)
简单事件绑定>> bind 事件绑定>> delegate 事件绑定 >>on 事件绑定(推荐)
- 简单方式事件注册
// jq 中简单方式注册相同的事件是不会被覆盖的 |
缺点:不能同时注册多个事件,无法解绑事件
- bind 方式注册事件
// 第一个参数:事件类型,如果需要给元素注册多个事件,可以用空格隔开写上多个事件名 |
unbind 解绑事件(不用)
$('div').unbind() // 不传参数解绑所有的事件 |
缺点:不支持动态事件绑定
delegate 注册委托事件
事件是注册给父元素的,由子元素去触发该事件
原理: 事件冒泡
优点:节省内存,支持动态绑定
// 第一个参数:要绑定事件的元素 |
undelegate 解绑事件(不用)
$('div').undelegate() // 解绑所有的 delegate 事件 |
缺点:只能注册委托事件,因此注册时间需要记得方法太多了
on 注册事件(重点)
jQuery 1.7 之后,jQuery 用 on 统一了所有事件的处理方法,强烈建议使用
- on 注册简单事件
// 表示给 $('div') 绑定事件,并且由自己触发,不支持动态绑定 |
- on 注册委托事件
// 表示给 $('div') 绑定代理事件,必须是它的内部元素 span 才能触发这个事件,支持动态绑定 |
- on 注册事件的语法
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件) |
off 解绑事件
// 解绑匹配元素的所有事件,父元素子元素的所有事件都解绑了 |
触发事件
// 点击 div 触发事件 |
jQuery 事件对象
jQuery 事件对象其实就是 js 事件对象的一个封装,处理了兼容性
// screenX 和 screenY 对应屏幕最左上角的值 |
注意:js
中的 return false
只能起到阻止浏览器的默认行为,jquery
中的 return false
既能阻止事件冒泡也能阻止浏览器的默认行为
【案例:钢琴版导航(加强)】
【案例:弹幕效果】
jQuery 特点
隐式迭代
基本概念
隐式迭代:jQuery 在设置属性时会自动的遍历,因此我们不需要再遍历
- jQuery 在执行设置性操作时,会给所有的元素都设置上相同的值
- jQuery 在执行获取性操作时,只会返回第一个元素对应的值
- 如果想要给每一个元素都设置不同的值,需要手动进行遍历 jQuery 对象
each 方法
遍历 jQuery 对象集合,为每个匹配的元素执行一个函数
语法:
$(selector).each(function(index, element) { |
链式编程
链式编程的原理:设置性操作会返回一个 jQuery 对象,因此可以继续调用 jQuery 的方法
- 设置操作的时候,可以使用链式编程
- 获取操作的时候,无法使用链式编程,(因为没有返回 jq 对象)
- 链式编程不要太长,因为代码可读性差
prevObject: 返回上一次找到的jq对象 |
【案例:五角星评分案例.html】
多库共存
jQuery 使用 $
作为标示符,但是如果与其他框架中的 $
冲突时,jQuery 可以释放 $
符的控制权
// noConflict() // 返回 $ 的功能 |
jQuery 插件
插件:其实就是个 js 库,依赖于 jquery,而且在 jquery 的基础上新增一些功能
使用插件
1. 先引入jQuery文件 |
常用插件的使用
-
animate 只支持数值型的动画,色值型的不支持,这个插件就可以让 animate 做色值型的动画
// 使用方法 |
制作 jQuery 插件
制作 jQuery 插件的核心思想:给 jQuery 的原型增加方法即可。
$.fn.pluginName = function() {} |
- 制作基本的 jQuery 插件(jquery.bgc.js)
- 制作手风琴插件
jQuery 架构
看源码学习推荐看 1.7.0 版本,源码比较清晰
jq 的基本架构
沙箱 ,减少全局污染
;(function(window, undefined) { |
参数 window
的作用:
- 减少对 window 的搜索过程
- 有利于代码压缩
参数 undefined
的作用:
- 参数
undefined
的值是undefined
undefined
这个数据类型的值在 ie678 中是可以被修改的,现在有undefined
形参在这,在沙箱里面去使用undefined
的时候,就不会去引用外面被修改的undefined
的值
省去 new 操作
// 省去 new 操作,得到一个jq的实例对象 |