JQuery学习之路Part5：DOM元素内容和属性值的获取和设置

逃离我推掉我的手 2023-07-12 09:27 60阅读 0赞

一、获取/设置内容

1、text()

获取所选元素的文本内容
获取双标签文本内容
不往方法里传入参数 即为获取

例：

  1. $("#btn1").click(function(){
  3.     alert("Text: " + $("#test1").text());
  4. });

设置所选元素的文本内容
设置双标签文本内容
往方法里传入要设置的文本内容

例：

  1. $("#btn1").click(function(){
  3.     $("#test1").text("Hello world!");
  4. });

2、html()

不同于val() 该方法获取的时候 会将HTML标记也一并获取过来
获取所选元素的内容（包括 HTML 标记）

例：

  1. $("#btn1").click(function(){
  3.     alert("HTML: " + $("#test1").html());
  4. });

设置所选元素的内容（包括 HTML 标记）

例：

  1. $("#btn1").click(function(){
  3.     $("#test1").html("<b>Hello world!</b>");
  4. });

3、val()

获取表单字段的值
获取单标签文本内容
获取来的就是原原本本的内容 不包含HTML标记

例：

  1. $("#btn1").click(function(){
  3.     alert("Value: " + $("#test1").val());
  4. });

设置表单字段的值
设置单标签文本内容

例：

  1. $("#btn1").click(function(){
  3.     $("#test1").val("Cool Boy");
  4. });

二、获取/设置属性值

1、prop()

对于HTML元素本身就带有的属性(不直接出现在标签中的属性)
对于布尔(boolean)类型属性 应使用prop()方法
例：[checked] [selected] [desabled]

获取指定属性值
语法：prop(属性名)

例：

  1. $("button").click(function(){
  3.     alert($("#ck1").prop("checked"));
  4. });

设置指定属性值
语法：prop(属性名,属性值)

例：

  1. $("button").click(function(){
  3.     $("#ck1").prop("checked",true);
  4. });

设置多个属性值
例：

  1. $("button").click(function(){
  3.     $("#ck1").prop({
  5.         "href" : "https://www.baidu.com",
  6.         "title" : "百度"
  7.     });
  8. });

2、attr()

对于HTML元素中直接出现在标签中的属性

获取指定属性值
语法：attr(属性名)

例：

  1. $("button").click(function(){
  3. alert($("#ck1").attr("href"));
  4. });

若有多个同名对象 则输出的是第一个对象的属性

设置指定属性值

  1. 语法：attr(属性名,属性值)

例：

  1. $("button").click(function(){
  3.     $("#ck1").attr("href","https://www.baidu.com");
  4. });

若无某属性 则自动添加该属性

设置多个属性值
语法：

  1. .attr({
  3.     属性名1:"属性值1,
  4.     属性名2:"属性值2,
  5.     属性名3:"属性值3,
  6. })

例：

  1. $("button").click(function(){
  3.     $("#ck1").attr({
  5.         "href" : "http://www.baidu.com",
  6.         "title" : "百度"
  7.     });
  8. });

若无某属性 则自动添加该属性

发表评论

表情：
评论列表 （有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读