1.jQuery 介绍

1.1、什么是jQuery？

JavaScript库：封装了很多js代码

2.为什么要学习jQuery？

 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

3.在那些情况下使用jQuery？

3.1 中大型网站开发

3.2是一些前端框架的基础，比如EasyUl,Bootstra

 4.怎么使用jQuery？

 4.1首先我们要先下载jQuery库

 4.2我们将下载好的jQuery库更改后缀名改成js在把这个文件导入项目js这个文件夹里面

4.3使用：使用script标签中的src属性

要单独写一个script来接收jquery

5.选择器

5.1基本选择器

 1 . ID选择器：#ID  2 . 类选择器；.class  3 . 元素选择器：element  4 . 通配符：*

5.2层级选择器

查询子元素/子代选择器：>

查找所有元素/后代选择器：空格

5.3过滤选择器

方法作用first获取第一个元素last获取最一个元素even获取偶数下标的元素odd获取奇数下标的元素gt（大于）获取大于多少下标的元素lt （小于）获取小于多少下标的元素

5.4表单选择器         1.参考jQuery文档         2.获取选择单选框的值         3.获取选择多选框的值         4.获取选择下拉值

2、jQuery工具、属性和css

1.工具

方法作用$.each()遍历数组、对象、对象数组中的数据$.trim()去除字符串两边的空格$.type(obj)得到数据的类型$.isArray(obj)判断是否是数组$.isFunction(obj)判断是否是函数$.parseJSON(obj)解析json字符串转换为js对象/数组

2.属性

方法作用attr()获取某个标签属性的值，或设置某个标签属性的值removeAttr()删除某个标签属性addClass()给某个标签添加class属性值removeClass()删除某个标签class属性值prop()和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选html()获取某一个标签体内容(注意：该标签体中可以包含子标签)text()获取某一个标签体内容(注意：该标签体不能包含子标签)val()主要用户获取/设置输入框的值

3.css

3.1.css():设置标签的css样式

 1. 获取样式值：css(“样式名”)  2. 设置单个样式：css(“样式名”,”样式值")  3.设置多个样式：css(“样式名”:“样式值”,“样式名”:”样式值”})

3.2.位置

1.offset():相对整个大容器的相对位置 2.position():相对父容器的相对位置 3.scrollXX:scrollTop():滚动条到顶部距离

3.3.尺寸

内容尺寸

1.width():容器宽 2.height():容器高

内部尺寸 3.innerWidth():width+padding 4.innerHeight():height+padding

外部尺寸(注意：参数为true,在加上margin) 5.outerWidth():width+padding+border 6.outerHeight():height+padding+border

三、jQuery的筛选和文档处理

1、筛选(分为过滤和查找)

1.1过滤

方法作用first()获取匹配的第一个元素last()获得匹配的最后一个元素eq(N)获取匹配的第N或-N个元素filter(selector)筛选出与指定表达式匹配的元素集合has(selector)筛选出包含特定特点的元素的集合not(selector)筛选出不包含特定特点的元素的集合

1.2查找

2.文档处理

2.1、增

内部插入

方法作用append()将内容添加到指定的元素后面appendTo()和append()颠倒prepend()将内容添加到指定元素前面prependTo()和prepend()颠倒

外部插入

方法作用after()在匹配元素之后插入内容before()在匹配元素之前插入内容

2.2、删

方法作用empty()删除匹配的元素集合中所有的子节点（不包含匹配的元素）remove()删除匹配的元素集合中所有的子节点（包含匹配的元素）

2.3、改

replaceWith()：将所有匹配的元素替换成指定的内容

四、jQuery事件和动画效果

1.事件

加载Dom两种方式

1.1.window.onload方式

window.onload方式：执行时间，整个网页中的所有内容（包括图片）加载完成后，才会执行编写个数为1个

 代码示例:

1.2 jQuery方式

执行时间，网页结构绘制完成后，执行编写个数为多个

代码示例：

两个都有的情况下执行顺序：

jQuery3.0：window.onload比jQuery先执行

jQuery1.0和2.0：jQuery比window.onload先执行 

2.绑定事件两种方式

元素.on("事件名","function(){}")元素.事件名(function(){})

3.合成事件/事件切换

3.1hover()：鼠标悬停合成事件

   鼠标移上去第一个函数   鼠标移除第二个函数

3.2toggle()：鼠标点击合成事件，点击元素可以控制元素的显示和隐藏

4.事件传播（事件冒泡）

传播：小——>中——>大阻止传播：事件后面加上return false

5.事件坐标

 offsetX:当前元素左上角 clientX:窗口左上角 pageX:网页左上角

6.移除事件

元素.unbind("事件名")注意1：一般情况下，不会使用unbind，推荐使用变量控制事件注意2：某个元素只使用一次的事件可以使用one()

2.动画效果

1、基本

显示：show(Time)，Time表示显示时间，毫秒

隐藏：hide(Time)，Time表示显示时间，毫秒

切换：toggle(Time)，相当于上面两个合在一起

2、滑动

方法作用slideUp(Time)动画收缩(向上滑动)-->隐藏slideDown(Time)动画展开(向下滑动)-->显示slideToggle(Time)动画切换

3、淡入淡出（透明度）

方法作用fadeIn(Time)淡入（透明度减少）fadeOut(Time)淡出（透明度增大）fadeToggle(Time)切换

4、自定义动画

元素：animate({属性:属性值},Time)

缩放：width，height

移动：top、left

移动(本元素),距离：top="+="

                                left="-="

好文阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：