好久不用 jQuery, 来复习一下
1.1 简介
1.1.1 概述
jQuery 是一个优秀的 JavaScript 库,是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包括核心库、UI 和插件等开发人员以及推广和网站设计维护人员。团队中有 3 个核心人物:John Resig、Brandon Aaron 和 Jorn Zaefferer。 jQuery 凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。
1.1.2 jQuery 的引用
① 下载 jQuery ☞ 1.x:兼容 ie678,使用最为广泛的,官方只做 BUG 维护, ♞ 功能不再新增。因此一般项目来说,使用 1.x 版本就可以了, ♞ 最终版本:1.12.4 (2016年5月20日) ☞ 2.x:不兼容 ie678,很少有人使用,官方只做 BUG 维护, ♞ 功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x, ♞ 最终版本:2.2.4 (2016年5月20日) ☞ 3.x:不兼容 ie678,只支持最新的浏览器。除非特殊要求, ♞ 一般不会使用 3.x 版本的,很多老的 jQuery 插件不支持这个版本。 ♞ 目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日) ② 导入 jQuery 的 js 文件 ☞ jquery-xxx.js 与 jquery-xxx.min.js区别: ♞ jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些 ♞ jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快
1.1.3 jQuery 的对象
DOM(Document Object Model,文档对象模型),每一个 DOM 都可以表示成一棵树。jQuery 对象就是经过 jQuery 包装之后的 DOM 对象。jQuery 对象不能使用 DOM 对象的任何方法,同理 DOM 对象也不能使用 jQuery 对象的任何任何方法。
DOM 对象与 jQuery 对象互转
☞ jQuery 对象转 DOM 对象
// jq对象[索引] 或者 jq对象.get(索引)
var $jquery = $("#name"); // jQuery 对象
var dom = $jquery.get(0); // DOM 对象
☞ DOM 对象转 jQuery 对象
// $(js对象)
var dom = document.getElementById("name"); // DOM 对象
var $jquery = $(dom); // jQuery 对象
1.2 jQuery 选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()
。
1.2.1 基本选择器
基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素 id、class 和标签名等来查找 DOM 元素。在网页中,每个 id 名称只能使用一次,class 允许重复使用。
1.2.2 层级选择器
可以用 next() 方法来代替 (“prev + next”) 选择器,可以使用 nextAll() 方法来代替 (“prev ~ siblings”) 选择器。
选择器 |
等价方法 |
---|---|
$(".one + div") |
$(".one").next(“div”) |
$("#two ~ div") |
$("#two").nextAll(“div”) |
1.2.3 过滤选择器
过滤选择器主要是通过特定的规则筛选出 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同,即选择器都以一个 :
开头。按照不同的过滤规则,过滤选择器分为:基本过滤选择器,内容过滤选择器,可见性过滤选择器,子元素过滤选择器和表单对象属性过滤选择器
☞ 基本过滤选择器
☞ 内容过滤选择器
☞ 可见性过滤选择器
☞ 属性过滤选择器
☞ 子元素过滤选择器
☞ 表单对象属性过滤选择器
1.2.4 表单选择器
为了更加灵活地操作表单,jQuery 中专门加入了表单选择器。利用这个选择器,能极其方便地获取到表单的某个或某类型的元素。
1.3 DOM 操作
1.3.1 内容操作
操作 |
说明 |
---|---|
html() |
获取/设置元素的标签体内容 |
text() |
获取/设置元素的标签体纯文本内容 |
val() |
获取/设置元素的 value 属性值 |
1.3.2 属性操作
☞ 通用属性操作
操作 |
说明 |
---|---|
attr() |
获取/设置元素的属性 |
removeAttr() |
删除属性 |
prop() |
获取/设置元素的属性 |
removeProp() |
删除属性 |
attr 和 prop 的区别 ① 如果操作的是元素的固有属性,则建议使用prop ② 如果操作的是元素自定义的属性,则建议使用attr
☞ 对 class 属性操作
操作 |
说明 |
---|---|
addClass() |
添加class属性值 |
removeClass() |
删除class属性值 |
toggleClass() |
切换class属性,有则删除,无则添加 |
css() |
修改 css 样式 |
1.3.3 CRUD
操作 |
说明 |
---|---|
append() |
对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾 |
prepend() |
对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头 |
appendTo() |
对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾 |
prependTo() |
对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头 |
after() |
添加元素到元素后边对象1.after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系 |
before() |
对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系 |
insertAfter() |
对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系 |
insertBefore() |
对象1.insertBefore(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系 |
remove() |
对象.remove():将对象删除掉 |
empty() |
对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 |
1.4 jQuery 动画
1.4.1 show() 方法和 hide() 方法
show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。在 HTML 文档里,为一个元素调用 hide() 方法,会将该元素的 display 样式改为 “none”。当把元素隐藏后,可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。
☞ 参数
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
☞ 参数解释
① speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值 ② easing:用来指定切换效果,默认是"swing",可用参数"linear" ♞ swing:动画执行时效果是 先慢,中间快,最后又慢 ♞ linear:动画执行时速度是匀速的 ③ fn:在动画完成时执行的函数,每个元素执行一次。
1.4.2 fadeln() 方法和 fadeOut() 方法
与 show() 方法不相同的是,fadeln() 方法和 fadeOut() 方法只改变元素的不透明度。fadeOut() 方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none)。fadeln() 方法则相反。
☞ 参数
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
1.4.3 slideUp() 方法和 slideDown() 方法
slideUp() 方法和 slideDown() 方法会改变元素的高度。如果一个元素的 display 属性值为"none",当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp() 方法正好相反,元素将由下到上缩短隐藏。
☞ 参数
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn]])
1.5 遍历
1.5.1 JS 遍历方式
for(初始化值;循环结束条件;步长)
1.5.2 jQuery 遍历方式
/*
* index:就是元素在集合中的索引
* element:就是集合中的每一个元素对象
* this:集合中的每一个元素对象
* 如果当前 function 返回为 false,则结束循环(break)。
* 如果当前 function 返回为 true,则结束本次循环,继续下次循环(continue)
*/
jquery对象.each(function(index,element){});
$.each(object, [callback]);
// jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象){}
1.6 事件
1.6.1 DOM 加载
(document).ready() 方法和 window.onload 方法有相似的功能,但是在执行时机方面是有区别的。window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即 JavaScript 此时才可以访问网页中的任何元素。而通过 jQuery 中的 (document).ready() 方法注册的事件处理程序,在 DOM 完全就绪时就可以被调用。此时,网页的所有元素对 jQuery 而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。 另外,需要注意一点,由于在 (document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 HTML 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。示例:(windows).load(function() {})
1.6.2 标准事件绑定
☞ 语法
// 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为
jq对象.事件方法(回调函数);
☞ 示例
// 提交表单
form.submit();
1.6.3 其他事件绑定
// 绑定事件
jq对象.on("事件名称",回调函数)
// 解除绑定,如果off方法不传递任何参数,则将组件上的所有事件全部解绑
jq对象.off("事件名称")
- Spring框架(一)
- MyBatis框架(三)动态SQL,分页,二进制存入数据库图片
- Spring框架(二)反射机制, 注入, 单例模式, 自动装载, 延迟加载
- Spring框架(三) JDBCTemplate,声明式事务,自动装载(注解)
- SpringMVC 常用注解
- Spring3:AOP
- js中三目运算符和&& || 符的个人浅见
- 原生js怎么为动态生成的标签添加各种事件
- 实现图片懒加载
- SpringMVC框架(四)文件的上传下载,上下文路径
- SpringMVC框架(一)
- HTML link标签media参数
- Mybatis,Spring,SpringMVC框架面试题
- 腾讯云容器服务集群中安装 dashboard ui
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Stata | 批量替换变量值的小技巧
- 手把手教你完成课设作业使用Pandas对海平面温度异常进行分析,小白也能看的懂
- 谈谈自学 Stata 的体会
- Latex修改字体字号的大小
- Notes | GitHub Upload Large Files
- PPT 中插入图片的几个小技巧
- Stata | 整理调查问卷修改内容清单
- LaTeX | 绘制微观经济学图形
- Python | 地址数据清理相关的库
- 【Redis数据结构 序】使用redis-py操作Redis数据库
- 【Redis数据结构 String类型】String类型生产中的应用 缓存、计数器、限速器的实现
- Redis数据结构 List 类型】List 类型生产中的应用 消息队列、排行榜、朋友圈、监控程序的实现
- Crawlab准备之python+scrapy环境搭建
- 一致性协议之 ZAB
- Elasticsearch Analyzer原理分析并实现中文分词