JQuery笔记三：操作内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易

捕获

获得内容 - text()、html() 以及 val()

html() - 设置或返回所选元素的内容（包括 HTML 标记）
text() - 设置或返回所选元素的文本内容 (不包括 HTML 标记)
val() - 设置或返回表单元素value字段的值

// 获取div元素中的所有内容
$('div').html();

// 获取div元素中的文本内容，排除标签
$('div').text();

// 获取input元素的value属性值
$('input').val();

获取属性 - attr()

// 获取input标签的value属性值
$('input').attr('value');

// 获取a标签的href属性值
$('a').attr('href');

设置内容和属性

设置内容 - text()、html() 以及 val()

获取内容和设置内容使用的函数是相同的。
只有参数的区别而已。

// 修改标签内容
$('div').html('我是一个div哦');

// 修改标签内容
$('div').text('我是最大的标题');

// 修改value属性
$('input').val('你说我是什么就是什么');

text()、html() 以及 val() 的回调函数

text()、html() 以及 val()，同样拥有回调函数。
回调函数有两个参数：1.被选元素列表中当前元素的下标 2.以及原始值
然后以函数新值返回您希望使用的字符串。

$('p').text(function (i, oldValue) {
    // i: 代表当前类型元素的下标
    // oldValue： 代表原始值
    // 想要显示的内容通过返回值设置
    return "当前元素下标： " + i + "  原始值：" + oldValue + "  我是新值";
});

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

// 通过 attr() 函数修改一个属性 (注意中间用逗号分隔)  
$('a').attr('href', 'https://www.baidu.com');

// 通过 attr() 函数修改多个属性 (使用 大括号 进行包裹，属性与值通过 冒号 分隔，属性之间通过 逗号 分隔)
$('a').attr({
    'href': 'http://www.lidaze.com',
    'title': '李大泽'
});

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。
回调函数有两个参数：1.被选元素列表中当前元素的下标 2.以及原始值
然后函数新值返回您希望使用的字符串。

$('a').attr('href', function (i, oldValue) {
    // i: 代表当前类型元素的下标
    // oldValue： 代表原始值
    // 想要设置的内容通过返回值设置
    return i + " " + oldValue + "新值";
});

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append() 拼接到最后

jQuery append() 方法在被选元素的结尾插入内容。

$('a').append("拼接上的内容");
$('ol').append("<li>新的一条数据</li>");

prepend() 插入到最前

jQuery prepend() 方法在被选元素的开头插入内容。

$('ol').prepend('<li>插入到第一条数据的位置</li>');

通过 append() 和 prepend() 方法添加若干新元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素

var li1 = "<li> 1 </li>";
var li2 = "<li> 2 </li>";
var li3 = "<li> 3 </li>";

// append() 函数同时接受多个参数
$('ul').append(li1, li2, li3);

// prepend() 函数同时接受多个参数
$('ul').prepend(li1, li2, li3);

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容
jQuery before() 方法在被选元素之前插入内容

// 在ul标签之前添加内容
$('ul').before("在之前");

// 在标签之后添加内容
$('ul').after("在之后");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素

var p1 = "<h1>喜欢的运动</h1>";
var p2 = "<h1>喜欢的食物</h1>";

// 在之前同时拼接多个
$('ul').before(p1, p2);

// 在之后同时拼接多个
$('ul').after(p1, p2);

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

// 移除当前元素
$('li').remove();

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

// 移除ul元素的全部子元素
$('ul').empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

// 删除所有class=italic的p标签
$("p").remove(".italic");

获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass() 方法

向元素添加 class 属性

CSS代码：
.bgColor {
    background-color: blue;
}
.font {
    background-color: red;
}

JQuery代码：
$('li').addClass('bgColor');
$('ul').addClass('font');

// 同时添加多个样式 (选择器名称中间以空格进行分隔)
$('li').addClass("bgColor font");;

removeClass() 方法

从元素中删除指定的 class 属性

// 移除li标签的样式
$('li').removeClass('bgColor');

toggleClass() 方法

对被选元素进行添加/删除类的切换操作

// 既有添加，也有移除
$('input').click(function () {
    $('li').toggleClass('blue');
});

css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

// 获取li元素的backgroundColor属性的值
$('li').css('backgroundColor')

设置 CSS 属性值

// 设置p元素的background属性值
$('li').css('backgroundColor', 'red');
$('li').css('background-color', 'cyan');

注意：属性名backgroundColor和background-color写法都是可以的

同时设置多个 CSS 属性值

// 参数使用大括号进行包裹
// 属性名称和值之间使用 冒号 分隔
// 属性之间使用 逗号 分隔
$("p").css({
    "background-color": "yellow",
    "font-size": "200%"
});

尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

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

jQuery 尺寸

width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

$('div').width();

$('div').height();

innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）

$('div').innerWidth();

$('div').innerHeight();

outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）

$('div').outerWidth();

$('div).outerHeight();

天涯海角路

JQuery笔记三 ：操作内容和属性

捕获