JQuery知识概括

GeorgeLin
129 阅读6分钟

@TOC

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()①‘‘等同于:(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元素对象)用。

交互的核心：

  • 对哪些元素进行监听
  • 对哪些元素进行DOM操作
avatar
文章
阅读
粉丝