jquery第十期:表单的操作

来源：互联网发布：全球电视直播软件编辑：程序博客网时间：2024/06/06 14:34

我们第一个例子是在页面开始，在用户名文本域上出现“请输入明户名”。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>表单操作</title>  <script type="text/javascript" src="jquery-1.10.1.js"></script>  <script type="text/javascript">      $(function()  {  //通过val方法，可以设置表单的值，其参数可以String/ Function/ Array,这里是一个String  $("#username").val("请输入明户名");  });  </script> </head> 用户名:<input type="text" name="username" id="username"/><br/> 密码  :<input type="password" name="password" id="password"/><br/> 性别  :<input type="radio" name="sex">男        <input type="radio" name="sex">女<br/> 爱好  :<input type="checkbox" name="interest" value="Dota">Dota        <input type="checkbox" name="interest" value="LOL">LOL<input type="checkbox" name="interest" value="梦三国">梦三国<input type="checkbox" name="interest" value="英雄三国">英雄三国<br/><input type="button" value="click" id="btn">   <body>  </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>表单操作</title>  <script type="text/javascript" src="jquery-1.10.1.js"></script>  <script type="text/javascript">      $(function()  {   //第一中设置设复选框选中的方法  //$("input[type='checkbox']").attr("checked","checked"); // 第二种设置复选框选中的方法,并且禁用复选框  $("input[type='checkbox']").prop("checked",true);  $("input[type='checkbox']").prop("disabled",true);  });  </script> </head> 用户名:<input type="text" name="username"  id="username"/><br/> 密码  :<input type="password" name="password" id="password"/><br/> 性别  :<input type="radio" name="sex">男        <input type="radio" name="sex">女<br/> 爱好  :<input type="checkbox" name="interest" value="Dota">Dota        <input type="checkbox" name="interest" value="LOL">LOL<input type="checkbox" name="interest" value="梦三国">梦三国<input type="checkbox" name="interest" value="英雄三国">英雄三国<br/><input type="button" value="click" id="btn">   <body>  </body></html>

运行结果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>表单操作</title>  <script type="text/javascript" src="jquery-1.10.1.js"></script>  <script type="text/javascript">      $(function()  {//添加新的option，设置selected为selected$("#province").append("<option value='4' selected='selected'>河南省</option>");//查找选中的元素$("select option:selected");  });  </script> </head> 用户名:<input type="text" name="username"  id="username"/><br/> 密码  :<input type="password" name="password" id="password"/><br/> 性别  :<input type="radio" name="sex">男        <input type="radio" name="sex">女<br/> 爱好  :<input type="checkbox" name="interest" value="Dota">Dota        <input type="checkbox" name="interest" value="LOL">LOL<input type="checkbox" name="interest" value="梦三国">梦三国<input type="checkbox" name="interest" value="英雄三国">英雄三国<br/> 省份：<select id="province">         <option>请选择省份</option>         <option value="1">黑龙江</option> <option value="2">河北</option> <option value="3">山东</option>       </select><br>   <input type="button" value="click" id="btn">   <body>  </body></html>

运行结果：