JS-jQuery工具库 - 爱站程序员基地-爱站程序员基地

1. jQuery初识篇

1.1 jQuery是什么

```
jQuery
```
就是一个
```
js
```
库，把一些常用的方法写到一个单独的
```
js
```
文件，使用的时候直接引用这个js文件

1.2 jQuery的作用

```
jQuery
```
让
```
js
```
的开发变得更加简单
```
jQuery
```
解决了浏览器的兼容性问题

jQuery

的使用

使用

jQuery

的三个基本步骤：

引包（引入
```
jQuery
```
文件）

<script src=\"../jquery-1.12.4.js\"></script>

入口函数（写在
```
script
```
标签中）
语法一：
```
$(document).ready(匿名函数)
```
这是标准版，等页面加载之后执行
语法二：
```
$(匿名函数)
```
这是简写版，推荐用这种

<script>//1. 标准的入口函数$(document).ready(function () {})//====================================//2. 简写版入口函数$( function () {})</script>

功能实现（使用
```
jQuery
```
获取对象、调用方法，实现功能）

$(\"#btn1\").click(function(){$(\"div\").show()})

3. jQuery的$符号

1. 其实

$

就是一个函数：

$()

参数不一样，功能不一样

常用的几种情况：

```
$(function() {})
```
参数是
```
function
```
，说明是入口函数

$(document).ready(funciton(){})

将

document

转换成

jQuery

对象，也是

jQuery

的入口函数

```
$(\"#btn\")
```
根据
```
id
```
选择器获取元素，必须以
```
#
```
开头
```
$(\"div\")
```
根据
```
div
```
元素选择器获取对象
```
$(\".class\")
```
根据类选择器获取对象，必须以
```
.
```
开头
```
$(DOM对象)
```
把
```
dom
```
对象转换成
```
jQuery
```
对象

注：

$ === jQuery

也就是说能用

的地方，完全可以用

jQuery

，

仅仅是简写形式。

3. 当

jQuery

的

$

跟别的框架里面的对象

$

起冲突的时候

被覆盖(先引入
```
jQuery
```
文件，再引入别的框架文件)的时候,使用备用对象
```
jQuery
```
代替
```
$
```
;
覆盖了别的框架(别的框架先引入文件，
```
jQuery
```
后引入)的时候，释放
```
$
```
的控制权,
不影响别的框架使用，然后自己可以使用备用的
```
jQuery
```
或者

//释放`$`控制权var c =  $.noConflict() // 在释放的时候定义一个变量接收来代替\'$\'

4. jQuery对象与DOM对象之间的区别、联系、转换

4.1 什么是

DOM

对象（

js

对象）

使用
```
JavaScript
```
中的方法获取页面中的元素返回的对象就是
```
dom
```
对象。
```
dom
```
对象只可以使用
```
dom
```
对象的方法和属性

4.2 什么是

jquery

对象？

```
jquery
```
对象就是使用
```
jquery
```
的方法获取页面中的元素返回的对象就是
```
jQuery
```
对象。
```
jQuery
```
对象其实就是
```
DOM
```
对象的包装集（包装了
```
DOM
```
对象的集合（伪数组））

4.3

jQuery

对象与

DOM

对象的区别

```
jQuery
```
对象与
```
DOM
```
对象的方法不能混着用

4.4

jQuery

对象与

DOM

对象的联系

```
jQuery
```
对象与
```
DOM
```
对象可以互相转换

4.5

jQuery

对象与

DOM

对象之间的转换

// jQuery 转 DOMvar $li = $(\'li\') //这是jQuery对象// 转换方法一：$li[0] //因为jQuery对象就是一个DOM对象数组，所以可以用索引的方式转换成DOM对象//转换方法二：$li.get(0) //用jQuery定义的方法获取,参数为索引//DOM 转 jQuery$(DOM对象) //DOM对象转jquery对象

5. jQuery 的方法

5.1 操作样式的方法

设置
```
css
```
单个样式：
```
css(\"样式名\",\"样式值\")
```
设置
```
css
```
多个样式：
```
css({width:\"100px\",height:\"50px\"})
```
样式名建议用驼峰式;
获取
```
css
```
样式：
```
css(\"样式名\")
```
返回样式值为
```
String
```
类型

注：隐式迭代：设置操作的时候会给

jquery

内部所有对象设置上相同的值。获取的时候：只会返回第一个元素对应的值

5.2 操作类的方法

添加类：
```
addClass(\"类名\")
```
移除类：
```
removeClass(\"类名\")
```
判断类：
```
hasClass(\"类名\")
```
判断有没有这个类，返回
```
boolean
```
切换类：
```
toggleClass(\"类名\")
```
有则移除，无则添加，实现切换效果

5.3 操作属性的方法（标签里的属性）

设置单个属性：
```
attr(\"属性名\",\"属性值\")
```

设置多个属性：

attr({alt:\"属性值\",title:\"属性值\"})

获取属性值：
```
attr(\"属性名\")
```
移除属性：
```
removeAttr(\"属性名\")
```
操作布尔类型属性：
```
prop()
```
用法和
```
attr
```
一样

5.4 操作动画的方法

以下动画函数里面的参数有两个：执行时间、回调函数; 可都不填，回调函数，在动画执行完毕后执行

显示元素：
```
show()
```
显示加动画效果：
```
show(time)
```
隐藏元素：
```
hide()
```
隐藏加动画效果：
```
hide(time)
```
滑入（显示）：
```
slideDown(time)
```
滑出（隐藏）：
```
slideUp(time)
```
切换滑入滑出：
```
slideToggle(time)
```
如果是滑出状态就执行滑入，否则反之
淡入(显示)：
```
fadeIn(time)
```
淡出（隐藏）：
```
fadeOut(time)
```
切换淡入淡出：
```
fadeToggle(time)
```
如果是淡出状态就执行淡入，否则反之
自定义动画：
```
animate({left : 800}, 2000, \'swing\', function () {})
```
第一个参数：对象，里面可以传需要的动画样式（必填）
第二个参数：动画执行的时间(毫秒值)
第三个参数：动画执行效果
```
\"swing\"
```
（慢快慢），
```
\"linear\"
```
（匀速）;不写默认为
```
\"swing\"
```
第四个参数：为函数,动画执行完毕后执行
停止当前执行的动画：
```
stop()
```
里面有两个
```
boolean
```
参数，一般不用，第一个为是否清除动画队列，第二个是否跳转到当前动画的最终效果
让动画停滞一段时间：
```
delay(2000)
```

5.5 操作节点的方法

生成节点：
```
$(\"<p>我是p标签</p>\")
```
添加子节点到最后：
```
$(父节点).append($(子节点))
```
添加子节点到最前：
```
$(父节点).prepend($(子节点))
```
添加到父节点的最后：
```
$(子节点).appendTo($(父节点))
```
（推荐用法，适合链式编程）
添加到父节点的最前：
```
$(子节点).prependTo($(父节点))
```
（推荐用法，适合链式编程）
添加兄弟节点到后面：
```
$(节点).after($(兄弟节点))
```
添加兄弟节点到前面：
```
$(节点).before($(兄弟节点))
```
清空节点内容：
```
empty()
```
清空自己里面所有的内容，只留自己
删除节点:
```
remove()
```
删除自己里面的所有内容包括自己
克隆节点：
```
clone()
```
参数：
```
false
```
，为默认参数，复制标签及内容
参数：
```
true
```
，复制标签及内容还有事件

5.6 操作表单value值的方法

获取表单的
```
value
```
值：
```
val()
```
修改表单的
```
value
```
值：
```
val(\"内容\")
```

5.7 操作标签文本内容的方法

```
html()
```
不传参数为获取，传参为设置，可以设置标签及内容
```
text()
```
不传参数为获取，传参数为设置，只操作内容

5.8 操作标签的宽高的方法

宽：
```
width()
```
不传参为获取，传参为设置，获取的就是标签的
```
width
```
值
高：
```
height()
```
不传参为获取，传参为设置，获取的就是标签的
```
height
```
值

5.9 获取页面的卷曲值

向上卷曲值：
```
$(window).scrollTop()
```
向左卷曲值：
```
$(window).scrollLeft()
```

5.10 获取元素的left和top值

```
offset()
```
获取元素距
```
document
```
页面边缘的距离，返回
```
left
```
，
```
top
```
值
```
position()
```
获取相对于自己最近的定位的父元素边缘的值，只读属性不能传参数，返回
```
left
```
，
```
top
```
值

5.11 遍历jQuery对象的方法

用
```
for
```
循环
用
```
jQuery
```
的方法
```
each()
```

each(function(index,element){$(element).css(\"\",\"\");})//函数里第一个参数为jQurey对象里每个DOM对象的索引，第二个参数为DOM对象//在函数里面操作的时候转换成jQuery对象即可

5.12 其它方法

找索引：
```
index()
```
返回当前元素在所有兄弟元素中的索引
获取
```
DOM
```
对象：
```
get(0)
```
添加或修改文本内容：
```
text(\"内容\")
```
```
end()
```
筛选选择器会改变
```
jQuery
```
对象中的
```
DOM
```
对象，想要回复到上一次的状态，返回匹配元素之前的状态

6. jQuery选择器

6.1 什么是

jQuery

选择器

```
jQuery
```
选择器是
```
jQuery
```
提供的一组方法，让我们更加方便的获取到页面中的元素。
注意：
```
jQuery
```
选择器返回的是
```
jQuery
```
对象。
特点：
```
jQuery
```
选择器有很多，基本兼容了
```
CSS1
```
到
```
CSS3
```
所有的选择器，并且
```
jQuery
```
还添加了很多更加复杂的选择器

6.2

jQuery

的基本选择器

```
ID
```
选择器：
```
$(\'#id\')
```
获取指定ID的元素
类选择器：
```
$(\'.class\')
```
获取所有此类名元素
标签选择器：
```
$(\'div\')
```
获取所有此标签元素
并集选择器：
```
$(\'div, p, li\')
```
使用逗号分隔，只要符合条件之一就可。获取所有的
```
div、p、li
```
元素
交集选择器：
```
$(\'div.redClass\')
```
注意选择器1和选择器2之间没有空格，
```
class
```
为
```
redClass
```
的
```
div
```
元素

6.3

jQuery

的层级选择器

子代选择器：
```
$(\'ul>li\')
```
后代选择器：
```
$(\'ul li\')
```

6.4

jQuery

的过滤选择器

索引为
```
index
```
的元素
```
:eq（index）
```
用法：
```
$(\"li:eq(2)\")
```
索引为奇数的元素
```
:odd
```
用法：
```
$(\"li:odd\")
```
索引为偶数的元素
```
:even
```
用法：
```
$(\"li:even\")
```
第一个元素
```
:first
```
用法：
```
$(\"li:first\")
```
最后一个元素
```
:last
```
用法：
```
$(\"li:last\")
```
大于当前索引的元素，不包括当前索引元素
```
:gt(index)
```
用法：
```
$(\"li:gt(index) \")
```
小于当前索引的元素，不包括当前索引元素
```
:lt(index)
```
用法：
```
$(\"li:lt(index) \")
```

6.5

jQuery

的筛选选择器

找子元素
```
children(\"选择器\")
```
用法：
```
$(\"ul\").children(\"li\")
```
找到当前
```
ul
```
元素下为
```
li
```
的子元素
找兄弟元素
```
siblings(\"选择器\")
```
用法：
```
$(\"#first\").siblings(\"li\")
```
查找所有为
```
li
```
的兄弟节点，不包括自己本身
找后代元素
```
find(\"选择器\")
```
用法：
```
$(\"ul\").find(\"li\")
```
查找所有为
```
li
```
的后代节点
查找父元素
```
parent()
```
用法：
```
$(\'#first\').parent()
```
找下一个兄弟元素
```
next()
```
用法：
```
$(\'li\').next()
```
找后面所有的兄弟元素
```
nextAll()
```
用法：
```
$(\'li\').nextAll()
```
找上一个兄弟元素
```
prev()
```
用法：
```
$(\'li\').prev()
```
找前面的所有兄弟元素
```
prevAll()
```
用法：
```
$(\'li\').prevAll()
```
找出索引为x的元素
```
eq(index)
```
用法：
```
$(\'li\').eq(2)
```

jQuery

的事件

7.1. 鼠标经过事件

```
mouseover(函数)
```
此方法在鼠标经过其与其子元素的时候都会触发事件(缺点可能触发多次)
```
mouseenter(函数)
```
此方法只在鼠标经过他自己的时候才会触发事件(触发一次，推荐使用)

7.2. 鼠标离开事件

```
mouseout(函数)
```
与
```
mouseover
```
（鼠标经过事件）配对使用
```
mouseleave(函数)
```
与
```
mouseenter
```
（鼠标经过事件）配对使用

7.3 键盘事件

```
keydown()
```
按键按下事件
```
keyup()
```
按键抬起事件

7.4 注册事件

on

注册简单事件：
```
$(\"element\").on(\"click\",function())
```
给自己注册事件
注册委托事件：
```
$(\"element\").on(\"click\",\"子后代元素\",function(){})
```
给子元素或者后代元素注册委托事件，支持动态创建子元素

7.5 解绑事件

off

```
off()
```
不传参数就把当前对象的所有事件都解绑
```
off(\"click\")
```
传入什么事件参数，就解绑对应事件

7.6 事件触发

场景：在某事件中，触发别的元素事件

```
元素.事件名()
```
```
元素.trigger(\"事件名\")
```

7.7 事件对象

jQuery

事件对象就是对

js

事件对象的一个封装，处理了兼容性

对象的属性：

```
screenX
```
和
```
screenY
```
对应屏幕最左上角的值
```
clientX
```
和
```
clientY
```
距离页面左上角的位置（忽略滚动条）
```
pageX
```
和
```
pageY
```
距离页面最顶部的左上角的位置（会计算滚动条的距离）
```
event.keyCode
```
按下键盘的键的
```
code
```
码
```
event.data
```
存储绑定事件时传递的附加数据

对象的方法：

```
event.stopPropagation()
```
阻止事件冒泡行为
```
event.preventDefault()
```
阻止浏览器默认行为
```
return：false
```
写在事件处理函数的第一行，既能阻止事件冒泡，又能阻止浏览器默认行为

8. jQuery插件

概述：因为有些功能不是所有人都需要使用，为了减小

jQuery

文件的大小，所以有些功能，另外封装了插件当需要的时候另外引入插件使用

8.1 懒加载

lazyload()

插件

概述：懒加载适用于长网页，图片较多，页面滚动条到了之后再加载图片，不用一打开网页就加载全部图片，节省网页加载时间
步骤：
1. 先引入

jQuery.js

文件
2. 再引入

jquery.lazyload.js

文件
3. 使用插件：

1）.把需要懒加载的
```
img
```
标签的
```
src
```
名称改成
```
data-original
```
2）.给需要懒加载的
```
img
```
标签添加一个统一的类
3）.在
```
jQuery
```
中：
```
$(\".类名\").lazyload()
```

8.2 背景颜色渐变（动画效果）插件

概述：

jQuery

封装的

animate

方法不支持背景颜色渐变，它封装了另一个插件

jquery.color.js

步骤:
1. 先引入

jQuery.js

文件
2. 再引入

jquery.color.js

文件
3.使用

animate

方法就可以实现背景颜色渐变动画了，里面的颜色最好使用十六进制

8.3

jQuery

插件制作

概述：

jQuery

插件的实质就是给

jQuery

的原型

prototype

添加方法

插件制作：

jQuery.prototype.自定义方法名 = function(){}

或者：

$.prototype.自定义方法名 = function(){}

jQuery

里面封装了

prototype

的简写

fn

简写：

jQuery.fn.自定义方法名 = function(){}

或者：
```
$.fn.自定义方法名 = function(){}
```

1. jQuery初识篇

1.1 jQuery是什么

1.2 jQuery的作用

2. jQuery 的使用

3. jQuery的$符号

4. jQuery对象与DOM对象之间的区别、联系、转换

4.1 什么是 DOM 对象（ js 对象）

4.2 什么是 jquery 对象？

4.3 jQuery 对象与 DOM 对象的区别

4.4 jQuery 对象与 DOM 对象的联系

4.5 jQuery 对象与 DOM 对象 之间的转换

5. jQuery 的方法

5.1 操作样式的方法

5.2 操作类的方法

5.3 操作属性的方法（标签里的属性）

5.4 操作动画的方法

5.5 操作节点的方法

5.6 操作表单value值的方法

5.7 操作标签文本内容的方法

5.8 操作标签的宽高的方法

5.9 获取页面的卷曲值

5.10 获取元素的left和top值

5.11 遍历jQuery对象的方法

5.12 其它方法

6. jQuery选择器

6.1 什么是 jQuery 选择器

6.2 jQuery 的基本选择器

6.3 jQuery 的层级选择器

6.4 jQuery 的过滤选择器

6.5 jQuery 的筛选选择器

7. jQuery 的事件

7.1. 鼠标经过事件

7.2. 鼠标离开事件

7.3 键盘事件

7.4 注册事件 on

7.5 解绑事件 off

7.6 事件触发

7.7 事件对象 e

8. jQuery插件

8.1 懒加载 lazyload() 插件

8.2 背景颜色渐变（动画效果）插件

8.3 jQuery 插件制作

相关推荐

热门文章

热门标签

回顶部

2.

jQuery

的使用

4.1 什么是

DOM

对象（

js

对象）

4.2 什么是

jquery

对象？

4.3

jQuery

对象与

DOM

对象的区别

4.4

jQuery

对象与

DOM

对象的联系

4.5

jQuery

对象与

DOM

对象之间的转换

6.1 什么是

jQuery

选择器

6.2

jQuery

的基本选择器

6.3

jQuery

的层级选择器

6.4

jQuery

的过滤选择器

6.5

jQuery

的筛选选择器

7.

jQuery

的事件

7.4 注册事件

on

7.5 解绑事件

off

7.7 事件对象

e

8.1 懒加载

lazyload()

插件

8.3

jQuery

插件制作