jQuery从零开始

Posted 2020-11-24 dongdong1996

1.jQuery是什么？

轻量级的工具库，类库。

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

2.学习心态

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

3.版本

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

2版本：最高兼容到ie9

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

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

4.安装

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

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

5.核心语法

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

6.文档就绪函数

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

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

7.选择器

id  class 标签

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

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

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

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

 8.jQuery当中的常用事件

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

 9.jQuery当中的效果

显示和隐藏

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

show() 用法和hide()一样

淡入淡出

fadeIn() 淡出、淡入 （用法和上面的hide的用法相同）

fadeOut 淡出

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

fadeTo()  你想要达达到的透明度 （0-1） 两个参数 第一个参数和其他的是一样的，第二个参数数值是你想要的透明度。

滑动效果

slideDown

slideUp

slideToggle