第83天：jQuery中操作form表单

Posted 2020-10-14 半指温柔乐

操作form表单

1、 属性操作

设置属性：

// 第一个参数表示：要设置的属性名称

// 第二个参数表示：该属性名称对应的值

$(selector).attr(“title”, “传智播客”);

获取属性：

// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时，返回指定属性的值

移除属性：

// 参数为：要移除的属性的名称

$(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态，而不是改变的html属性。例如：input和button的disabled特性，以及checkbox的checked特性。

细节参考：http://api.jquery.com/prop/

2、 值和内容

val()方法：

作用：设置或返回表单元素的值，例如：input,select,textarea的值

// 获取匹配元素的值，只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”); 

text() 方法:

作用：设置或获取匹配元素的文本内容

//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）

$(selector).text();

//设置操作带参数，参数表示要设置的文本内容

// 如果设置的内容包含html标签（<span>我要动态创建span，这时候行吗？</span>），那么text这个方法会把他们当作文本内容输出，而不会创建元素。这个text()和html()方的主要区别

$(selector).text(“我是内容”);

3、val()、text()和html()的区别

 1 <script>
 2         $(function(){
 3             //val()
 4             alert($("input").val());//val(),获取标签中的value值的内容
 5             $("input").val("我是刚刚赋值的input");
 6             //text()
 7             alert($("div").text());//获取双闭合标签中的文本,不识别标签
 8             $("div").text("我是刚刚赋值的div");
 9             //html()
10             alert($("div").html());//获取双闭合标签中的文本值，识别标签
11             $("div").html("<li>我是html赋值的</li>")
12 
13         })
14     </script>