JavaScript库
仓库 : 可以把很多东西放到这个仓库里面 , 找东西只需要到仓库里面查找到就可以了
JavaScript库
简单理解 : 就是一个JS文件 , 里面对我们原生js代码进行了封装 , 存放到里面 , 这样我们就可以快速高效的使用这些封装好的功能了
比如 : jQuery , 就是为了快速方便的操作DOM, 里面基本都是函数 ( 方法 )
从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、 hide、show，比如获取元素等。
jQuery 的概念
jquery 是一个快速 , 简介的JavaScript库 , 其设计的宗旨是 " write Less , Do More" , 即倡导写更少的代码 , 做更多的事情
jQuery 的优点
优点 :
1, 轻量级 . 核心文件才十几kb, 不会影响页面加载速度
2, 跨浏览器兼容 , 基本兼容了现在主流的浏览器
3, 链式编程 , 隐式迭代
4, 对事件 , 样式 , 动画支持 , 大大简化了DOM操作
5, 支持插件扩展开发 , 有着丰富的第三方的插件 , 列 :
树形菜单 . 日期控件 , 轮播图等
6, 免费 , 开源
jQuery 的下载
官网地址： jQuery
版本 :
1x ：兼容 IE 678 等低版本浏览器，官网不再更新
2x ：不兼容 IE 678 等低版本浏览器，官网不再更新
3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本
各个版本的下载：jQuery CDN
jQuery的使用步骤
1, 引入jQuery文件
2 , 使用jQuery语法即可
jQuery的入口函数
- $( function ( ) {
-------此处是页面DOM加载完成的入口
} );
- $ ( document ) . ready ( function ( ) {
------- 此处是页面DOM加载完成的入口
} );
1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 js 中的 DOMContentLoaded。
3. 不同于原生 js 中的 load 事件是等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。
4. 更推荐使用第一种方式。
jQuery 的顶级对象$
1, $ 是jQuery的别称 , 在代码中可以使用jQuery代替$ , 但一般为了方便 , 通常都直接使用$
2, $ 是jQuery的顶级对象 , 相当于原生JavaScript中的window . 把元素利用$包装成jQuery对象 , 就可以调用jQuery的方法
jQuery对象和DOM对象转换
1, 用原生JS获取来的对象就是DOM对象
2 , jQuery方法获取来的元素就是jQuery对象
3 , jQuery对象本质是 : 利用$ 对 DOM 对象包装后产生的对象 ( 伪数组形式存储)
注意 :
只有jQuery对象才能使用jQuery方法 , DOM对象则使用原生的JavaScript方法
DOM对象与jQuery对象之间是可以相互转换的
因为原生js比jQuery更大
jQuery选择器
基础选择器
$ ( "选择器" ) ---里面选择器直接写 css 选择器即可, 但是要加引号
- 名称 -------------------用法---------------描述
- ID选择器-------------$ ( " #id" )---------获取指定id元素
- 全选选择器---------$ ( " * " )------------匹配所有的元素
- 类选择器 ------------$( " . class " )------获取同一类class的元素
- 标签选择器----------$ ( " div " )---------获取同一类的标签的所有元素
- 并集选择器 --------$ ( "div , p , li " )-----获取多个元素
- 交集选择器 ---------$ ( " li . current " )-----交集元素
层级选择器
层级选择器最常用的两个分别为 , 后代选择器 和 子代选择器
--名称 -------------用法---------描述
- 自带选择器-----$ ( " ul > li " ); ----使用>号, 获取亲儿子层级的元素 , 注意, 并不会获取孙子层级的元素
- 后代选择器器------$ ( "ul li " );---使用空格 , 代表后代选择器 , 获取ul下的所有li元素, 包括孙子等
筛选选择器
语法------用法-------------描述
- :first-----$( ' li : first ' )---获取第一个li元素
- :last ----$ ( ' li : last ' )---获取最后一个li元素
- :eq ( index ) --$ ( ' li : eq ( 2 ) ' ) --获取到的li元素中, 选择索引号为2的元素, ----------------------------------索引号index从0开始
- :odd------$ ( ' li : odd ' ) ------获取到的li元素中, 选择索引号为奇数的元素
- :even-----$ ( ' li : even ' )-----获取到的li元素中, 选择索引号为偶数的元素
隐式迭代（重要）
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
1.3 隐式迭代（重要）
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，
而不用我们再进行循环，简化我们的操作， 方便我们调用。
$
通过一个节点找另外一个节点
语法------------------用法--------------------------------------说明----
- parent ( )--$ ( " li " ) . parent ( ); ---------查找父级
- children ( selector ) ----$ ( " ul " ) . children ( li );----查找儿子, 最亲的儿子
- siblings ( selector )-----$ ( ".first" ) . siblings ('' li '' );-----除了自己本身以外的所有亲兄弟
- nextAll ( [ expr ] )---$ ( " .first " ) . nextAll ( );----查找当前元素之后的所有的同辈元素
- prevtAll ( [ expr ] )---$ ( " .first " ) . prevtAll ( );-----查找当前元素之前的所有的同辈元素
- hasClass ( class )-----$ ( " div" ) . hasClass ("protected" );---检查当前的元素是否含有某个特定的类, 如果有, 则返回true
- eq ( index )---- $ ( " li " ) . eq ( 2 );----相当于 $ ( " li : eq ( 2 )" ) , index从0 开始
jQuery设置样式
$
jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式
$
链式编程
链式编程是为了节省代码量，看起来更优雅
$
jQuery 样式操作
jQuery中常用的样式操作有两种：css() 和 设置类样式方法
方法1: 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名，则是返回属性值
var
// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是 数字可以不用跟单位和引号
$
// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以 不用加引号
$
注意：css() 多用于样式少时操作，多了则不太方便。
方法2: 设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
常用的三种设置类样式方法：
//1, 添加类 ---
注意：
1. 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定 类进行操作，不影响原先的类名。
jQuery效果
1.5. jQuery 效果
jQuery 给我们封装了很多动画效果，为常见的如下：
//显示隐藏：
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行,
jQuery为我们提供另一个方法，可以停止动画排队：stop()
显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;
1, 显示语法规范 :
show
2 , 显示参数
1, 参数都可以省略 , 无动画直接显示
2, speed : 三种预定速度之一的字符串 ( " slow ", " normal " , " fast "), 或表示动画时长的毫秒数值 (如 : 1000)
3, easing : ( Optional ) 用来指定切换效果 , 默认是 " swing ", 可用参数 " linear ";
4 , fn : 回调函数 , 在动画完成是执行的函数 , 每个元素执行一次
隐藏语法规范
hide
2 隐藏参数 :
1, 参数都可以省略 , 无动画直接显示
2, speed : 三种预定速度之一的字符串 ( " slow ", " normal " , " fast "), 或表示动画时长的毫秒数值 (如 : 1000)
3, easing : ( Optional ) 用来指定切换效果 , 默认是 " swing ", 可用参数 " linear ";
4 , fn : 回调函数 , 在动画完成是执行的函数 , 每个元素执行一次
切换语法规范
toggle
2 隐藏参数 :
1, 参数都可以省略 , 无动画直接显示
2, speed : 三种预定速度之一的字符串 ( " slow ", " normal " , " fast "), 或表示动画时长的毫秒数值 (如 : 1000)
3, easing : ( Optional ) 用来指定切换效果 , 默认是 " swing ", 可用参数 " linear ";
4 , fn : 回调函数 , 在动画完成是执行的函数 , 每个元素执行一次
平时一般不带参数 , 直接显示隐藏即可
滑入滑出
滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle()
1 下滑效果语法规范
slideDown
2, 下滑效果参数
同上
上滑效果语法规范
slideUp
效果参数 --同上
淡入淡出
fadeIn -同上淡入
fadeOut- 淡出同上
fadeToggle-淡入淡出切换-同上
自定义动画 animate
animate
参数 :
（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
jQuery 属性操作
- 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a> 元素里面的 href ，比如 <input> 元素里面的type
//1, 获取属性语法----
- 设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。
1. 获取属性语法
attr
设置属性语法
attr
改方法也可以获取H5 自定义属性
数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除
1. 附加数据语法
data
获取数据语法
date(''name'') // 向被选元素获取数据
同时，还可以读取HTML5 自定义属性 data-index ，得到的是数字型
jQuery 内容文本值
主要针对元素的内容还有表单的值操作。
1. 普通元素内容 html()（ 相当于原生inner HTML)
html
2. 普通元素文本内容 text() (相当与原生 innerText)
text
3. 表单的值 val()（ 相当于原生value)
val
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
- 语法1：
$
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。each 每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
- 语法2
$
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
创建元素
$
添加元素
1. 内部添加
element
2. 外部添加
element
① 内部添加元素，生成之后，它们是父子关系。
② 外部添加元素，生成之后，他们是兄弟关系。
删除元素
element
① remove 删除元素本身。
② empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过html 还可以设置内容。
jQuery 尺寸
以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位。
jQuery 位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
1. offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
② 该方法有2个属性left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
③ 可以设置元素的偏移：offset({ top: 10, left: 30 });
2. position() 获取元素偏移
① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
② 该方法有2个属性left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
③ 该方法只能获取。
3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
① scrollTop() 方法设置或返回被选元素被卷去的头部。
② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
