jQuery学习和知识点总结归纳

JohnLui 发布于2019-08-19 18:00 / 3521人阅读

摘要：目前在前端开发所占的比重越来越高，在我们学习和开发的过程中都会去使用。下面把程序员雷雪松对的知识点总结和归纳分享给大家。过滤对同胞元素的搜索。将匹配元素集合缩减为集合中的最后一个元素。返回指定元素相对于其他指定元素的位置。

jQuery目前在Web前端开发所占的比重越来越高，在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作。下面把PHP程序员雷雪松对jQuery的知识点总结和归纳分享给大家。

1、jQuery简介
jQuery是一个实用的JavaScript库。jQuery极大地简化了JS对DOM的操作，实现一些常用的方法，jQuery还可以链式操作。

2、jQuery的基本用法

//引入jQuery文件，可以本地也可以远程

3、jQuery常用的选择器和事件，和CSS的选择器很相似。
$() – 使用CSS选择器匹配元素
jQuery的事件和JS的事件基本相同，在使用的时候，去掉JS事件前面的on即可。
jQuery常用的事件：
load：当文档加载时运行脚本
blur：当窗口失去焦点时运行脚本
focus：当窗口获得焦点时运行脚本
change：当元素改变时运行脚本
submit：当提交表单时运行脚本
keydown：当按下按键时运行脚本
keypress：当按下并松开按键时运行脚本
keyup：当松开按键时运行脚本
click：当单击鼠标时运行脚本
dblclick：当双击鼠标时运行脚本
mousedown：当按下鼠标按钮时运行脚本
mousemove：当鼠标指针移动时运行脚本
mouseout：当鼠标指针移出元素时运行脚本
mouseover：当鼠标指针移至元素之上时运行脚本
mouseup：当松开鼠标按钮时运行脚本
abort：当发生中止事件时运行脚本

4、jQuery常用的效果方法
$(selector).hide() – 隐藏被选的元素
$(selector).show() – 显示被选的元素
$(selector).toggle() – 对被选元素进行隐藏和显示的切换
$(selector).slideDown() – 通过调整高度来滑动显示被选元素
$(selector).slideToggle() – 对被选元素进行滑动隐藏和滑动显示的切换
$(selector).slideUp() – 通过调整高度来滑动隐藏被选元素
$(selector).fadeIn() – 逐渐改变被选元素的不透明度，从隐藏到可见
$(selector).fadeOut() – 逐渐改变被选元素的不透明度，从可见到隐藏
$(selector).fadeTo() – 把被选元素逐渐改变至给定的不透明度
$(selector).animate() – 对被选元素应用“自定义”的动画

4、jQuery常用的DOM元素操作方法
$(selector).parent() – 返回被选元素的直接父元素。
$(selector).parents() – 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()，可选参数来过滤对祖先元素的搜索
$(selector).children() – 返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索
$(selector).find() – 返回被选元素的后代元素，一路向下直到最后一个后代，可选参数来过滤对后后代元素的搜索
$(selector).siblings() – 返回被选元素的所有同胞元素。过滤对同胞元素的搜索。
$(selector).next() – 返回被选元素的下一个同胞元素。
$(selector).nextAll() – 返回匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
$(selector).prev() – 返回的是前面的同胞元素
$(selector).prevAll() – 返回匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
$(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。
$(selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。
$(selector).eq() – 指定索引的新元素。
$(selector).get() – 获得由选择器指定的 DOM 元素。
$(selector).index() – 返回指定元素相对于其他指定元素的 index 位置。
注：parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选，比如：parents()、siblings()、nextAll()、prevAll()、siblings()。

$(selector).each() 对对象进行迭代，为每个元素执行函数
$(selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素
$(selector).size() 返回被 jQuery 选择器匹配的元素的数量

$(selector).text() – 设置或返回所选元素的文本内容
$(selector).html() – 设置或返回所选元素的内容（包括 HTML 标记）
$(selector).val() – 设置或返回表单字段的值
$(selector).append() – 在被选元素的结尾插入内容
$(selector).prepend() – 在被选元素的开头插入内容
$(selector).after() – 在被选元素之后插入内容
$(selector).before() – 在被选元素之前插入内容
$(selector).remove() – 删除被选元素（及其子元素）
$(selector).empty() – 从被选元素中删除子元素
$(selector).removeAttr() – 从所有匹配的元素中移除指定的属性。
$(selector).clone() – 创建匹配元素集合的副本
$(selector).load() – 从服务器加载数据，然后把返回到 HTML 放入匹配元素

5、jQuery对CSS的操作
$(selector).height() – 设置或返回匹配元素的高度。
$(selector).width() – 设置或返回匹配元素的宽度。
$(selector).addClass() – 向被选元素添加一个或多个类
$(selector).removeClass() – 从被选元素删除一个或多个类
$(selector).toggleClass() – 对被选元素进行添加/删除类的切换操作
$(selector).css() – 设置或返回样式属性
$(selector).hasClass() 检查匹配的元素是否拥有指定的类。

6、jQuery其他知识点
$(selector).data() – 存储与匹配元素相关的任意数据
$(selector).removeData() – 移除之前存放的数据
$(selector).serialize() – 将表单内容序列化为字符串
$(selector).serializeArray() – 序列化表单元素，返回 JSON 数据结构数据

$冲突的解决办法

//释放$标识符的控制，使用默认的变量jQuery
$.noConflict();
//自定义变量
var jq = $.noConflict();

7、jQuery Ajax 操作函数
$.ajax() – 执行Ajax异步请求
$.get() – 使用GET请求从服务器获取数据
$.getJSON() – 使用GET从服务器请求JSON编码数据
$.getScript() – 使用GET从服务器请求JavaScript文件并执行该文件
$.post() – 使用POST请求从服务器获取数据

原文来源：https://www.leixuesong.com/2496

云服务器 GPU云服务器 linux数据结构知识点总结位段知识总结机器学习学习总结机器学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79067.html

工程师如何提升自身的软素质

摘要：既然软素质如此有用，那么如何提升就成了最主要的问题。如何提升软素质所有没有给出切实可行建议的文章都是鸡汤文。自己心中要有努力提升自己软素质的认知和欲望，才能做到不断的进步。总结专业知识固然重要，但是软素质才是提升自身生活质量的关键。前言其实我现在写这篇文章有点早了，因为我自己对如何提高软素质也只有一点粗浅的想法。但是我最近发现，真正能让别人接受的不一定是总结的极好的真知灼见。真知灼...

plokmju88 2019-08-01 18:28 评论0 收藏0
工程师如何提升自身的软素质

摘要：既然软素质如此有用，那么如何提升就成了最主要的问题。如何提升软素质所有没有给出切实可行建议的文章都是鸡汤文。自己心中要有努力提升自己软素质的认知和欲望，才能做到不断的进步。总结专业知识固然重要，但是软素质才是提升自身生活质量的关键。前言其实我现在写这篇文章有点早了，因为我自己对如何提高软素质也只有一点粗浅的想法。但是我最近发现，真正能让别人接受的不一定是总结的极好的真知灼见。真知灼...

khs1994 2019-08-22 14:05 评论0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵，如果喜欢，点个开源不易。作者将原素材文章进行了新内容的添加和重新排列，但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧，来提升你的和代码。收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

ermaoL 2019-08-29 13:03 评论0 收藏0
前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

sixleaves 2019-08-02 16:13 评论0 收藏0