02-认识jQuery及使用方法

02-认识jQuery及使用方法
文章目录
一、什么是jQuery

一个大型的、简单的第三方类库
对Dom操作及ajax操作做了封装

 1、使用

需要在本地下载jquery文件，使用时在文件中引用
```
<body>
<script src="./jquery/jquery.js">script>
<script>
//操作文本内容
script>
body>
1
2
3
4
5
6
```
引入jquery文件后，会在全局暴露两个变量$和jQuery，二者是相同的

 2、jQuery选择器

选择所有的dom元素
```
语法：$('选择器')

例如：$('#box')
$('.box')
$('li')
1
2
3
4
5
```
注意：使用选择器返回值为集合类型

 3、jQuery筛选器
```
语法：$('选择器').first()
1
```
first() 所有匹配的元素中第一个
last() 所有匹配的元素中最后一个
eq(索引) 所有匹配元素的满足索引值元素
next() 获取匹配元素的下一个元素
nextAll() 获取匹配元素后面所有兄弟元素
prev() 获取匹配元素的前一个元素
prevAll() 获取匹配元素的前面所有兄弟元素
parents() 该选择器的父级选择器
parents() 该选择器所有父级选择器，直到找到html为止，包含html
siblings() 所有兄弟元素
find(选择器) 该元素所有后代，满足选择器要求的元素

 二、使用jQuery

1、jQuery中的三种方法
- html()
等价于原生js中的innerHTML
获取:
```
$('div').html()
1
```
设置：
可以识别并解析html结构
```
$('div').html('<h1>111h1>')
1
```
- text()
等价于原生js中的innerText

获取：
```
$('div').text()
1
```
设置：
不会识别并解析html结构
```
$('div').text('内容')
1
```
- val()
等价于原生js中的value

获取：
```
$('div').val()
1
```
设置：
用来设置表单元素的value值
```
$('div').val('新内容')
1
```
jquery标签左右滚动内容

rar 4星超过75%的资源 30KB

下载

 2、操作类名
- addClass() 添加类
```
$('div').addClass('e')
1
```
- removeClass() 删除类名
```
$('div').removeClass('e')
1
```
- toggleClass() 切换类名
如果本身有这个类名，就是删除，如果没有就是添加
```
$('div').toggleClass('e')
1
```
3、修改样式

css 方法
```
//获取样式
$('选择器').css('样式属性')

//设置样式
$('选择器').css('width','300px')   //'300px'可以写成300

//批量设置样式
$('选择器').css({
    width:xx,
    height:xx
})
1
2
3
4
5
6
7
8
9
10
11
```
4、操作元素属性
- attr()
可以进行设置和获取元素的属性
注意：一般用于操作元素的自定义属性
attr操作的所有属性都会直接出现在该元素的标签身上
```
//获取：
$('div').attr('属性名')
//设置
$('div').attr('a',1)
1
2
3
4
```
- removeAttr()
对元素属性进行删除

jquery纯文字tab标签切换代码

rar 0星超过10%的资源 17KB

下载
```
元素集合.removeAttr('删除的属性名')
1
```
- prop()
设置原生属性时，会直接响应到元素标签上
设置自定义属性时，不会响应到元素标签上，会响应到元素对象身上，即标签上看不到也拿不到，可以通过对象获取
注意：prop方法不能获取标签身上自定义属性，只能获取prop自己设置的自定义属性
```
//获取
$('div').prop('属性名')
//设置
$('div').prop('属性名','属性值')
1
2
3
4
```
- removeprop()
用于删除元素属性
注意：
不能删除原生属性
只能删除由prop方法设置的自定义属性
```
$('div').removeProp('prop设置的自定义属性')
1
```
5、获取元素尺寸

width()、innerWidth()、outerWidth()、outerWidth(true)
height()、innerHeight()、outerHeight()、outerHeight(true)

注意：
- 不管该元素是否隐藏，都能获取到值
- 不管盒子模型是什么状态，拿到的尺寸区域不变(标准盒模型和怪异盒模型)
5、元素偏移量
- offset()
获取元素相对页面左上角的坐标位置
返回值是一个对象类型{top:yyy,left:xxx}
```
$('p').offset()
1
```
- position()
获取该元素的定位位值
如果设置的是right、bottom会自动换算成left、top
```
$('span').position()
1
```
相关阅读:
VSCode里源代码管理出现新旧代码左右的更改对比窗口
 《PyTorch深度学习实践》第十三讲RNN进阶
 使用Minifilter过滤驱动保护文件
 C++ 二维前缀和子矩阵的和
 7.1-卷积神经网络
 CSDN21天学习挑战赛 - 第六篇打卡文章
 基于压缩感知的磁共振成像重建算法研究
 Linux——进程控制（一）进程的创建与退出
 @ControllerAdvice
如何找回误删的文件呢?
原文地址：https://blog.csdn.net/CapejasmineY/article/details/126234617

文章目录

一、什么是jQuery

1、使用

2、jQuery选择器

3、jQuery筛选器

二、使用jQuery

1、jQuery中的三种方法

2、操作类名

3、修改样式

4、操作元素属性

5、获取元素尺寸

5、元素偏移量