jQuery学习笔记(1)

设置和获取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>
View Code

 

你可能感兴趣的:(jquery)