jQuery基础

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//按钮

筛选器方法

往下找
1. .next()同级下一个
2. .nextAll()同级以下所有
3. .nextUntil同级以下指定到哪
4. ```
$("#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","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()// 参数
```

jQuery基础

jQuery

使用方法

jQuery内容

操作标签