jQuery学习笔记(1)

浏览数：18 / 时间：2015年06月09日

设置和获取HTML,文本和值

val()方法:

1.单选框

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5         $(function () {
 6 
 7             //$(":radio").val(["radio3"]);
 8 
 9             //另一种方法
10             $("[value=radio3]:radio").attr("checked","true");
11 
12         });
13     
14     
15     </script>
16     <title></title>
17 </head>
18 <body>
19     <form id="form1" runat="server">
20     <div>
21         <input type="radio" value="radio1" />单选1
22         <input type="radio" value="radio2" />单选1
23         <input type="radio" value="radio3" />单选3
24     </div>
25     </form>
26 </body>
27 </html>

View Code

2.复选框

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5         $(function () {
 6 
 7             $(":checkbox").val(["ck3", "ck2"]);
 8 
 9             //另一种方法
10             $("[value=ck4]:checkbox").attr("checked", "true");
11         });
12     
13     
14     </script>
15     <title></title>
16 </head>
17 <body>
18     <form id="form1" runat="server">
19     <div>
20         <input type="checkbox" value="ck1" />多选1
21         <input type="checkbox" value="ck2" />多选2
22         <input type="checkbox" value="ck3" />多选3
23         <input type="checkbox" value="ck4" />多选4
24     </div>
25     </form>
26 </body>
27 </html>

View Code

3.单选下拉框

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5         $(function () {
 6 
 7             //$("#single").val("选择2号");
 8 
 9             //另一种方法
10             $("#single option:eq(2)").attr("selected","true");
11 
12         });
13     
14     
15     </script>
16     <title></title>
17 </head>
18 <body>
19     <form id="form1" runat="server">
20     <div>
21         <select id="single">
22             <option>选择1号</option>
23             <option>选择2号</option>
24             <option>选择3号</option>
25         </select>
26     </div>
27     </form>
28 </body>
29 </html>

View Code

4.多选下拉框

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5         $(function () {
 6 
 7             $("#multiple").val(["选择3号", "选择4号"]);
 8 
 9         });
10     
11     
12     </script>
13     <title></title>
14 </head>
15 <body>
16     <form id="form1" runat="server">
17     <div>
18         <select id="multiple" multiple="multiple" style="height: 120px;">
19             <option selected="selected">选择1号</option>
20             <option>选择2号</option>
21             <option>选择3号</option>
22             <option>选择4号</option>
23             <option selected="selected">选择5号</option>
24         </select>
25     </div>
26     </form>
27 </body>
28 </html>