前端自学学习笔记——JS(jQuery)

前端自学学习笔记——JS(jQuery)

第一章 jQuery简介

1. jQuery是一个js库，对原生js的封装，内部是用js实现的，是对DOM操作的封装。
2. 下载网址：http://jquery.com/

第二章 基本使用

2.1 入口函数

入口函数等DOM结构渲染完毕即可执行内部代码，相当于原生js中的DOMContentLoaded。

语法：

① $(document).ready(function(){})

② $(function(){})

2.2 顶级对象

1. $ 是jQuery的别称，在代码中jQuery可以代替 $
2. $ 是jQuery的顶级对象，相当于原生js中的window。把元素利用$包装成jQuery对象就可以调用Jquery方法，是用伪数组存储的。

2.3 DOM对象和jQuery对象

区别：

DOM对象用原生js获取的对象；

jQuery对象使用jQuery方法获取的对象（通过$把DOM元素包装）；

jQuery对象只能使用jQuery方法，DOM对象使用原生js属性方法。

相互转换：

DOM转jQuery：$(DOM对象)

jQuery转DOM：$(DOM对象)[index] 或者 $(DOM).get(index)

第三章 jQuery选择器

jQuery选择器用于获取元素。

3.1 jQuery基础选择器

$(“选择器”) 用于获取对应选择器的元素

3.2 jQuery层级选择器

子代选择器：$(“选择器 > 选择器”) 用于获取子代选择器

后代选择器：$(“选择器 选择器”) 用于获取后代选择器

3.3 隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程（同一元素做相同操作）。即给匹配到的所有元素进行遍历循环，执行相应方法，不用我们进行循环。

3.4 jQuery筛选选择器

1. :first 获取第一个元素
2. :last 获取最后一个元素
3. eq(index) 获取指定索引号的元素，不推荐
4. odd 获取索引号为奇数的元素
5. :even 获取索引号为偶数的元素
6. :checked 查找被选中表单是否被选中

3.5 jQuery筛选方法

1. parent() 查找最近一级父级
2. parents() 查找指定的祖先元素
3. children(选择器) 查找最近一级子元素，相当于子代选择器
4. find(选择器) 查找子元素，相当于后代选择器
5. siblings(选择器) 查找兄弟元素，不包含自身
6. nextAll(选择器) 查找当前元素之后所有的同辈元素
7. prevtAll(选择器) 查找当前元素之前所有的同辈元素
8. hasClass(类名) 检查当前的元素是否含有某个类，返回一个boolea值
9. eq(索引号) 相当于$(“选择器:eq(index)”)，但更推荐此种写法

注：$(this)表示jQuery当前元素

3.6 链式编程

$(this).css("color","red");
$(this).siblings().css("color","green")
$(this).css("color","red").siblings().css("color","green")

第四章 jQuery样式操作

4.1 操作css方法

1. 若参数只写属性，则返回属性值。
2. 参数为属性名，属性值（逗号分隔）设置样式。
3. 参数可以是对象形式，方便设置多组样式。

语法：$(this).css({"属性":"属性值"})

4.2 操作类方法

1. 添加类：$(选择器).addClass(类名)
2. 删除类：$(选择器).removeClass(类名)
3. 切换类：$(选择器).toggleClass(类名)

注：此方法只针对指定类，不影响其他类名，与classList类似。

第五章 jQuery效果

5.1 显示隐藏

1. 显示：show([speed,[easing],[fn]])
2. 隐藏：hidden([speed,[easing],[fn]])
3. 切换：toggle([speed,[easing],[fn]])

参数：speed：三种预定速度（show、normal、fast）或使用毫秒数

​ easing：用来指定切换效果，默认swing，可用linear

​ fn：回调函数。在动画完成时执行函数，每个元素只执行一次。

5.2 滑动

1. 下拉滑动：slideDown([speed,[easing],[fn]])
2. 下拉滑动：slideUp([speed,[easing],[fn]])
3. 切换滑动：slideToggle([speed,[easing],[fn]])

参数：speed：三种预定速度（show、normal、fast）或使用毫秒数

​ easing：用来指定切换效果，默认swing，可用linear

​ fn：回调函数。在动画完成时执行函数，每个元素只执行一次。

拓：动画队列：动画一旦触发就会执行。如果多次触发，就会造成多个动画排队执行。

​ 停止排队：stop()用于停止动画效果。（谁做动画给谁加，写在动画执行前，每次清除前一次的动画）

5.3 淡入淡出

1. 淡入：fadeIn([speed,[easing],[fn]])
2. 淡出：fadeOut([speed,[easing],[fn]])
3. 切换：fadeToggle([speed,[easing],[fn]])

参数：speed：三种预定速度（show、normal、fast）或使用毫秒数

​ easing：用来指定切换效果，默认swing，可用linear

​ fn：回调函数。在动画完成时执行函数，每个元素只执行一次。

4. 渐进方式调整到指定的不透明度：fadeTo(speed,opacity,[easing],[fn])

参数：speed：三种预定速度（show、normal、fast）或使用毫秒数，必写参数

​ easing：用来指定切换效果，默认swing，可用linear

​ fn：回调函数。在动画完成时执行函数，每个元素只执行一次。

​ opacity：必写参数，表示透明度，取值（0~1）。

5.4 自定义动画

语法：animate(params,[speed],[easing],[fn])

参数：params：想要更改的样式属性，以对象形式传递，必写。

第六章 jQuery属性操作

获取元素固有属性：prop(“属性名”)

设置元素固有属性：prop(“属性名”，“属性值”)

获取元素自定义属性：attr(“属性名”)

设置元素自定义属性：attr(“属性名”，“属性值”)

数据缓存：data()可在指定的元素上存取数据，并不修改DOM结构，页面刷新，数据被移除。

​ 附加数据：data(“name”,“value”)

​ 获取数据：data(“name”)

第七章 jQuery 内容文本值

获取普通元素内容：html()

设置普通元素内容：html(“内容”)

相当于innerHTML

获取元素文本内容：text()

设置元素文本内容：txet(“内容”)

相当于innerText

获取表单的值：val()

设置表单的值：val(“内容”)

相当于value

第八章 jQuery元素操作

8.1 遍历元素

语法：$(“选择器”).each(function(index,docEle){})

index是每个参数的索引号，docEle是每个DOM元素对象，不是jQuery对象。

该方法主要用于DOM处理。

语法：$.each(object,function(index,element){})

object为数组：index是每个元素索引号，element遍历内容。

object为对象：index是属性名，element为属性值。

该方法主要用于数据处理。

8.2 创建元素

语法：$("html标签")

8.3 添加元素

1. 内部添加：element.append(创建的元素) 往后添加

   ​ element.prepend(创建的元素) 往前添加

   此时的element为父元素

2. 外部添加：element.after(创建的元素) 往后添加

   ​ element.before(创建的元素) 往前添加

   此时的element为兄弟元素

8.4 删除元素

element.remove()删除匹配元素

element.empty()删除匹配的元素集合中的所有的子节点

element.html(“”)清空匹配元素的内容

第九章 jQuery尺寸、位置操作

9.1 jQuery盒子大小

1. width()/height() 只包含width/height 大小
2. innerwidth()/innerheight() 含width/height + padding 大小
3. outerwidth()/outerheight() 含width/height + padding + border 大小
4. outerwidth(true)/outerheight(true) width/height + padding + border + margin 大小

注：若以上无参数，则为获取参数相应置，返回数字型；若有参数，且参数为数字，则修改相应值，可不写单位。

9.2 jQuery位置

1. offset()方法：设置或返回被选中元素相对于文档的偏移坐标。

   该方法有两个属性：top、left。

   offset().top：获取距离文档顶部距离。

   offset().left：获取距离文档左侧距离。

   设置元素偏移：offset({top: 偏移量 ,left: 偏移量})

2. position()方法：用于返回被选中元素距离带有定位的父级的偏移坐标。（无定位，以文档为准）

   该方法只能获取不能设置偏移。有两个属性top、left。

3. scrollTop()/scrollLeft()方法：设置或返回被选中元素被卷去的头部/左侧。

   内有参数表示设置卷去的距离。

拓：切换事件hover([over,]out)

​ 参数含义：over相当于mouseenter，out相当于mouseleave

​ 语法：element.hover(function(){},function(){})

​ 若只写一个函数表示鼠标经过和离开都会触发该函数。

第十章 jQuery事件

10.1 jQuery事件注册

单个时间注册：element.事件(function(){})

10.2 jQuery事件处理

1. on()绑定事件：在匹配元素上绑定一个或多个事件的事件处理函数。

   ​ 语法：element.on(events,[selector],fn)

   ​ 参数含义：events：一个或多个用空格分隔事件类型

   ​ selector：元素的子元素选择器

   ​ fn：回调函数，绑定在元素上的侦听函数

   优点：①可以绑定多个事件，多个处理事件处理程序（用对象形式存储）

   ​ ②可以事件委派，将原来加给子元素的事件绑定在父元素上，就把事件委派给父元素，element是父元素，selector子元素。

   ​ ③动态创建的元素绑定事件。

2. off()解绑事件：移除通过on()方法添加的事假处理程序

   ​ ①element.off() 解绑元素身上的所有事件

   ​ ②element.off(“事件类型”) 解绑元素身上指定事件

   ​ ③element.off(“事件类型”,“选择器”) 解绑事件委托

   注：若事件只想触发一次，可以使用one()来绑定事件。

3. trigger()自动触发事件：①element.事件类型() 不会触发元素的默认行为

   ​ ②element.trigger(“事件类型”) 会触发元素的默认行为

   ​ ③element.triggerHandler(“事件类型”) 不会触发元素默认行为

10.3 jQuery事件对象

1. 阻止默认行为：event.preventDefault() 或 return false
2. 组织冒泡：event.stopPropagation()

10.4 jQuery拷贝对象

语法：$extend([deep,]target,object1[,objectN])

参数含义：deep：若为true表示深拷贝，默认为false表示浅拷贝。

​ target：要拷贝的目标对象

​ object1：带拷贝到第一个对象的对象

​ object N：带拷贝到第N个对象的对象

深拷贝：将被拷贝的对象的复杂数据类型中的地址拷贝给目标对象，修改目标对象的值会影响被拷贝对象。

浅拷贝：deep为true时，完全克隆，修改目标对象的值不会影响被拷贝对象。

10.5 jQuery多库共存

问题：jQuery使用$作为标识符，但是其他js库也会使用$作为表示符。

解决方法：①将$符号统一改为jQuery

​ ②jQuery变量规定新名称（自定义）：$noConflict()

e.g var xx = $noConflict();//即规定xx为jQuery的标识符。

第十一章 jQuery插件

常用插件：①瀑布流：jQuery之家（http://www.htmleaf.com/）

​ ②图片懒加载：jQuery插件库（http://www.jq22.com/）

​ ③全屏滚动：fullpage.js （https://github.com/alvarotrigo/fullpage.js）

如果觉得对你有帮助的话，点个赞呗~

如需转载，请注明出处Hoki802