02-认识jQuery及使用方法

最新推荐文章于 2024-05-14 05:37:14 发布

CapejasmineY

最新推荐文章于 2024-05-14 05:37:14 发布

阅读量158

点赞数

分类专栏： ajax及jQuery 文章标签： jquery css css3

本文链接：https://blog.csdn.net/CapejasmineY/article/details/126234617

版权

ajax及jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、什么是jQuery
二、使用jQuery

一、什么是jQuery

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

1、使用

需要在本地下载jquery文件，使用时在文件中引用

<body>
<script src="./jquery/jquery.js"></script>
<script>
//操作文本内容
</script>
</body>

引入jquery文件后，会在全局暴露两个变量$和jQuery，二者是相同的

2、jQuery选择器

选择所有的dom元素

语法：$('选择器')

例如：$('#box')
$('.box')
$('li')

注意：使用选择器返回值为集合类型

3、jQuery筛选器

语法：$('选择器').first()

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

二、使用jQuery

1、jQuery中的三种方法

html()

等价于原生js中的innerHTML
获取:

$('div').html()

设置：
可以识别并解析html结构

$('div').html('<h1>111</h1>')

text()

等价于原生js中的innerText

获取：

$('div').text()

设置：
不会识别并解析html结构

$('div').text('内容')

val()

等价于原生js中的value

获取：

$('div').val()

设置：
用来设置表单元素的value值

$('div').val('新内容')

2、操作类名

addClass() 添加类

$('div').addClass('e')

removeClass() 删除类名

$('div').removeClass('e')

toggleClass() 切换类名

如果本身有这个类名，就是删除，如果没有就是添加

$('div').toggleClass('e')

3、修改样式

css 方法

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

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

//批量设置样式
$('选择器').css({
    width:xx,
    height:xx
})

4、操作元素属性

attr()

可以进行设置和获取元素的属性
注意：一般用于操作元素的自定义属性
attr操作的所有属性都会直接出现在该元素的标签身上

//获取：
$('div').attr('属性名')
//设置
$('div').attr('a',1)

removeAttr()

对元素属性进行删除

元素集合.removeAttr('删除的属性名')

prop()

设置原生属性时，会直接响应到元素标签上
设置自定义属性时，不会响应到元素标签上，会响应到元素对象身上，即标签上看不到也拿不到，可以通过对象获取
注意：prop方法不能获取标签身上自定义属性，只能获取prop自己设置的自定义属性

//获取
$('div').prop('属性名')
//设置
$('div').prop('属性名','属性值')

removeprop()

用于删除元素属性
注意：
不能删除原生属性
只能删除由prop方法设置的自定义属性

$('div').removeProp('prop设置的自定义属性')

5、获取元素尺寸

width()、innerWidth()、outerWidth()、outerWidth(true)
height()、innerHeight()、outerHeight()、outerHeight(true)
在这里插入图片描述
注意：

不管该元素是否隐藏，都能获取到值
不管盒子模型是什么状态，拿到的尺寸区域不变(标准盒模型和怪异盒模型)

5、元素偏移量

offset()

获取元素相对页面左上角的坐标位置
返回值是一个对象类型{top:yyy,left:xxx}

$('p').offset()

position()

获取该元素的定位位值
如果设置的是right、bottom会自动换算成left、top

$('span').position()