jQuery（二）jQuery属性操作
一、jQuery属性操作
1、获取和设置元素本身自带的属性
- 获取属性语法： prop(‘属性’)
- 设置属性语法： prop(‘属性’，‘属性值’)
2、 获取和设置元素的自定义属性
- 获取自定义属性语法：attr()
- 设置自定义属性语法： attr(‘属性’，‘属性值’)
3、获取元素上 data-* 开头的自定义属性
- 语法:data()；
- 设置自定义属性语法： data(‘属性’，‘属性值’)
- 注意：
（1）修改的数据都保存在内存中
（2）不能修改已经存在的自定义属性
（3）底层使用闭包 保存在函数作用域中
// 1.1 操作表单元素上的 type 类型和 checked 选中状态
$('input').eq(0).prop('type', 'password');
$('input').eq(1).change(function() {
console.log($(this).prop('checked'));
});
// 2. 获取和设置元素的自定义属性: attr()
console.log($('div').attr('foo', 'world'));
// 3. 获取元素上 data-* 开头的自定义属性: data()
console.log($('div').data('index')); //参数可以省略data-,获取的数据是数据类型的
// 4. 设置元素储存在内存中的数据: data()，不能修改已经存在的自定义属性
$('div').data('index', '112'); //修改的数据都保存在内存中
console.log($('div').data('index'));二、jQuery 文本属性值
1、获取和设置元素中的带有 html 标签的内容
- 语法：html()
- 直接覆盖原内容
2、获取和设置元素中的纯文本内容
- 语法: text()
3、获取和设置表单元素的值
- 语法： val()
console.log($('div').html());
$('div').html('<h1>123</h1>');
console.log($('div').text());
$('h1').text('hello');
console.log($('input', 'value'));
$('input').val('world')三、jQuery元素操作
1、方法：jq对象.each(callback)
- 第一个参数表示索引号，第二个数值表示数据
$(function() {
var arr = ['red', 'gold', 'skyblue', 'greenyellow']
// jq对象.each(callback) 方法快速遍历一组 jq 元素
$('div').each(function(index, item) { //第一个参数表示索引号，第二个数值表示数据
console.log(index, '==>', item);
// $(item).hide();//使用jq方法，必须将item包起来
//给每个div设置不同的背景颜色
$(item).css('background', arr[index]);
})
})2、 $.each(obj, callback) 方法
- 此方法可以用于遍历任何对象，不仅仅是元素集合，数组、对象、伪数组都可以
- 一般用来处理数据, 遍历迭代对象
$.each($('div'), function(index, item) {
console.log($(item).text());
});
var arr = [1, 4, 5, 6];
$.each(arr, function(index, item) {
console.log(item);
})
var obj = {
name: '567',
height: 123,
};
$.each(obj, function(index, item) {
console.log(index, '==>', item);
});- 使用 $.each() 方法求出所有 li 中的数值和
var sum = 0;
$.each($('div'), function(index, item) {
sum += parseInt($(item).text())
})
console.log(sum);3、创建、添加、删除
3.1、创建元素
- 创建任意的 html 片段
var div = $(`<div style='background:skyblue;height:20px'>
<span>hello</span>
</div>`);
console.log(div[0]);
var li = $('<li>hello world</li>')3.2、添加到页面
- 追加到所有子元素的末尾: append()
// $('ul').append(li);
$('ul').append('<li>hello world</li>');- 添加到所有子元素的开头: prepend()
$('ul').prepend(li)- 添加到某个元素的前面: before()
$('li').eq(2).before(li);- 添加到某个元素的后面: after()
$('li').eq(1).after(li);3.3、删除元素
- 删除当前元素（包括自己） remove()
$('div').remove();- 删除当前元素内部的所有内容（不包括自己） empty()
$('div').empty();四、jQuery 尺寸、位置操作
1、 jQuery 获取元素尺寸操作
- 获取元素本身宽高: width() ==> content
console.log($('.box').width());
console.log($('.box').height());- 获取元素本身包括内边距的宽高: innerWidth() ==> content + padding
console.log($('.box').innerWidth());- 获取元素除了外边距之外的宽高: outerWidth() ==> content + padding + border
console.log($('.box').outerWidth());- (了解)获取元素包括外边距的宽高: outerWidth(true) ==> content + padding + border + margin
console.log($('.box').outerWidth(true));- 设置元素的宽高: 直接在方法的括号中传递第二个参数
$('.box').width(300);
$('.box').height(300);2、 jQuery 位置操作
- 获取元素距离**页面(文档)**左侧和顶部的距离: offset()
- 注意：这里的top和left是属性，不是方法，不能加小括号
console.log($('.son').offset().left);
console.log($('.son').offset().top);- 设置元素在页面中的位置: offset()
$('.son').offset({
left: 100,
top: 100
})- 获取元素相对定位父级元素的左侧和顶部的距离: position()
- 注意：position 方法不能设置元素的偏移位置
console.log($('.son').position().left);
console.log($('.son').position().top);- 可以用css方法设置样式
$('.son').css({
left: 80,
top: 80
})3、jQuery 获取被卷去的头部操作
// 1. 获取元素中的内容被卷去的高度
$('.box').scroll(function() {
console.log($(this).scrollTop());
});
// 2. 获取整个页面内容被卷去的高度
$(window).scroll(function() {
console.log($(this).scrollTop());
});4、设置元素滚动到指定位置
- 无动画效果：scrollTop(target)
- 带动画效果： animate()
- 注意: 给整个页面做动画的元素不能是 window 对象, 固定使用 $(‘html, body’)
$(window).scroll(function() {
// 当页面滚动超过box盒子距离页面顶部距离时，显示返回顶部按钮
if ($(this).scrollTop() > $('.box').offset().top) {
$('.goTop').show()
} else { //否则隐藏返回按钮
$('.goTop').hide()
}
});
// 为返回按钮绑定点击事件
$('.goTop').click(function() {
$('body,html').animate({
scrollTop: 0
})
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
