Jquery使用Day1

jquery是一种JavaScript库，它封装了很多的函数，这些函数可以让我们更方便更快速的操作DOM
学习jQuery本质： 就是学习调用这些函数（方法）。

1. jQuery 的下载

官网地址： https://jquery.com/
　1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

2.2 jQuery 的使用步骤

1. 引入 jQuery 文件
2. 使用即可
   

2.3 jQuery 的入口函数

$(function () 
{        ...  // 此处是页面 DOM 加载完成的入口  }) ;   

１．等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 js 中的 DOMContentLoaded。
3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
4.

2.4 jQuery 的顶级对象 $

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法

2.5 jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

2.6DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装,jquery获取元素的方法是比较简单的，但是不能使用video的play属性，所以我们需要去粕

1. DOM 对象转换为 jQuery 对象： $(DOM对象)
   $(‘div’) 或 $(myDiv)
2. jQuery 对象转换为 DOM 对象
   $(‘div’) [index] index 是索引号
   

2.7jquery常用的API

jquery选择器一般选择器

$(“选择器”)   //  里面选择器直接写 CSS 选择器即可，但是要加引号  

隐式迭代（重要）
给所有匹配到的元素进行内部遍历，给每一个元素添加相应的方法，简化方法。不用再像原生js那样进行遍历，一个一个的添加样式之类的方法。

jquery选择器筛选选择器

多个里面选1个或几个

重点记住： parent() children() find() siblings() eq()
1.这些都是一些方法或则是一些函数，一定要记得加小括号。
2.是站在父子兄的角度来查找的。

jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”); 
$(this).siblings(). css(“color”,””); 

淘宝精品展示案例

核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
② 需要得到当前小li 的索引号，就可以显示对应索引号的图片
③ jQuery 得到当前元素索引号 $(this).index()
④ 中间对应的图片，可以通过 eq(index) 方法去选择
⑤ 显示元素 show() 隐藏元素 hide()

链式编程

$('.content div').eq(index).show().siblings('div').hide();

3. jQuery 样式操作

2.1 操作 css 方法 ，适合改样式比较少的情况

1. 参数只写属性名，则是返回属性值

$(this).css(''color''); 

2.2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red''); 
$(this).css('width','400px');
$(this).css('width',400);

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，一组样式之间用逗号隔开 属性可以不用加引号， 最好加上，方便记忆，不易混淆

$(this).css({ 
"color":"white",
"fontSize":"20px"
//注意用驼峰命名法font-size是错的
}); 

2.2 设置类样式方法 ,如果修改的样式比较多，建议用这种方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
1.添加类

$(“div”).addClass(''current''); 

2.删除类

$(“div”).removeClass(''current''); 

3.切换类

$(“div”).toggleClass(''current''); 

tab栏案例切换

4. jQuery 效果

show([speed,[easing],[fn]]) 

（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
其他函数都是一样参数，一般不加后面的参数。

事件切换

hover([over,]out) 

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它

动画队列及其停止排队方法

stop() 

(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

修改透明度

fadeTo([[speed],opacity,[easing],[fn]]) 

（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。时间必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

案例，淡入淡出

自定义动画 animate

animate(params,[speed],[easing],[fn]) 
（1）params: 想要更改的样式属性，以对象形式传递，`必须写`。 属性名可以不用带引号， 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。 

案例：王者荣耀手风琴效果