个人笔记，jQuery部分

word转md，个人备份

1.jQuery简介

jQuery是一种JS库，即library，是一个封装好的特定的集合，封装了很多预先定义好的函数里，可以方便快捷的操作DOM。

jQuery封装了js常用的功能代码，优化了dom操作，事件处理，动画设计和Ajax交互

2.jQuery的基本使用

官方网址：jquery.com

jQ等待页面dom结构加载完毕，不必等待所有外部资源再执行js代码：

$(document).ready(function(){

函数

})

或者

$(function(){
	函数体
})

例如：

$(‘div’).hide 隐藏标签

$符号是jQ的别称，代码中可以使用jQuery代替$

$符号是jQ的顶级对象，相当于原生js的window，利用$包裹jQ代码就可以调用jQ内的方法

1.用jQ获取对象

原生js使用querySelector获取dom对象，与jQ对象不同

用jQ的方式获取就称为jQ对象（伪数组）：

$(‘标签名’)

jQ对象只能用jQ方法，dom对象只能用原生属性和方法

相互转换的方式：

dom对象转jQ：

直接$（dom对象） 不需要引号

jQ转dom：

jQ对象[索引号]

jQ对象.get（索引号）

2.jQ的常用api

1.jq选择器

$（‘选择器’），this可以使用$(this)

选择器和css基本相同，但是都是选取符合条件的所有元素，例如：

#id — id选择器

• — 全选选择器

.class — 类选择器

li — 标签选择器

div，p，li — 选取多个元素

li.current — 交际元素

ul li — 后代选择器

ul >li — 子代选择器

jQ筛选选择器：

：first 第一个元素
：last 最后一个元素
：eq（索引号） 选择索引号的元素 从0开始，使用变量要‘+变量+’
：odd 奇数元素
：even 偶数元素
：checked 选择被选中的表单

jQ筛选方法：

.parent（） — 查找父级
.parents（‘选择器’） —查找指定祖先元素，没有选择器选所有祖先
.children（‘选择器’） — 找最近一级亲儿子
.find（‘选择器’） — 后代选择器
.sibling（‘选择器’） — 查找兄弟节点，不包括自己本身
.nextAll（） — 查找当前元素之后的所有同辈元素
.prevAll（） — 查找当前元素之前的所有同辈元素
.hasClass（‘类名’） — 查找当前元素是否含有某个特定的类，如果有返回true
.eq（索引号），相当于 选择器：eq（索引号），但是可以使用变量

2.jq样式操作

jQ对象.css（‘属性’，‘样式’）
样式如果是值，可以不跟单位和引号

修改多个可以使用

jQ对象.css{
	属性：‘样式’，
	属性：‘样式’
}

注意-要用驼峰命名法代替

使用隐式迭代修改所有符合条件的样式

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加这个css

也可以通过设置类的方式操作，先把需要的属性写在css中写一个类名

添加类

jQ对象.addClass（类名）

删除类

jQ对象.removeClass（类名）

切换类（有就加，没有就减）

jQ对象.toggleClass（类名）

3.jq效果

显示/隐藏：

show/hide（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

toggle（切换隐藏显示）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

一般情况不加参数

滑动：

slideDown（下拉滑动）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

slideUp（上拉滑动）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

slideToggle（切换上下）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

淡入淡出：

fadeIn（淡入）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

fadeOut（淡出）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

fadeToggle（淡入淡出切换）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

fadeTo（利用渐进的方式调整到指定透明度）（
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
透明度 0-1之间，
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

自定义动画：

animate（
想要更改的样式属性（属性名可以不带引号，有-驼峰命名法）
（速度（默认给的是normal可以改成slow/fast或者毫秒数值），
切换效果（默认是swing满快慢可以改成linear匀速），
回调函数（完全结束后调用））
）

事件切换：

hover中如果只写一个函数，鼠标进出都会触发
hover（(鼠标移动到上面触发的函数),鼠标移出元素触发的函数）

1.动画或者效果队列

动画或者效果一旦触发就会执行

可以使用

stop（）

清除上一次的动画效果，注意写在动作的前面

例如：

jQ对象.stop（）.slideToggle（）

先停止，再执行滑动

4.jq属性

设置或获取元素固有属性值（例如a标签内有href属性）：

prop（‘属性’，（‘属性值’））

元素的自定义属性获取：

attr（‘属性’，（‘属性值’））

在指定的元素上存储数据：

data（‘数据名’，‘数据值’）

不会修改DOM元素结构，一旦页面刷新，之前存放的数据全部移除

data还可以获取h5的固定属性，也就是data-xx = 值

data（‘xx’，‘数据值’）

5.jq文本属性

获得普通元素内容，相当于innerHTML：

html（（‘内容’））

获得元素文本内容，相当于innertext：

text（（‘内容’））

获取元素表单值，相当于value：

val（（‘内容’））

有内容就是写入，没有就是读取

截取字符串：

substr（开始索引号，从0开始，包括开始）

保留小数：

toFixed（小数位数）

6.jq元素操作

遍历元素：

jQ元素.each（function（索引号，dom对象）{
dom对象没有jQ方法，需要转换
}）

或者

$.each（对象，function（索引号，dom对象）{
dom对象没有jQ方法，需要转换
}））

创建元素：

$(‘<标签名>内容<标签名>’)

添加元素：

内部添加（父子）：

jQ元素.append（要添加的元素）

添加到元素内部的最后面

jQ元素.prepend（要添加的元素）

添加到元素内部的最前面

外部添加（兄弟）：

jQ元素.after（要添加的元素）

添加到元素后面

jQ元素.before（要添加的元素）

添加到元素前面

删除元素：

jQ元素.remove（）

删除元素本身

jQ元素.empty（）

删除元素内的元素

jQ元素.html（‘’）

内容清空

7.jq尺寸位置

获取宽/高：

width/height（（内容））---- 只获取宽高，返回数字型，有内容写入可不写单位

innerWidth/innerHeight（）---- 获取宽高包括padding

outerWidth/outerHeight（）---- 获取宽高包括padding border

outerWidth/outerHeight（true）---- 获取宽高包括padding border和margin

获取位置：

offset（{left：；top：；}） ---- 返回距离document的位置，返回对象，里面属性有left和top，写入需要写入对象，同返回的格式，和父盒子没关系

position（） ---- 得到带有定位的父级的距离，只能获取不能设置

获取被卷去的头部/左右的大小：

scrollTop/Left（（内容）） ---- 返回数字型，写入就是浏览器定位

animate内也有scrollTop属性，但是要用在body，html中

8.jq链式编程

例如：

$(this).css('color','red').siblings().hide

使用链式编程注意给哪个对象添加

3.jQ事件注册

jQ对象.事件（function（）{
事件处理函数
}）

可以使用on（）一次绑定多个事件

jQ对象.on（{
事件1：function（）{
事件处理函数
}
事件2：function（）{
事件处理函数
}
}）

还可以多个事件绑定同一个函数：

jQ对象.on（‘事件1 事件2’，function（）{事件处理函数}）

on还可以达成事件委托的效果

jQ对象.on（‘事件’，‘需要的子代的选择器’，function（）{事件处理函数}）

只有on可以给动态创建的元素添加事件

如果需要解绑可以使用：

.off（（事件），（需要的子代的选择器））事件

如果不填入则解绑元素所有事件

填入事件则清除某一事件

填入事件和子代选择器则清除事件委托

如果需要绑定只触发一次的事件：

.one(‘事件’，函数)

自动触发事件：

元素.事件（）

元素.trigger（‘事件’）

元素.triggerHandler（‘事件’） 不会触发元素的默认行为

事件被触发，获取产生事件的事件对象：

事件.on（‘事件’，（选择器），function（事件对象）{
函数体
}）

事件对象的操作：

阻止默认行为：事件对象.preventDefault（）或者return false

阻止冒泡：事件对象.stopPropagation

4.jQ的其他方法

1.jQ拷贝对象

$.extend((ture为深拷贝，false或者不填为浅),拷贝目标,被拷贝对象，（对象2…）)

2.多库共存

如果其他Js库也使用$符号作为标识符，需要让多个Js库文件同时存在，就要用到多库共存

jQ的解决方案：使用jQuery作为标识符

例如：jQuery（‘div’）

或者给jQ变量规定新名称：

let xxx = $.noConflict（）
xxx（‘div’）

3.jQ插件

jQ功能是有限的，插件是基于jQ完成的，达成更复杂的效果

常用网站：

jq22.com
htmleaf.com

jQ插件使用方式：

引入文件

复制相关html，css，js结构

图片懒加载：

注意图片懒加载的js引入一定要写在dom元素结构后面

全屏滚动：

jQuery全屏滚动插件fullPage.js演示_dowebok

1.bootstrap JS插件

bootstrap框架也是依赖jQ开发的