JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)二

最新推荐文章于 2019-07-10 18:23:49 发布

thinker28754

最新推荐文章于 2019-07-10 18:23:49 发布

阅读量719

点赞数

分类专栏： jquery 文章标签： jquery javascript asp.net function button input

本文链接：https://blog.csdn.net/thinker28754/article/details/3521526

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

5). 根据条件查询对象元素集合

1 <head runat="server">
2     <title>根据条件获取页面中的元素对象集合</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4         
5         <script type="text/javascript">
6         //获取ul中的li
7         function GetLiElementHtml()
8         {
9             liS = $("ul li");
10             //遍历元素
11             for(var i = 0; i < liS.length; i++)
12             {
13                 alert(liS.eq(i).html());
14             }
15         }
16         //获取ul中的li, 且li的class="k"
17         function GetLiElementHtmlWithClassIsK()
18         {
19             liS = $("ul li.k");
20             //遍历元素
21             for(var i = 0; i < liS.length; i++)
22             {
23                 alert(liS.eq(i).html());
24             }
25         }
26         //取得含有name属性的元素的值
27         function GetElementValueWithNameProperty()
28         {
29             alert($("input[@name]").eq(1).val());
30             alert($("input[@name]").eq(2).val());
31         }
32         //根据属性值获取元素
33         function GetTextBoxValue()
34         {
35             alert($("input[@name=TextBox1]").val());
36         }
37         //根据属性类型和状态获取元素
38         function GetSelectRadioValue()
39         {
40             alert($("input[@type=radio][@checked]").val());
41         }
42         </script>
43 </head>
44 <body>
45     <form id="form1" runat="server">
46     <div>
47         <ul>
48             <li>Hello! ChengKing.</li>
49             <li class="k">Hello! Rose.</li>
50             <li class="k">Hello! King.</li>
51
52         </ul>
53         <input type="button" value="获取所有li元素内容" οnclick="GetLiElementHtml();" />
54         <input type="button" value="获取所有li元素[且它的class='k']内容" οnclick="GetLiElementHtmlWithClassIsK();" />
55         <br /><br /><br />
56         <input name="TextBox1" type=text value="Hello, King!" />
57         <input name="Radio1" type=radio value="Hello, Rose!" checked=checked />
58         <br />
59         <input type="button" value="取得含有name属性的元素的值" οnclick="GetElementValueWithNameProperty();" />
60         <input type="button" value="取得name=TextBox1的文本框的值" οnclick="GetTextBoxValue();" />
61         <input type="button" value="取得选中的单选框的值" οnclick="GetSelectRadioValue();" />
62
63     </div>
64     </form>
65 </body>

6). Document.Ready方法示例

1 <head runat="server">
2     <title>Document.Ready方法示例</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4     <script language="javascript">
5         function Init1()
6         {
7             alert('Document.body.onload事件执行!');
8         }
9         function Init2()
10         {
11             alert('$(document).ready事件执行!');
12         }
13
14     </script>
15 </head>
16 <body>
17     <form id="form1" runat="server">
18     <div>
19         <script language="javascript">
20             //ready方法完整写法
21             $(document).ready(function()
22             {
23                 Init2();
24             });
25             //ready方法简写
26 //            $(function() {
27 //                Init2();
28 //            });
29             document.body.οnlοad=Init1;
30         </script>
31     </div>
32     </form>
33 </body>

7). Html方法示例

1 <head runat="server">
2     <title>使用Html方法</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4     <script language=jscript>
5         $(document).ready(function()
6         {
7             $("ul").find("li").each(function(i)
8             {
9                 $(this).html( "This is " + i + "!");
10             });
11         })
12         function GetLisValue()
13         {
14              liS = $("ul li");
15             //遍历元素
16             for(var i = 0; i < liS.length; i++)
17             {
18                 alert(liS.eq(i).html());
19             }
20         }
21     </script>
22 </head>
23 <body>
24     <form id="form1" runat="server">
25     <div>
26         <ul>
27             <li></li>
28             <li></li>
29         </ul>
30         <input type=button value="得到所有li的值" οnclick="GetLisValue();" />
31     </div>
32     </form>
33 </body>

8). 元素事件注册以及实现示例

1 <head runat="server">
2     <title>给元素注册事件及实现事件</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4     <script language=jscript>
5         $(document).ready(function()
6         {
7             $("#button1").click(function() {
8                 alert('Button Element ClienEvent Runned.');
9             });
10         })
11
12     </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="button1" type=button value="单击, 此按钮被设置了单击事件!" />
18     </div>
19     </form>
20 </body>

thinker28754

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)二

5). 根据条件查询对象元素集合 1 2 根据条件获取页面中的元素对象集合 3 4 5 6 //获取ul中的li 7 function GetLiElementHtml() 8 { 9 liS = $("ul li");
复制链接

扫一扫