jquery属性操作 val（），attr()，html(), text()

最新推荐文章于 2024-07-22 17:45:58 发布
最新推荐文章于 2024-07-22 17:45:58 发布
阅读量686 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42270374/article/details/92100383
版权

JavaScript test() 方法

用法:test()用来检测一个字符串是否匹配某个模式（检索字符串）

<script type="text/javascript">
var str = "Visit W3School";
var patt1 = new RegExp("W3School");

var result = patt1.test(str);

document.write("Result: " + result);
</script>
Result: true
RegExpObject.test(string)（字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。）

jQuery 属性操作 - val() 方法

$(selector).val(value) value规定被选元素的新内容。

用法：val() 方法返回或设置被选元素的值

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

返回 Value 属性

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("input:text").val());
  });
});
</script>
</head>
<body>Firstname: <input type="text" name="fname" value="Bill" /><br />
Lastname: <input type="text" name="lname" value="Gates" /><br /><br />
<button>获得第一个文本域的值</button>
</body>

设置 Value 属性的值

$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val("Bill Gates");
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" /></p>
<button>设置文本域的值</button>

使用函数设置 Value 属性的值

$(selector).val(function(index,oldvalue))
  • index - 可选。接受选择器的 index 位置。
  • oldvalue - 可选。接受选择器的当前 Value 属性。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val(function(n,c){
      return c + " Gates";
    });
  });
});
</script>
</head>

<body>
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
</body>

jQuery 属性操作 - attr() 方法

attr() 方法设置或返回被选元素的属性值。

1.返回属性值

返回被选元素的属性值。

$(selector).attr(attribute)（规定要获取其值的属性。）

根据该方法不同的参数，其工作方式也有所差异。

$(document).ready(function(){
  $("button").click(function(){
    alert("Image width " + $("img").attr("width"));
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>返回图像的宽度</button>

2.设置属性/值

设置被选元素的属性和值。

$(selector).attr(attribute,value) attribute：规定属性的名称。value：规定属性的值

$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width","180");
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>

3.使用函数来设置属性/值

设置被选元素的属性和值。

$(selector).attr(attribute,function(index,oldvalue))     function(index,oldvalue)：规定返回属性值的函数。该函数可接收并使用选择器的 index 值和当前属性值。ttribute：规定属性的名称

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width",function(n,v){
      return v-50;
    });
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />

4.设置多个属性/值对

为被选元素设置一个以上的属性和值。

$(selector).attr({attribute:value, attribute:value ...})attribute:value规定一个或多个属性/值对。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr({width:"50",height:"80"});
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 和 height 属性</button>

<button>减少图像的宽度 50 像素</button>

jQuery 文档操作 - html() 方法

html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数，则返回被选元素的当前内容。

1.返回元素内容

当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

$(selector).html()

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").html());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>

2.设置元素内容

当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

$(selector).html(content) content规定被选元素的新内容。该参数可包含 HTML 标签。(子标签，则把子标签本身和子标签内的文本一起打印这个和js的innerHTML）

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").html("Hello <b>world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
 

3.使用函数来设置元素内容

使用函数来设置所有匹配元素的内容。

$(selector).html(function(index,oldcontent))

index - 可选。接收选择器的 index 位置。

oldcontent - 可选。接收选择器的当前内容。

$(document).ready(function(){
  $("button").click(function(){
    $("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>改变 p 元素的内容</button>

jQuery 文档操作 - text() 方法

text() 方法方法设置或返回被选元素的文本内容。

$(selector).text()

1.返回文本内容

当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").text());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">获得 p 元素的文本内容</button>

2.设置文本内容

当该方法用于设置值时，它会覆盖被选元素的所有内容。

$(selector).text(content) content:规定被选元素的新文本内容。注释：特殊字符会被编码。

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").text("Hello world!");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变所有 p 元素的文本内容</button>

3.使用函数设置文本内容

使用函数设置所有被选元素的文本内容。

$(selector).text(function(index,oldcontent))

规定返回被选元素的新文本内容的函数。

  • index - 可选。接受选择器的 index 位置。
  • html - 可选。接受选择器的当前内容。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变所有 p 元素的文本内容</button>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

^smile
关注
jquery attr().html
weixin_42193179的博客
09-21 211
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery attr()</title> <script src="https://www.w3school.com.cn/jquery/jquery.j...
jQuery属性操作之html属性操作
weixin_33711647的博客
08-20 92
jQuery的属性操作， 是对html文档中的属性进行读取、设置和移除操作。比如，attr()、 removeAttr()。 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1.1 使用attr()获取值 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 &l...
JQuery（二）val()、html()、text()
最新发布
weixin_47276069的博客
07-22 293
ele.empty()：清空元素内部所有内容（文本或者子元素），保留当前元素。html(值)：为页面元素设置html代码。如果有标签，则进行解析。html():获取页面元素的html代码，如果有标签，一并获取。B.appendTo(A) :将B插入到A内部后面。B.prependTo(A):将B插入到A内部前面。A.append(B) :将B插入到A内部后面。A.prepend(B):将B插入到A内部前面。val():获取页面元素的value属性值。方式一：$(ele).each(fn);
jQuery对象 html(),css(),attr()
weixin_40714799的博客
03-05 287
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
jquery文本和值text、html、attr、val
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-29 2454
全栈工程师开发手册 （作者：栾鹏） jquery系列教程2-DOM操作全解 jquery文本显示jquery文本显示函数包括text、html、attr，具体功能如代码中注释。代码如下：$cr.text(); //DOM操作中参数为空时表示读取 $cr.text("设置的值"); //参数有值时表示设置 $cr.text(function(i,origText){ //参数为函数时表示根据该元素在
jQuery操作attr、prop、val()/text()/html()、class属性
10-16
attr和prop方法用于操作属性，val()、text()和html()用于操作值和内容，而class方法则用于操作样式类。通过实例代码和解释，相信大家能够更好地理解和应用这些方法来处理网页元素的动态交互。如果对文中内容有任何...
jquery属性,遍历,HTML操作方法详解
11-22
1. **属性操作**： - `attr(name)`：获取指定属性`name`的值，如`$("element").attr("id")`。 - `attr(name, value)`：设置指定元素的属性`name`为`value`，如`$("element").attr("class", "newClass")`。 - `...
详谈jQuery中使用attr(), prop(), val()获取value的异同
10-19
首先，`attr()` 方法主要用于获取或设置元素的HTML属性。例如，当我们在HTML中定义`<input type="text" value="123">`时，`value`属性是静态地存储在HTML结构中的。如果在JavaScript中使用`attr("value")`来获取这个...
jQuery 操作 HTML 元素和属性的方法
10-17
在jQuery中，操作HTML元素和属性是其核心功能之一，使得JavaScript代码更加简洁高效。这里主要介绍几个关键的方法，包括获取和设置元素内容以及获取和修改元素属性。 1. 获取HTML元素的内容和属性： (1) `text()`...
jQuery常用属性方法大全 attr(),val()
weixin_30522095的博客
09-30 195
@@@@属性篇： 写作本篇文章的意义：jQuery的教程千千万，却没有英文版的API讲的系统、到位，一些话用中文翻译过来味道就变了，所以我将英文版的API的一些常用的方法单独提出来放在这里，并用自己的实践+理解陈述，在大家懒得查看官网的时候可以做为参考。 属性的作用的原文描述：These methods get and set DOM attributes of elements.即用来获取/...
jquery关于val，attr的一点总结
liquantong的博客
12-02 1416
制作了一个输入框和textarea的上移下移功能，不过我并没有将控件移动，只是移动了下里边的值。 首先是JS 之后再测试的时候发现一点问题，在第一次向空间中输入值之后，点击上下移动，这样是没有问题的（这时候我使用的是js的setAttribute将上下相邻的输入框的值进行对调），但是当我把输入框里边的值手动改掉之后，再点击上移或者下移按钮，就出现了问题。经过debug之后确定时在赋值的时候出的
JQuery中，val()、prop()、attr() 使用场景
qq_52089423的博客
08-01 194
JQuery中，val()、prop()、attr() 使用场景
JQuery的attr 与 val区别及使用
weixin_30407099的博客
01-21 229
JQuery的attr 与 val区别 取值：$('#name').val() 根据标签id直接去value值； 　　　$('#name').attr('data-name')可根据标签属性值取属性值； <input data-name="user" id="name" value="aaaa" /> $('#name').val() ;/* 'aaaa'*/ $(...
jquery中val()和attr()的区别
weixin_38203203的博客
12-06 1792
val() 能够取到 针对text，hidden可输入的文本框的value值。 而 attr('value') 可以取到html元素中所设置的属性 value的值，不能获取动态的如input type="text" 的文本框手动输入的值。...
JQuery中 attr 和 val 的区别
weixin_42453829的博客
03-16 1141
最近在项目中需要实现在 A 和 B 输入框输入数字后，自动将A和B的运算结果赋给 C 输入框中，由于刚接触JQuery且知道 attr() 和 val（）都可以取值和赋值，所以这两个方法也是随便用，直到出了问题才发现事情并不简单.... 先说结论再贴代码分析 1.val()赋值不改变input标签的value属性 ...
val()、text()、html()、attr()详解
chiyu30461的专栏
07-11 143
设置内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 <!DOCTYPE html> <...
JQuery属性操作(html()、text()、val()、attr()、prop() )
m0_59860403的博客
11-02 350
html() 它可以设置和获取起始标签和结束标签中的内容 跟dom属性innerHTML一样 $("div").html();//获取 $("div").html("<h1>这是html设置</h1>");//设置 text() 它可以设置和获取起始标签和结束标签中的文本 跟dom属性innerText一样 $("div").text();//获取 $("div").text("<h1>这是html设置</h1>");//设置 v...
jQuery的各种属性运用——Val() 、属性attr、元素的添加after(后)与before(前)、元素的删除、操作CSS类、导航、Ajax
m0_50272558的博客
10-05 386
Val() 获取或者设置value值 属性attr 获取或更改元素的属性值 元素的添加 (1) 在元素最后面添加 (2) 在元素最前面添加 ** after(后)与before(前) ** After添加会在元素后面添加，不会成为其子元素 Before相反 元素的删除 Remove和empty 区别: remove 是删除了内容与格式，即全部删除，empty 仅仅清除内容，格式还在 Remove过滤删除 在p标签中删除所有class=px的元素($(’ p’ ).remove(".px")???
jquery属性操作之html，text，val方法
weixin_30547797的博客
06-30 83
$().attr()　　结果是value或undefined $().prop()　　结果是true或false 固有属性用prop，自定义用attr $().addclass()　　$().removeclass() $().html()　　$().text()　　加参数就是覆盖 有标签用html，文本都可用html，text $().val()　val是固有属性，form表单有...
jQuery操作HTML：内容与属性的获取
2. 操作HTML属性 jQuery 也提供了一些方法来处理 HTML 元素的属性： - `attr(attributeName)`：获取指定元素的属性值。例如，`$("#element").attr("class")` 将返回该元素的 class 属性值。 - `attr(attributeName...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值