第四章 前端开发——JQuery库

第四章 前端开发学习——JQuery库

1、jQuery基础

2、使用选择器获取元素

3、使用筛选器获取元素

4、DOM操做

5、属性和样式操做

6、jQuery事件机制

7、动画效果

8、工具和其余操做

9、jQuery插件

 

1、JQuery基础

1.jQuery概述

什么是jQuery（what）：

• jQuery 是一个高效、精简而且功能丰富的 JavaScript 工具库
• jQuery极大的简化了JavaScript 编程

什么是JavaScript类库（what）：

• 它就是一些函数的集合，就是把特定效果的代码写好，你只须要在用的时候要用不多的代码去调用。
• 起主导做用的是你的代码，由你来决定什么时候使用类库。

常见的类库：

• jQuery
• ExtJS
• prototype.js
• zepto.js

jQuery优点：

• 开源 免费
• 便捷的选择器
• 方便的DOM操做
• 方便的动画特效
• 易用的ajax操做
• 丰富的插件扩展
• 解决浏览器兼容性效果

jQuery版本：

• 1.x.x的版本是能够 支持 IE6~IE8的
• 2.x.x到3.x.x 的版本，不在兼容IE8以及如下浏览器

JQuery库下载：

• 官网 https://jquery.com/
• 文档API： http://jquery.cuishifeng.cn/index.html

 

2.jQuery基本使用

（1）如何使用JQuery（how）：

方式一：下载jQuery文件到本地，再引入jQuery文件

<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，必定在引入jQuery以后，再使用jQuery提供的各类操做
</script>

方式二：直接使用CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>
BootCDN jQuery各个版本地址： https://www.bootcdn.cn/jquery/

 

（2）jQuery对象

先来看一下原生JavaScript

再来看一下jQuery对象

$是jQuery的别名。

$对象能够用做选择器获取元素，还能够建立DOM对象

jQuery('.item').show()
//等同于
$('.item').show()

 

（3）文档就绪事件

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

上述写法能够简写

$(function(){

   // 开始写 jQuery 代码...

});

 

 

（4）连贯操做

$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()

也能够写成这样方便阅读

 

（5）jQueryDOM和jsDOM的区别

①获取元素对象的区别

经过原生js获取的dom对象，咱们称之为jsDOM或者原生DOM

经过jQuery选择器获取的dom对象，咱们称之为 jQuery DOM

②修改CSS样式的区别

原生JS：

jQuery：

 ③jquery DOM 和 原生JS DOM 互相转换

A）原生JS DOM 转 jQuery DOM

B）jQuery DOM 转 原生 JS DOM

 

 

2、使用选择器获取元素

经过选择器，能够获取到页面元素。jQuery具备强大的选择器，跟CSS3选择器相似。

1.基本选择器（同CSS3）

• #id　　  根据给定的ID匹配一个元素
• element  根据给定的元素标签名匹配全部元素
• .class　　根据给定的css类名匹配元素。
• *      匹配全部元素
• selector1,selector2,selectorN 将每个选择器匹配到的元素合并后一块儿返回

2.层级选择器（同CSS3）

• ancestor descendant 在给定的祖先元素下匹配全部的后代元素
• parent>child     在给定的父元素下匹配全部的子元素
• prev+next       匹配全部紧接在 prev 元素后的 next 元素
• prev~siblings　　  匹配 prev 元素以后的全部 siblings 元素

3.过滤选择器

• :first      获取第一个元素
• :not(selector) 去除全部与给定选择器匹配的元素
• :even　　    匹配全部索引值为偶数的元素，从 0 开始计数
• :odd       匹配全部索引值为奇数的元素，从 0 开始计数
• :eq(index)   匹配一个给定索引值的元素
• :gt(index)   匹配全部大于给定索引值的元素
• :lang    　　选择指定语言的全部元素。1.9+
• :last    　　获取最后个元素
• :lt(index) 　　匹配全部小于给定索引值的元素
• :header 　　  匹配如 h1, h2, h3之类的标题元素
• :animated 　　 匹配全部正在执行动画效果的元素
• :focus　　   匹配当前获取焦点的元素
• :root 　　   选择该文档的根元素 1.9+
• :target 　　  选择由文档URI的格式化识别码表示的目标元素 1.9

4.内容选择器

• :contains(text) 匹配包含给定文本的元素
• :empty 　　  　匹配全部不包含子元素或者文本的空元素
• :has(selector)  匹配含有选择器所匹配的元素的元素
• :parent 　　   匹配含有子元素或者文本的元素

5.可见性选择器

• :hidden 匹配全部不可见元素，或者type为hidden的元素
• :visible 匹配全部的可见元素

6.属性选择器（同CSS3）

• [attribute] 匹配包含给定属性的元素
• [attribute=value] 匹配给定的属性是某个特定值的元素
• [attribute!=value] 匹配全部不含有指定的属性，或者属性不等于特定值的元素
• [attribute^=value] 匹配给定的属性是以某些值开始的元素
• [attribute$=value] 匹配给定的属性是以某些值结尾的元素
• [attribute*=value] 匹配给定的属性是以包含某些值的元素
• [attrSel1][attrSel2][attrSelN] 复合属性选择器，须要同时知足多个条件时使用

7.子元素选择器（同CSS3）

• :first-child 匹配所给选择器( :以前的选择器)的第一个子元素
• :first-of-type 结构化伪类，匹配E的父元素的第一个E类型的孩子 1.9+
• :last-child 匹配最后一个子元素
• :last-of-type 结构化伪类，匹配E的父元素的最后一个E类型的孩子 1.9+
• :nth-child() 匹配其父元素下的第N个子或奇偶元素
• :nth-last-child() 选择全部他们父元素的第n个子元素。计数从最后一个元素开始到第一个 1.9+
• :nth-last-of-type() 选择的全部他们的父级元素的第n个子元素，计数从最后一个元素到第一个 1.9+
• :nth-of-type() 选择同属于一个父元素之下，而且标签名相同的子元素中的第n个 1.9+
• :only-child 若是某个元素是父元素中惟一的子元素，那将会被匹配
• :only-of-type 选择全部没有兄弟元素，且具备相同的元素名称的元素 1.9+

8.表单选择器

• :input 匹配全部 input, textarea, select 和 button 元素
• :text 匹配全部的单行文本框
• :password 匹配全部密码框
• :radio 匹配全部单选按钮
• :checkbox 匹配全部复选框
• :submit 匹配全部提交按钮，匹配 type="submit" 的input或者button
• :image 匹配全部图像域
• :reset 匹配全部重置按钮
• :button 匹配全部按钮
• :file 匹配全部文件域

9.表单对象选择器

• :enabled 匹配全部可用元素
• :disabled 匹配全部不可用元素
• :checked 匹配全部选中的被选中元素(复选框、单选框等，select中的option)
• :selected 匹配全部选中的option元素

 

3、使用筛选器获取元素

1.过滤

• eq(index|-index) 获取当前链式操做中第N个jQuery对象，返回jQuery对象
• first() 获取第一个元素
• last() 获取最后个元素
• filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。
• not(expr|ele|fn) 从匹配元素的集合中删除与指定表达式匹配的元素
• has(expr|ele) 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
• slice(start,[end]) 选取一个匹配的子集

2.查找（破坏性操做）

• children([expr]) 取得一个包含匹配的元素集合中每个元素的全部子元素的元素集合。
• find(e|o|e) 搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
• parent([expr]) 取得一个包含着全部匹配元素的惟一父元素的元素集合
• parents([expr]) 取得一个包含着全部匹配元素的祖先元素的元素集合（不包含根元素）
• parentsUntil([e|e][,f]) 查找当前元素的全部的父辈元素，直到遇到匹配的那个元素为止
• offsetParent() 返回第一个匹配元素用于定位的父节点。
• next([expr]) 取得一个包含匹配的元素集合中每个元素紧邻的后面同辈元素的元素集合
• nextAll([expr]) 查找当前元素以后全部的同辈元素
• nextUntil([e|e][,f]) 查找当前元素以后全部的同辈元素，直到遇到匹配的那个元素为止
• prev([expr]) 取得一个包含匹配的元素集合中每个元素紧邻的前一个同辈元素的元素集合
• prevall([expr]) 查找当前元素以前全部的同辈元素
• prevUntil([e|e][,f]) 查找当前元素以前全部的同辈元素，直到遇到匹配的那个元素为止
• siblings([expr]) 取得一个包含匹配的元素集合中每个元素的全部惟一同辈元素的元素集合
• closest(e|o|e) 1.7* 从元素自己开始，逐级向上级元素匹配，并返回最早匹配的元素

3.串联

• add(e|e|h|o[,c]) 1.9* 把与表达式匹配的元素添加到jQuery对象中
• andSelf() 1.8- 加入先前所选的加入当前元素中
• addBack() 1.9+ 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。
• contents() 查找匹配元素内部全部的子节点（包括文本节点）
• end() 回到最近的一个"破坏性"操做以前

4.其余元素处理

• is(expr|obj|ele|fn) 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，若是其中至少有一个元素符合这个给定的表达式就返回true
• map(callback) 将一组元素转换成其余数组（不管是否是元素数组）

 

 

4、DOM操做

1.内部插入（如下举例效果是实现经过按钮给div元素内添加img元素）

• append(content|fn) 向每一个匹配的元素内部追加内容
• appendTo(content) 把全部匹配的元素追加到另外一个指定的元素元素集合中
• prepend(content|fn) 向每一个匹配的元素内部前置内容
• prependTo(content) 把全部匹配的元素前置到另外一个、指定的元素元素集合中

•  

2.外部插入

• after(content|fn) 在每一个匹配的元素以后插入内容
• before(content|fn) 在每一个匹配的元素以前插入内容
• insertAfter(content) 把全部匹配的元素插入到另外一个、指定的元素元素集合的后面
• insertBefore(content) 把全部匹配的元素插入到另外一个、指定的元素元素集合的前面

•  

3.包裹

• wrap(html|ele|fn) 把全部匹配的元素用其余元素的结构化标记包裹起来
• unwrap() 这个方法将移出元素的父元素
• wrapAll(html|ele) 移出元素的父元素
• wrapInner(html|ele|fn) 将每个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

•  

4.替换

• replaceWith(content|fn) 将全部匹配的元素替换（注意：是替换，原元素将不保留）成指定的HTML或DOM元素
• replaceAll(selector) 用匹配的元素替换掉全部 selector匹配到的元素

•  

5.删除

• empty() 删除匹配的元素集合中全部的子节点
• remove([expr]) 从DOM中删除全部匹配的元素
• detach([expr]) 从DOM中删除全部匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，于是能够在未来再使用这些匹配的元素。与remove()不一样的是，全部绑定的事件、附加的数据等都会保留下来

6.复制（克隆）

• clone([Even[,deepEven]]) 克隆匹配的DOM元素而且选中这些克隆的副本

 

5、属性和样式操做

1.元素属性操做

A）属性

• attr(name|pro|key,val|fn) 设置或返回被选元素的属性值
  • 设置元素属性值：
  • 返回元素属性值：
• removeAttr(name) 从每个匹配的元素中删除一个属性
• prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值
• removeProp(name) 用来删除由.prop()方法设置的属性集

B）class

• addClass(class|fn) 为每一个匹配的元素添加指定的类名
• removeClass([class|fn]) 从全部匹配的元素中删除所有或者指定的类
• toggleClass(class|fn[,sw]) 若是存在（不存在）就删除（添加）一个类
• hasClass(class) 检查当前的元素是否含有某个特定的类，若是有，则返回true

C）代码、文本、值

• html([val|fn]) 取得第一个匹配元素的html内容
• text([val|fn]) 取得全部匹配元素的内容
• val([val|fn|arr]) 得到匹配元素的当前值

 

2.元素样式操做

A）设置CSS

• css(name|pro|[,val|fn]) 访问匹配元素的样式属性

B）元素位置

• offset() 获取匹配元素在当前视口的相对偏移
• position() 获取匹配元素相对父元素的偏移
• scrollLeft() 获取匹配元素相对滚动条顶部的偏移
• scrollTop() 获取匹配元素相对滚动条左侧的偏移

C）元素尺寸（都有查看和设置的功能）

• width() 取得第一个匹配元素当前计算的宽度值（px）
  • 查看元素宽高：
  • 设置宽高：
• height() 取得匹配元素当前计算的高度值（px)
• innerWidth() 匹配元素内部区域宽度（包括补白、不包括边框）
• innerHeight() 匹配元素内部区域高度（包括补白、不包括边框）
• outerWidth() 匹配元素外部宽度（默认包括补白和边框）
• outerHeight() 匹配元素外部高度（默认包括补白和边框）

 

6、jQuery事件机制

1.事件操做

A）页面载入事件

方式一：

$(document).ready(function(){
  // 在这里写你的代码...
});

方式二：推荐

$(function($) {
  // 你能够在这里继续使用$做为别名...
});

 

2.事件绑定

• on(eve,[sel],[data],fn) 1.7+ 在选择元素上绑定一个或多个事件的事件处理函数
• bind(type,[data],fn) 3.0- 请使用on()
• one(type,[data],fn) 为每个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
•  

 

3.事件解绑

• off(eve,[sel],[fn]) 1.7+ 在选择元素上移除一个或多个事件的事件处理函数
• unbind(t,[d|f]) 3.0- 请使用off()
• 其它：阻止事件冒泡和默认动做

•  

4.手动触发事件

• trigger(type,[data]) 在每个匹配的元素上触发某类事件

•  

 5.事件委派

$(document).on('click', 'button', fn)

 

6.事件切换

• hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
• toggle([spe],[eas],[fn]) 1.9-用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

 

7.事件列表

• blur([[data],fn])
• change([[data],fn])
• click([[data],fn])
• dblclick([[data],fn])
• error([[data],fn])
• focus([[data],fn])
• focusin([data],fn) 当元素得到焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他能够在父元素上检测子元素获取焦点的状况
• focusout([data],fn) 当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他能够在父元素上检测子元素失去焦点的状况。
• keydown([[data],fn])
• keypress([[data],fn])
• keyup([[data],fn])
• mousedown([[data],fn])
• mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一块儿使用。与 mouseover 事件不一样，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。若是鼠标指针穿过任何子元素，一样会触发 mouseover 事件。
• mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一块儿使用。与 mouseout 事件不一样，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。若是鼠标指针离开任何子元素，一样会触发 mouseout 事件。
• mousemove([[data],fn])
• mouseout([[data],fn])
• mouseover([[data],fn])
• mouseup([[data],fn])
• resize([[data],fn])
• scroll([[data],fn])
• select([[data],fn])
• submit([[data],fn])
• unload([[data],fn])

 

8.事件对象

 A）属性

• eve.currentTarget 在事件冒泡阶段中的当前DOM元素
• eve.data 当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind eve.delegateTarget 1.7+ 当currently-called的jQuery事件处理程序附加元素
• eve.namespace 当事件被触发时此属性包含指定的命名空间
• eve.pageX 鼠标相对于文档的左边缘的位置
• eve.pageY 鼠标相对于文档的顶部边缘的位置
• eve.relatedTarget 在事件中涉及的其它任何DOM元素
• eve.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是
• undefined eve.target 最初触发事件的DOM元素
• eve.timeStamp 返回事件触发时距离1970年1月1日的毫秒数
• eve.type 事件类型 eve.which 针对键盘和鼠标事件，这个属性能肯定你到底按的是哪一个键或按钮

 B）方法

• eve.preventDefault() 阻止默认事件行为的触发
• eve.isDefaultPrevented() 根据事件对象中是否调用过
• event.preventDefault() 方法来返回一个布尔值
• eve.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
• eve.isPropagationStopped() 检测
• event.stopPropagation() 是否被调用过
• eve.stopImmediatePropagation() 阻止剩余的事件处理函数执行而且防止事件冒泡到DOM树上
• eve.isImmediatePropagation() 检测
• event.stopImmediatePropagation() 是否被调用过

 

7、动画效果

1.基本方法

• show([s,[e],[fn]]) 显示隐藏的匹配元素
• hide([s,[e],[fn]]) 隐藏显示的元素
• toggle([s],[e],[fn]) 若是元素是可见的，切换为隐藏的；若是元素是隐藏的，切换为可见的

  参数详解

• speed : 三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
• easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
• fn : 在动画完成时执行的函数，每一个元素执行一次。

 

2.滑动效果

• slideDown([s],[e],[fn]) 经过高度变化（向下增大）来动态地显示全部匹配的元素
• slideUp([s,[e],[fn]]) 经过高度变化（向上减少）来动态地隐藏全部匹配的元素
• slideToggle([s],[e],[fn]) 经过高度变化来切换全部匹配元素的可见性

  参数详解

• speed : 三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
• easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
• fn : 在动画完成时执行的函数，每一个元素执行一次。

 

3.淡入淡出效果

• fadeIn([s],[e],[fn]) 经过不透明度的变化来实现全部匹配元素的淡入效果
• fadeOut([s],[e],[fn]) 经过不透明度的变化来实现全部匹配元素的淡出效果
• fadeToggle([s,[e],[fn]]) 经过不透明度的变化来开关全部匹配元素的淡入和淡出效果
• fadeTo([[s],o,[e],[fn]]) 把全部匹配元素的不透明度以渐进方式调整到指定的不透明度

  参数详解：

• speed : 三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
• easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
• fn : 在动画完成时执行的函数，每一个元素执行一次。
• opacity : (用户fadeTo)一个0至1之间表示透明度的数字。

 

4.自定义动画

• animate(p,[s],[e],[fn])

  参数详解：

• params : 一组包含做为动画属性和终值的样式属性和及其值的集合
• speed : 三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
• easing : 要使用的擦除效果的名称(须要插件支持).默认jQuery提供"linear" 和 "swing".
• fn : 在动画完成时执行的函数，每一个元素执行一次。

 

5.动画控制

• stop([c],[j]) 中止全部在指定元素上正在运行的动画
• delay(d,[q]) 设置一个延时来推迟执行队列中以后的项目
• finish([queue]) 中止当前正在运行的动画，删除全部排队的动画，并完成匹配元素全部的动画
•  

 

6.设置

//关闭页面上全部的动画
jQuery.fx.off = true;

 

8、工具和其余操做

1.jQuery对象访问

• each(callback) 遍历jquery dom
• size() 1.8- 返回dom集合中的个数 同length length 返回dom集合中的个数
• selector 返回选择器
• context 返回原生js dom
• get([index]) 获取dom集合中一个
• index([selector|element]) 索引值
• toArray() 转为纯数组

2.数组和对象操做

• $.each(object,[callback]) 遍历数组 对象
• $.extend([d],tgt,obj1,[objN]) 合并对象 合并到第一个参数
• $.grep(array,fn,[invert]) 过滤数组
• $.makeArray(obj) 把类数组对象变为数组
• $.map(arr|obj,callback) 操做数组的每一单元
• $.inArray(val,arr,[from]) 判断值是否在数组中
• $.merge(first,second) 合并数组
• $.unique(array) 去重
• $.parseJSON(json) 解析json
• $.parseXML(data) 解析xml

3.类型检测

• $.contains(c,c) 判断一个元素是不是另外一个元素的后代吗元素
• $.type(obj) 判断类型
• $.isarray(obj) 是否为数组
• $.isFunction(obj) 是不是function
• $.isEmptyObject(obj) 是否为空对象
• $.isPlainObject(obj) 是否为纯粹的对象
• $.isWindow(obj) 是不是window对象
• $.isNumeric(value) 1.7+是不是number

4.其余操做

• $.trim(str) 去除左右两边的空格
• $.param(obj,[traditional]) 把对象或数组 转为 特殊格式的字符串 序列化

 

9、jQuery插件