jQuery操作form表单（有惊喜）

操作form表单有两个方面：

属性操作：

设置属性

第一个参数表示：要设置的属性名称 第二个参数表示：该属性名称对应的值 例如：

$(selector).attr(“title”, “参数设置”);

获取属性：

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

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

注意：此时，返回指定属性的值

移除属性：

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

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

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

总结一下prop方法：

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

值和内容

val()方法：

作用：设置或返回表单元素的值，例如：input,select,textarea的值 获取匹配元素的值，只匹配第一个元素

$(selector).val();

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

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

text() 方法:

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

$(selector).text();

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

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

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

有一个小的案例为动态输入： 先看一下效果图：

可自行输入文字 ：

so,可以用来表白哦 楼主亲测，可以存表清包 附上源代码：

css部分：

.box{ width: 1000px; text-align: center; margin: 100px auto; } input{ font-size: 30px; } button{ font-size: 30px; } .aaa{ border: 1px solid red; } span{ color: #3bb7ea; }

html部分：

<div class="box"> <div class="box1"> <h1> You want to say: <span></span> </h1> </div> <div class="box2"> <input type="text"> <button>say</button> </div>

js部分：

var str="红鲤鱼绿鲤鱼与驴"; var arr=str.split(""); var str2=""; var num=0; var timer=null; timer =setInterval(function () { if(arr[num]===undefined){ clearInterval(timer); } else{ str2+=arr[num]; num++; // console.log(str2); $("span").text(str2); } },200); $("button").click(function () { $("input").attr("class","aaa"); str=$("input").val(); arr=str.split(""); str2=""; num=0; timer =setInterval(function () { if(arr[num]===undefined){ clearInterval(timer); } else{ str2+=arr[num]; num++; // console.log(str2); $("span").text(str2); } },200) })

别忘了引入jQuery哦~~