jQuery从零开始(一)

1.jQuery是什么？

轻量级的工具库，类库。

Jquery可以写的很少的代码，干的很多的事情。

2.学习心态，常用的功能

jQuery只是一个工具，它的实现原理还是js。以练习为主，多看多练。

常用的功能有：选取元素、eq()选择器选取带有指定index值得元素、操作元素、操作css、事件、动画、就是的特效、ajax、dom操作

3.版本

1版本：兼容性好，但是效率低

2版本：最高兼容到ie9

3版本执行效率高，但是彻底放弃了ie，ie9以下的浏览器不兼容，并且添加了很多新的方法

要根据实际情况选择合适的版本（公司的要求）

4.安装

官网下载的jQuery文件中带有min的是经过压缩的，压缩版，项目上线的时候会使用。

通过工具下载 例如：npm 、yarn ....

也可以使用CDN静态库就不用下载jQuery文件

5.核心语法

jQuery(selector).action()   简化写法  $(selector).action()

Tip:jQuery里面提供了一个api释放$符号 $.noConflict();此时$符号不能使用，此时采用Jquery替换$使用

6.文档就绪函数

js的文档就绪函数 ：window.onload=function(){} 所有的文件加载完成才会执行文档就绪函数里面的代码，会因为别的代码出现错误，从而影响到，影响用户的使用 。一个网页里面出现多个文档就绪函数的时候，会出现覆盖的问题。后面的文档就绪函数会覆盖前面的文档就绪函数。

jQuery的文档就绪函数：$(document).ready(function(){//代码})   简化写法   $(function(){ //代码部分})   只需要等到dom结构加载完毕即可。jQuery中可以出现多个文档就绪函数，并不会出现覆盖的问题，执行的顺序就是从上到下(标准文档流的执行顺序)。

7.选择器

id  class html标签

$('选择器')

$('#d1') 选中的是id值为d1的元素

$('.d2') 选中的class类名为d2的元素

$('div') 选中的是所有的div标签元素

> 选中的是子元素，其实这些和css选择器的方法很相似，几乎就是一样的。

.css() 用来改变css的样式 例如：元素.css('height','200px');

$('*') --------选中所有的元素

$(this) --------选中当前的html元素

$(“div.d1”)-------选中叫d1的div

$(“p:first”) -------选中第一个p元素

$(“ul li:first”) ------选中ul后代li里面的第一个元素

$(“[href]”) --------选中所有带有href属性的元素

$(“a[target = '_blank']”) --------选取target属性是blank的a标签

$(“a[target != '_blank']”) --------选取target属性不是blank的a标签

$('tr:even') -------------选择偶数的tr

$('tr:odd') -----------选择奇数的tr

jq的对象不可以使用js的方法

 8.jQuery当中的常用事件

找到元素   绑定事件  添加事件处理函数

鼠标事件：click单击、dbclick双击、mouseenter鼠标划入、mouseleave鼠标移出、hover滑动事件、

键盘事件：keydown、keypress、keyup

表单事件：submit、change失焦触发、focus、blur、

文档/窗口事件：load加载事件、resize当窗口发生改变的时候、scroll当窗口滚动的时候、error当图片出现错误的时候

jQuery的事件具体的方法可以在w3c中查询到

 9.jQuery当中的效果

显示和隐藏

hide(时间，callback回调函数)  里面可以添加两个参数第一个是过渡时间(时间可以用毫秒数，也可以用“fast”“slow”)，第二个是回调函数 例如:$(selector).hide(2000,()=>{})

show(时间，callback回调函数) 用法和hide()一样

淡入淡出

fadeIn(时间，callback回调函数) 淡出、淡入 （用法和上面的hide的用法相同）

fadeOut(时间，callback回调函数)淡出

fadeToggle() 淡入淡出的取反操作 fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换（一个按钮可以解决）

fadeTo()  你想要达达到的透明度 （0-1） 三个参数 第一个参数和其他的是一样的，第二个参数数值是你想要的透明度，第三个是回调函数。(speed,qpacity不透明度，callback回调函数)

滑动效果

slideDown(speed，callback回调函数)  放下

slideUp()  收起

slideToggle()  取反(放下收起功能的集合)

动画效果

animate.css 动画包

animate不支持颜色相关的操作哦！

animate({

　　元素变化的代码

},时间,()=>{})

animate()  三个参数：{要变化的值}  speed callback回调函数

停止动画效果

stop(stopAll，goToEnd)

stopAll:值为true 或者false ，用来表示是否清除动画队列，默认值为false。

goToEnd：是否立即完成当前的动画，默认值为false。

10.获取元素的内容

* text（） 设置（可以传值）或者返回元素的文本内容 get set 合二为一了

* html（）设置或者返回元素的内容 带有标签

* val（）   和js的.value很相似 设置或者返回表单控件字段的值 例如：input 框里面的value值

* attr  （）     用于获取设置属性值（假如需要给一个标签设置多个属性值的时候，attr方法需要传入一个对象）

向网页当中添加标签（添加元素）

-----append() 在选定的元素的结尾插入指定的内容（标签的内部）

-----prepend()在被选元素内部的开头插入指定的内容（标签的内部）

-----after()在被选中元素的后面插入内容（标签的外部）

-----before()在被选中元素的前面插入内容（标签的外部）

删除元素：

remove() 删除被选元素(以及子元素) （传参数就删除参数符合的元素，不传参数就删除所有的参数）

empty() 删除被选元素的所有内容

css类的操作

addClass() 想被选元素添加一个或者多个类名

removeClass() 从被选元素中删除一个或者多个类

toggleClass()  取反  对被选元素的类操作

css() 获取或者设置被选元素的css样式