玩明白了吗-- ＞ jQuery(四)
关于明天的事，我们后天就知道了
前言
学完 javaScript 语言再学习 jQuery ，用起来是真的又方便，又舒服，想要学习 javaScript 基础的同学，后续我会在专门的专栏持续更新 javaScript 的知识，今天继续来操作我们的 jQuery 。😏
一、jQuery 属性操作
1.1 元素固有属性值 prop()
元素固有属性值的意思就是元素本身自带的属性。
-
举例
<a href="#"></a> <img src="" alt="">上述 a 标签的 href 属性和 img 标签的 src、alt 属性就是元素本身自带的属性。
语法
-
获取属性语法
prop('属性') -
设置属性语法
prop('属性','属性值')
1.2 元素自定义属性值 attr()
元素自定义属性值意思就是用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index = “1”。
语法
-
获取属性语法
attr('属性') -
设置属性语法
attr('属性','属性值')
该方法也可以获取 H5 自定义属性。
1.3 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构，一旦页面刷新，之前存放的数据都将被移除。
语法
-
附加数据语法
// 向被选元素附加数据 data('name', 'value') -
获取数据语法
// 向被选元素获取数据 data('name')
代码示例
<body>
<span>数据缓存</span>
<script src="./jQuery.js"></script>
<script>
// 数据缓存
$('span').data('name', 'abcd')
console.log($('span').data('name'))
</script>
</body>
注意：还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。
1.4 jQuery 文本属性值
常见操作有三种：html() / text() / val() ；主要针对元素的内容还有表单的值操作。
语法
-
普通元素内容
html()// 获取元素的内容 html() // 设置元素的内容 html('内容') -
普通元素文本内容
text()// 获取元素的文本内容 text() // 设置元素的文本内容 text('文本内容') -
表单的值
val()// 获取表单的值 val() // 设置表单的值 val('内容')
注意：html() 可识别标签，text() 不识别标签。
二、jQuery 元素操作
元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。
2.1 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用遍历。
语法
-
语法1
$('div').each(function (index, domEle) { xxx;}) -
参数说明
each()方法遍历匹配的每一个元素，主要用 DOM 处理，each 每一个。- 里面的回调函数有 2 个参数：index 是每个元素的索引号; domEle 是每个 DOM 元素对象，不是
jQuery对象。 - 若想要使用
jQuery方法，需要给这个 DOM 元素转换为jQuery对象，例：$(domEle)。
-
语法2
$.each(object, function (index, element) { xxx;}) -
参数说明
$each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象。- 里面的函数有 2 个参数：index 是每个元素的索引号， element 遍历内容。
注意：以上方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
代码示例
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var colors = ['red', 'blue', 'green', 'orange']
// each 遍历元素
$('.box div').each(function (index, item) {
// item 是一个 dom 对象，需要转换 $(item)
$(item).css('background-color', colors[index])
})
</script>
</body>
效果如下
2.2 创建、添加、删除
语法
-
创建
// 动态的创建了一个 <li> 标签 $('<li></li>') -
内部添加
// 把内容放入匹配元素内部最后面 element.append('内容') // 把内容放入匹配元素内容最前面 element.prepend('内容') -
外部添加
// 把内容放入目标元素后面 element.after('内容') // 把内容放入目标元素前面 element.before('内容') -
删除元素
// 删除匹配的元素（本身） element.remove() // 删除匹配的元素集合中所有的子节点 element.empty() // 清空匹配的元素内容 element.html('')
三、jQuery 尺寸 & 位置操作
3.1 jQuery 尺寸操作
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度值，只算 width / height |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 ，包含 padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 ，包含 padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值，包含 padding、border、margin |
- 以上参数为空，则是获取相应值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
- 参数可以不必写单位。
代码示例
<body>
<div class="box"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// 获取元素的宽度
console.log($('.box').width())
// 获取元素的宽度，包含内边距
console.log($('.box').innerWidth())
// 获取元素的宽度，包含内边距，边框
console.log($('.box').outerWidth())
// 获取元素的宽度，包含内边距，边框，外边距
console.log($('.box').outerWidth(true))
</script>
</body>
3.2 jQuery 位置操作
语法
offset()：设置或获取元素偏移。offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。- 该方法有 2 个属性
left，top，offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。 - 可以设置元素的偏移:
offset({top: 10,left: 30})。
position()：获取元素偏移。position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。- 该方法有 2 个属性
left，top，position().top用于获取距离定位父级顶部的距离，position().left用于获取距离定位父级左侧的距离。 - 该方法只能获取。
scrollTop() / scrollLeft()：设置或获取元素被卷去的头部和左侧。scrollTop()方法设置或返回被选元素被卷去的头部。- 不写参数是获取，参数为不带单位的数字则是设置被卷去的头部。
代码示例
<body>
<div class="box">
<div class="child"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// 获取相对于文档的偏移坐标
console.log($('.child').offset())
// 获取相对于带有定位的父级元素偏移坐标，如果父级没有定位，则以文档为准
console.log($('.child').position())
// 获取元素被卷去的头部距离
$(window).on('scroll', function () {
console.log($(window).scrollTop())
})
</script>
</body>
没有动人的情话，只有简单的喜欢，一生热情，次次真心。
360集团公司福利 438人发布
