首页 前端知识 jQuery - 获取内容和属性

jQuery - 获取内容和属性

2024-03-05 09:03:34 前端知识 前端哥 160 645 我要收藏

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

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

设置属性 - attr()

设置或返回被选元素的属性值,attr(name|properties|key,value|fn)

返回文档中所有图像的src属性值:  $("img").attr("src");

为所有图像设置src和alt属性:  $("img").attr({ src: "test.jpg", alt: "Test Image" });

删除属性 - removeAttr()

从每一个匹配的元素中删除一个属性

将文档中图像的src属性删除:  $("img").removeAttr("src");

添加元素

用于添加新内容的四个 jQuery 方法:

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

$("p").append("追加文本");

$("p").prepend("在开头追加文本");

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

删除元素

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

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

$("#div1").remove();

$("#div1").empty();

获取 - prop()

获取在匹配的元素集中的第一个元素的属性值,prop(name|properties|key,value|fn)

参数name 描述:选中复选框为true,没选中为false

jQuery 代码:   $("input[type='checkbox']").prop("checked");

参数properties 描述:禁用页面上的所有复选框。

jQuery 代码:  $("input[type='checkbox']").prop({disabled: true});

参数key,value 描述:禁用和选中所有页面上的复选框。

jQuery 代码:
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);

参数key,回调函数 描述:通过函数来设置所有页面上的复选框被选中。

jQuery 代码:
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3282.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!