JQuery知识概括

最新推荐文章于 2022-03-10 19:59:34 发布

GeorgeLin98

最新推荐文章于 2022-03-10 19:59:34 发布

阅读量249

点赞数 1

分类专栏：前端文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_41005188/article/details/112466553

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

JQuery知识概括

JQuery简介
jQuery的2把利器
使用jQuery核心函数
使用jQuery对象
jQuery插件
多库共存
jQuery总结

JQuery简介

什么是Jquery？

一个优秀的JS函数库
封装简化DOM操作(CRUD) / Ajax
使用了jQuery的网站超过90%
中大型WEB项目开发首选
Write Less, Do More!!!

为什么使用Jquery？

强大选择器: 方便快速查找DOM元素
隐式遍历(迭代): 一次操作多个元素
读写合一: 读数据/写数据用的是一个函数
链式调用: 可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容

如何使用Jquery?

js库库文件
①开发版(测试版)----jquery-1.10.1.js
②生产版(压缩版)—jquery-1.10.1.min.js
引用JS库的方式
①服务器本地库引入（本地文件）
<1>开发测试时使用
<2>加重了服务器负担, 上线时一般不使用这种方式
②CDN远程库引入（网络文件）
<1>地址：https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js
<2>BootCDN 是猫云联合 Bootstrap中文网共同支持并维护的前端开源项目免费 CDN 服务。
< 3>项目上线时, 一般使用比较靠谱的CDN资源库
<4>减轻服务器负担
jQuery的不同版本
①1.x：兼容老版本IE，文件更大
②2.x：部分IE8及以下不支持，文件小, 执行效率更高
③3.x：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本
使用jQuery
①使用jQuery核心函数: $/jQuery
②使用jQuery核心对象: xxx(执行()得到的)

CDN详解：

CDN，中文名叫做「内容分发网络」，它的作用是减少传播时延，找最近的节点
CDN 的优点：
①访问加速
②减轻源站（服务器）负载
③抗住攻击
CDN本质：
①其实 CDN 就是一个缓存，区别只是这个缓存是放在网络服务提供商节点的。
链接：闲话 CDN

jQuery的2把利器

jQuery核心函数：

jQuery核心函数理解：
①即: $ 或 jQuery
②jQuery定义了这个全局的函数供我们调用
③它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同
④也可作为对象调用其定义好的方法, 此时$就是一个工具对象
作为函数调用
①参数为函数----$(fun)
②参数为选择器(selector)字符串----$("#div1")
③参数为DOM对象----$(div1Ele)
④参数为html标签字符串----$("<div>")
作为对象使用
①发送ajax请求的方法
<1>$.ajax()
<2>$.get()
<3>$.post()
<4>…
②其它工具方法
<1>$.each()
<2>$.trim()
<3>$.parseJSON()
<4>…

什么是伪数组对象？

伪数组是一个非数组类型的对象.
有一个length属性,值为numder类型.
以下标的方式存储数据.

jQuery核心对象：

jQuery核心对象理解：
①即执行jQuery核心函数返回的对象
②jQuery对象是一个内部包含所有匹配的任意多个dom元素的伪数组对象(可能只有一个元素)。
③jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom``
属性/方法：
①基本行为：
<1>size()/length：返回DOM元素数量
<2>[index]/get(index)：返回指定索引值DOM元素
<3>each()：遍历DOM元素
<4>index()：返回DOM元素索引值
②属性：操作内部标签的属性或值
③CSS：操作标签的样式
④文档：对标签进行增删改操作
⑤筛选：根据指定的规则过滤内部的标签
⑥事件：处理事件监听相关
⑦效果：实现一些动画效果

使用jQuery核心函数

选择器：

选择器本身只是一个有特定语法规则的字符串, 没有实质用处
它的基本语法规则使用的就是CSS的选择器语法, 并对基进行了扩展
只有调用$(), 并将选择器作为参数传入才能起作用
$(selector)作用 : 根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回
分类：
①基本选择器：最基本最常用的选择器
<1>#id：id选择器
<2>element：元素选择器
<3>.class：属性选择器
<4>*：任意标签
<5>selector1,selector2,selectorN：取多个选择器的并集(组合选择器)
<6>selector1selector2selectorN：取多个选择器的交集(相交选择器)
②层次选择器：查找子元素, 后代元素, 兄弟元素的选择器
<1>ancestor descendant ：在给定的祖先元素下的后代元素中匹配元素
<2>parent > child ：在给定的父元素下的子元素中匹配元素
<3>prev + next ：匹配所有紧接在prev元素后的next元素
<4>prev ~ siblings ：匹配prev元素之后的所有siblings元素
③过滤选择器：在原有选择器匹配的元素中进一步进行过滤的选择器
<1>基本
1、：first
2、：last
3、：eq(index)
4、：lt
5、：gt
6、：odd
7、：even
8、：not(selector)
<2>内容
1、：contains(text)
2、：empty
3、：has(selector)
4、：parent
<3>可见性
1、：hidden
2、：visible
<4>属性
1、[attrName]
2、[attrName=value]
④子元素
<1>：nth-child
<2>：first-child
<3>：last-child
<4>：only-child
⑤表单选择器：
<1>表单
1、：input
2、：text
3、：password
4、：radio
5、：checkbox
6、：submit
7、：image
8、：reset
9、：button
10、：file
11、：hidden
<2>表单对象属性
1、：enabled
2、：disabled
3、：checked
4、：selected

工具方法：

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

ajax方法：

ajax()：ajax通用方法
get()：ajaxget方法
post()：ajaxpost方法
serialize() ：通过序列化表单值创建 URL 编码文本字符串。
…

使用jQuery对象

属性：

操作任意属性
①attr()
②removeAttr()
③prop()
④attr 与 prop ：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
操作class属性
①addClass()
②removeClass()
操作HTML代码/文本/值
①html()
②val()

CSS：

设置css样式/读取css值
①css(styleName): 根据样式名得到对应的值
②css(styleName, value): 设置一个样式
③css({多个样式对}): 设置多个样式
获取/设置标签的位置数据
①offset()：相对页面左上角的坐标
②position()：相对于父元素左上角的坐标
③scrollTop() /scrollLeft()：
<1>得到页面滚动条的scrollTop：
$(document.body).scrollTop()+$(document.documentElement).scrollTop()
<2>设置滚动条的新坐标：$(‘body,html’).scrollTop(60);
④scrollLeft()
获取/设置标签的尺寸数据
①heigh() 和 width() ：不包括内边距和边框的尺寸
②innerHeight() 和innerWidth() ：包括内边距,但不包括边框的尺寸
③outerHeight() 和outerWidth() ：包括内边距和边框的尺寸

文档：

添加节点
①append(content) ：向当前匹配的所有元素内部的最后插入指定内容
<1>返回值为当前匹配的所有元素自己
<2>可进行链式操作
②prepend(content) ：向当前匹配的所有元素内部的最前面插入指定内容
③before(content)：将指定内容插入到当前所有匹配元素的前面
④after(content)：将指定内容插入到当前所有匹配元素的后面
替换节点
①replaceWith(content) ：用指定内容替换所有匹配的标签
删除节点
①empty() ：删除所有匹配元素的子元素
②remove() ：删除所有匹配的元素

筛选：

过滤：在jQuery对象中的元素对象数组中过滤出一部分元素来
①first()
②last()
③eq(index|-index)
④filter(selector)
⑤not(selector)
⑥has(selector)
查找孩子/父母/兄弟标签：在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
①children()
②find()
③parent()
④prevall()
⑤nextall()
⑥siblings()

事件：

事件处理
①on()：通用的绑定事件监听
②xxx()：绑定某个具体的事件监听，如click()
③off()：解绑事件监听
④其中有几个特别注意的事件方法：
<1>trigger() 方法触发被选元素的指定事件类型。tigger触发被选元素的指定事件（一般来说点我触发我的事件但tigger是点我触发别人的事件）
事件切换
①hover()：同时绑定鼠标移入和移出监听
事件委派(委托)：将子元素的事件委托给父辈元素处理
①事件监听绑定在父元素上, 但事件发生在子元素上，事件会冒泡到父元素，但最终调用的事件回调函数的是子元素: event.target。
②好处：新增的元素没有事件监听，减少监听的数量(n==>1)
③delegate()：绑定委托事件监听
④undelegate()：移除委托事件监听
相关重要知识
①事件坐标：
<1>相对可视窗口左上角：event.clientX和event.clientY
<2>相对页面左上角：event.pageX和event.pageY
<3>相对元素左上角：event.offsetX和event.offsetY
②阻止事件冒泡：event.stopPropagation();
③取消事件的默认行为：event.preventDefault();

区别mouseover与mouseenter?

mouseover: 在移入子元素时也会触发, 对应mouseout
mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()

效果：

滑动动画：不断改变元素的高度来实现的
①slideDown()：带动画的展开
②slideUp()：带动画的收缩
③slideToggle()：带动画的切换展开/收缩
淡入淡出动画：不断改变元素的透明度来实现的
①fadeIn()：带动画的显示
②fadeOut()：带动画隐藏
③fadeToggle()：带动画切换显示/隐藏
显示/隐藏动画：不断改变元素的尺寸和透明度来实现
①show()：(不)带动画的显示
②hide()：(不)带动画的隐藏
③toggle()：(不)带动画的切换显示/隐藏
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
自定义动画：
①animate()：自定义动画效果的动画
②stop()：停止动画

jQuery对象使用特点：

链式调用：调用jQuery对象的任何方法后返回的还是当前jQuery对象
读写合一：
①读: 内部第一个dom元素
②写: 内部所有的dom元素

jQuery插件

扩展插件：

extend()是一个方法！！！
扩展jQuery的工具方法

$.extend({
  xxx: fuction () {} // this是$
})
$.xxx()

扩展jQuery对象的方法

$.fn.extend({
  xxx: function(){}  // this是jQuery对象
})
obj.xxx()

jQuery插件：

jQuery插件理解：
①基于jQuery编写的扩展库
②jQuery插件地址
jquery-validation：
①表单验证插件
②参考"菜鸟教程"学习
③使用：
<1>先去下载插件包
<2>引入js：
1、jquery-1.11.1.js
2、jquery.validate.js
3、messages_zh.js
<3>定义验证：
1、直接在标签中指定
2、js编码指定。
jquery UI：
①UI组件：html+css
②jquery UI库地址
laydate：
①日期控件
②laydate库地址

多库共存

多库共存：

问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

//释放$的使用权,让另一个库可以正常使用
jQuery.noConflict()

//使用的是myLib.js中的$
$()

//使用jQuery
jQuery(function () {
  jQuery('body')
})

jQuery总结

jQuery 对象和 dom 对象区分：

Dom 对象：
①通过 getElementById()查询出来的标签对象是 Dom 对象
②通过 getElementsByName()查询出来的标签对象是 Dom 对象
③通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
④通过 createElement() 方法创建的对象，是 Dom 对象
⑤DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]
jQuery 对象：
①通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
②通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
③通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
④jQuery 对象 Alert 出来的效果是：[object Object]
注意：
①jQuery 对象的本质是 dom 对象的数组 + jQuery 提供的一系列功能函数。
②jQuery 对象不能使用 DOM 对象的属性和方法
③DOM 对象也不能使用 jQuery 对象的属性和方法

Dom 对象和 jQuery 对象互转：

dom 对象转化为 jQuery 对象
①先有 DOM 对象
②$( DOM 对象 ) 就可以转换成为 jQuery 对象
jQuery 对象转为 dom 对象
①先有 jQuery 对象
②jQuery 对象[下标]取出相应的 DOM 对象

window.onload与 $(document).ready()区别：

window.onload
①包括页面的图片加载完后才会回调(晚)
②只能有一个监听回调
$(document).ready()
①等同于: $(function(){})
②页面加载完就回调(早)
③可以有多个监听回调

$(document)是啥：

意思是说获取整个网页文档对象（类似的于window.document）

Jquery总结：

Jquery重点：一个核心对象，一个核心函数：
①参数为选择器时得到对象-----$（X）
②得到的对象可以进行筛选------$（X）.X()
③同时可以进行css样式操作------$（X）.X()
④也可以进行属性以及文本操作------$（X）.X()
⑤也可以直接当工具类------$.（X）
⑥也可以基本的对象访问------$（X）.X()
⑦也可以做事件处理------$（X）.X()
⑧也可以做文档处理------$（X）.X()
⑨也可以做动画效果------$（X）.X()
⑩也可以做数据缓存或队列控制------$.（X）
⑪也可以使用插件机制或多库共存------JQuery. (X)或$. (X)

jquery源码分析：

jquery：window.jQuery = window.$ = jQuery;
①暴露出去以方便调用
jquery核心函数：jquery（）
jquery原型：jQuery.fn =jQuery.prototype
jquery核心对象：jQuery.fn.init
核心函数返回值为核心对象
jquery扩展：jQuery.extend = jQuery.fn.extend = function() {};
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
①相当于将jquery核心对象的原型对象的地址值变为jquery的原型对象。因此jquery核心对象也可以调用jquery的原型对象上方法
因此总结来看jquery的方法就是jquery对象上的方法，jquery核心对象方法就是jquery对象的原型对象上的方法。
一般来说对象方法当工具用，原型对象方法给dom元素(Jquery的dom元素对象)用。

交互的核心：