jQuery
jQuery基本流程图https://www.processon.com/mindmap/5bca9b19e4b0fe81b666b9ac
特点
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库
- jQuery是用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行ajax交互，能够极大的简化JavaScript编程，
- 使用jQuery的原因：简单，开发效率高，不用浏览器的差异化
使用方法
- 下载：https://jquery.com/
- 导入
- 通过网址下载之后script导入本地文件路劲就可以了
- 通过使用bootcdn来使用jquery
- 按照jQuery的语法使用就可以了
- 注意：必须先导入再使用
jQuery内容
jQuery对象和普通DOM对象的区别
- jQuery选择器找到的是jquery对象
- 原生的DOM找到的就是DOM对象
- 互相转换
- jQuery对象[0]------>DOM对象
- $(DOM对象)------->jquery对象
查找标签
基本选择器
id选择器
$("#id") $("tagName") $(".className") $("div.c1") // 找到有c1 class类的div标签 //所有元素选择器 $("*") //组合选择器 $("#id, .className, tagName")
层级选择器
$("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y
属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
表单筛选器 type属性值
:text //文字 :password//密文 :file//文件 :radio//圆 :checkbox :submit//提交按钮 :reset//重启 :button//按钮
筛选器方法
往下找
.next()同级下一个
.nextAll()同级以下所有
.nextUntil同级以下指定到哪
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")
往上找
$("#id").prev()//id为id的同级上一个元素 $("#id").prevAll()//往上同级所有 $("#id").prevUntil("#i2")//往上指定到哪
找父级标签
$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们
补充
指定查找
$("div").find("p")//从div标签的后代找到p标签 //筛选 $("div").filter(".c1")//找到div且是c1的标签
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
操作class
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
操作css样式
.css("background-color") 查找背景颜色
.css("backgound-color","red") 更换背景颜色
.css({height:"300px",width:"200px"}) 更换多个css样式
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
大小(尺寸)操作
- 从内到外 内容（content）>内填充（padding)>边框（border）>外边距（margin）
- height/width 内容的高/宽
- innerHeight/innerWidth 内容+内填充
- outerHeight/outerWidth 内容+内填充+边框
文本操作
文本值
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容
html代码
text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
值
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
实例
$("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"]
属性
想要获取返回文本类的属性用atr（标签上的属性用attr）
想要获取返回布尔值的属性用prop（DOM对象有的属性用prop）
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
文档操作
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点
替换
replaceWith() replaceAll()
克隆
clone()// 参数
来源：https://www.cnblogs.com/yuncong/p/9846832.html