【JQuery】JQuery基础手册

最近入职了，接手了比较老的代码，基本都是jquery实现的，上次用jquery已经是8年前的事了…趁这个机会复习下！

JQuery

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

JQuery是一个JavaScript函数库，包括以下特性：

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX
• Utlities

文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

JQuery函数都在这样一个ready函数中，这是为了防止文档在完全加载（就绪）之前运行JQuery代码。

例如：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

$(document).ready和onload的区别

$(document).ready()和传统的<bodyonload=load()>相似，不同的是onload方法是在页面加载完成后才发生，这包括dom元素和其他页面元素的加载，而$(document).ready()所要执行的代码是dom元素被完全加载的情况下执行，所以document.ready方法执行速度比onload快。

在一个页面中可以无限次使用$(ducoment).ready()事件，其中注册的函数会按照代码的先后顺序依次执行。

$(function(){…}); 

jQuery(function($) {…});  

$(document).ready(function(){…})

这三个的作用是一样的。

JQuery 选择器

JQuery使用css选择器来选取HTML元素。

语法	描述
$(this)	当前HTML元素
$(“p”)	所有p标签元素
$(“p.intro”)	所有class="intro"的p标签元素
$(".intro")	所有class="intro"的元素
$("#intro")	id="intro"的元素
$(“ul li:first”)	每个ul的第一个li元素
$("[href$=’.jpg’]")	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=“intro” 的div元素中的所有 class=“head” 的元素

JQuery 事件函数

事件处理程序是指当HTML中发生某些事件所调用的方法，这部分代码通常放到中。

示例代码：

 $("button").click(function() {
     ..some code... 
 } )

JQuery HTML

JQuery获取内容和属性

方法名	描述
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容（包括 HTML 标记）
val()	设置或返回表单字段的值
attr()	方法用于获取属性值。

JQuery添加/删除元素

方法名	描述
append()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素之后插入内容
before()	在被选元素之前插入内容
remove()	删除被选元素（及其子元素），可带参数进行过滤
empty()	从被选元素中删除子元素

JQuery操作CSS

方法名	描述
addClass()	向被选元素添加一个或多个类
removeClass()	从被选元素删除一个或多个类
toggleClass()	对被选元素进行添加/删除类的切换操作
css()	设置或返回样式属性

JQuery处理尺寸

方法名	描述
width()	设置或返回元素的宽度（不包括内边距、边框或外边距）
height()	设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()	返回元素的宽度（包括内边距）
innerHeight()	返回元素的高度（包括内边距）
outerWidth()	返回元素的宽度（包括内边距和边框）
outerHeight()	返回元素的高度（包括内边距和边框）

JQuery 遍历

父子遍历

方法名	描述
parent()	返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
parents()	返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
parentsUntil()	返回介于两个给定元素之间的所有祖先元素
children()	返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历
find()	返回被选元素的后代元素，一路向下直到最后一个后代

兄弟间的遍历

方法	描述
siblings()	返回被选元素的所有同胞元素
next()	返回被选元素的下一个同胞元素
nextAll()	返回被选元素的所有跟随的同胞元素
nextUntil()	返回介于两个给定参数之间的所有跟随的同胞元素
prev()	返回被选元素的上一个同胞元素
prevAll()	获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的
prevUntil()	获得当前匹配元素集合中每个元素的前面的同胞元素，但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素

过滤

方法名	描述
first()	返回被选元素的首个元素
last()	返回被选元素的最后一个元素
eq()	返回被选元素中带有指定索引号的元素
filter()	允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()	返回不匹配标准的所有元素