小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

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

作者：小小林熬夜学编程 | 2024-02-18 21:36:43

踩

attr()和html()

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 属性

设置 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 属性。

<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：规定属性的名称

4.设置多个属性/值对

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

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

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

jQuery 文档操作 - html() 方法

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

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

1.返回元素内容

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

$(selector).html()

2.设置元素内容

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

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

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 标记）

2.设置文本内容

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

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

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

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

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/110728