20210826 jquery.js

JQuery

JS的函数库
使用时在项目的js文件夹下放置好jquery函数库，在html中导入库即可

jquery的语法

/*$(selector).action() 类似于这样的结构*/
$(document).ready(function(){
	/*工厂函数*/
	
});

选择器
与CSS选择器一致不在赘述
使用格式$(“选择器”)
事件
与JS事件种类相同 在名称上略有不同

jquery DOM对象操作

增删查改
查询

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

增

clone() 复制节点
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
只需将text或者html以字符串的形式作为参数传入

删

detach()删除节点及其子节点，该方法会返回完整的一个节点并保留节点所有绑定的事件、附加的数据
remove() - 删除被选元素（及其子元素） 相当于删除了这棵树
empty() - 从被选元素中删除子元素		相当于删除了所有子树

改
用于查询的方法同样可以用于修改，只需传入合适的参数

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

以下方法会返回对应的属性的数值，默认单位像素

width()	也可以用于修改
height()	也可以用于修改
innerWidth()  包含左右内边距
innerHeight()
outerWidth()	包含左右外边距
outerHeight()

jquery DOM结构

遍历DOM

parent() 获取父节点
parents()	获取祖先节点
parentsUntil()	向上追溯祖先节点直到某一祖先节点为止（不包括这位祖先节点）

children()		获取子节点
find()	获取后代节点

下面三个方法用于对节点的身份进行补充或者限制

first() 该节点是同类节点中的长子节点
last()	该节点是同类节点中的幼子节点
eq() 该节点处在同类节点中的索引的对应位置

这些方法用于获取兄弟节点

siblings() 获取兄弟节点
next()	获取右兄弟节点（右兄弟只有一个）
nextAll() 获取右边的所有兄弟节点
nextUntil()	获取右边的所有兄弟节点直到某个兄弟节点
prev()	获取左兄弟节点
prevAll()
prevUntil()