當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)
生活随笔
收集整理的這篇文章主要介紹了
JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
(一).概述
?
現在有好多比較優秀的客戶端腳本語言組件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不錯, 最近研究了一下 jQuery,在學習時順便整理了一個教程, 后面會有示例代碼下載鏈接.
jQuery是JavaScript語言的一個新的資源庫(框架) ,它能快速,簡潔的使用HTML documents, handle events, perform animations,并且能把Ajax交互應用到網頁,jQuery能夠改變你書寫JavaScript的方式.
(二).預備條件
本文章中所有示例都是基于Asp.net 2.0運行環境.
不需要安裝操作, 只需要把jQuery腳本文本引入頁面, 即可使用jQuery這個強大組件的功能, 如下:
(三).代碼示例
1. 訪問頁面元素
?2?????<title>訪問元素</title>
?3?????<script?src=Resources\js\jquery-1.2.1.js?type="text/javascript"></script>?
?4?????????<!--將jQuery引用進來-->
?5?????????<script?type="text/javascript">
?6?????????function?GetElement()
?7?????????{
?8?????????????//< summary>通過ID獲取元素TextBox1的客戶端Dom對象</summary>??? ?????????????????????
?9?????????????tb?=?$("#<%=?TextBox1.ClientID?%>")[0];???????//1.?通過索引獲取Dom對象????
10?????????????tb?=?$("#<%=?TextBox1.ClientID?%>").eq(0)[0];?//2.?通過eq,?eq(0)獲取的是JQuery對象,?再通過索引獲取Dom對象.
11?????????????tb?=?$("#<%=?TextBox1.ClientID?%>").get(0);???//3.?通過get方法獲取Dom元素????????????
12?????????????alert(tb.value);
13?????????????
14?????????????//< summary>通過class屬性獲取元素的客戶端Dom對象</summary>??? ?????????????????????
15?????????????div1?=?$(".KingClass")[0];????????????
16?????????????alert(div1.innerText);
17?????????????
18?????????????//< summary>通過Html標簽獲取元素的客戶端Dom對象</summary>???? ????????????????????
19?????????????div1?=?$("div")[1];????????????
20?????????????alert(div1.innerText);??????
21?????????}
22?????</script>
23?</head>
24?<body>
25?????<form?id="form1"?runat="server">
26?????<div>
27?????????<asp:TextBox?ID="TextBox1"?runat="server"?Text="Hello!?ChengKing."></asp:TextBox>
28?????????<div?class="KingClass">Hello!?Rose</div>?<br?/>
29?????????<input?type?=?button?value="獲取元素"?onclick?=?"GetElement();"?/>
30?????</div>
31?????</form>
32?</body>
2. Dom對象和jQuery對象轉換示例
?1?<head?runat="server">
?2?????<title>Dom和jQuery對象轉換示例</title>
?3?????<script?src=Resources\js\jquery-1.2.1.js?type="text/javascript"></script>?
?4?????????<!--將jQuery引用進來-->
?5?????????<script?type="text/javascript">
?6?????????function?ChangeObjectType()
?7?????????{
?8?????????????//調 用Dom對象方法?????????? ?????????????
?9?????????????tb_dom?=?document.getElementById('<%=?div1.ClientID?%>');
10?????????????alert(tb_dom.innerHTML);
11?????????????
12?????????????//用$方法把Dom對象轉換為jQuery對象,?再調用jQuery對象方法
13?????????????tb_jQuery?=?$(tb_dom);?
14?????????????alert(tb_jQuery.html());
15?????????????
16?????????????//取jQuery對象中的Dom對象
17?????????????tb_dom2?=?tb_jQuery[0];
18?????????????alert(tb_dom2.innerHTML);?????????
19????????????
20?????????}
21?????</script>
22?</head>
23?<body>
24?????<form?id="form1"?runat="server">
25?????<div>
26?????????<div?id="div1"?runat=server>
27?????????????Hello!?ChengKing.
28?????????</div>
29?????????<input?type?=?button?value="對象轉換"?onclick?=?"ChangeObjectType();"?/>
30?????</div>
31?????</form>
32?</body>
3. 訪問對象內部元素
?1?<head?runat="server">
?2?????<title>訪問內部元素</title>
?3?????<script?src=Resources\js\jquery-1.2.1.js?type="text/javascript"></script>?
?4?????????<!--將jQuery引用進來-->
?5?????????<script?type="text/javascript">
?6?????????function?VisitInnerElement()
?7?????????{???????
?8?????????????//取得Div中第二個P元素?????
?9?????????????p?=?$("#<%=?div1.ClientID?%>?P").eq(1);?//等號左邊的p對象為p對象集合???????????
10?????????????alert(p.html());
11?????????????
12?????????????//取得Div中第一個P元素
13?????????????p?=?$("#<%=?div1.ClientID?%>?P:first").eq(0);?//first為關鍵字???????????
14?????????????alert(p.html());
15?????????????
16?????????????//取得Div中第二個P元素
17?????????????p?=?$("#<%=?div1.ClientID?%>?P:last").eq(0);??//last為關鍵字?????????
18?????????????alert(p.html());
19????????????
20?????????}
21?????</script>
22?</head>
23?<body>
24?????<form?id="form1"?runat="server">
25?????<div>
26?????????<div?id="div1"?runat=server>????????????
27?????????????<p>Hello!?ChengKing.</p>??????
28?????????????<p>Hello!?Rose.</p>??
29?????????</div>
30?????????<input?type?=?button?value="訪問內部元素"?onclick?=?"VisitInnerElement();"?/>
31?????</div>
32?????</form>
33?</body>
4. 顯示/隱藏元素
?1?<head?runat="server">
?2?????<title>顯示/隱藏元素</title>
?3?????<script?src=Resources\js\jquery-1.2.1.js?type="text/javascript"></script>?
?4?????????<!--將jQuery引用進來-->
?5?????????<script?type="text/javascript">????????
?6?????????function?HideElement()
?7?????????{
?8?????????????p?=?$("#<%=?div1.ClientID?%>?P").eq(0);?
?9?????????????p.hide();??//隱藏方法
10?????????}
11?????????function?ShowElement()
12?????????{
13?????????????p?=?$("#<%=?div1.ClientID?%>?P").eq(0);???????????
14?????????????p.show();??//顯示方法
15?????????}????????
16?????????function?HideSecondSegment()
17?????????{
18?????????????$("p:eq(1)").hide();??//指定p集合中的元素
19?????????}
20?????????function?HideVisibleDivElement()????????
21?????????{
22?????????????$("div:visible").hide();?//根據div的狀態選擇可見的div集合
23?????????}
24?????????function?ShowHideDivElement()????????
25?????????{????????????
26?????????????$("div:hidden").show();??//根據div的狀態選擇不可見的div集合???????
27?????????}
28?????</script>
29?</head>
30?<body>
31?????<form?id="form1"?runat="server">????
32?????????<div?id="div1"?runat=server>????????????
33?????????????<p>段1:?Hello!?ChengKing.</p>??????
34?????????????<p>段2:?Hello!?Rose.</p>??
35?????????????<p>段3:?Hello!?King.</p>
36?????????</div>
37?????????<input?type="button"?value="隱藏第一段"?onclick="HideElement();"?/>
38?????????<input?type="button"?value="顯示第一段"?onclick="ShowElement();"?/>????????
39?????????<input?type="button"?value="隱藏第二段"?onclick="HideSecondSegment();"?/>
40?????????<input?type="button"?value="隱藏顯示的Div"?onclick="HideVisibleDivElement();"?/>????
41?????????<input?type="button"?value="顯示隱藏的Div"?onclick="ShowHideDivElement();"?/>????????????
42?????</form>
43?</body>
5. 根據條件查詢對象元素集合
?1?<head?runat="server">
?2?????<title>根據條件獲取頁面中的元素對象集合</title>
?3?????<script?src=Resources\js\jquery-1.2.1.js?type="text/javascript"></script>?
?4?????????<!--將jQuery引用進來-->
?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元素內容"?onclick="GetLiElementHtml();"?/>
54?????????<input?type="button"?value="獲取所有li元素[且它的class='k']內容"?onclick="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屬性的元素的值"?onclick="GetElementValueWithNameProperty();"?/>????????????????
60?????????<input?type="button"?value="取得name=TextBox1的文本框的值"?onclick="GetTextBoxValue();"?/>????????????????
61?????????<input?type="button"?value="取得選中的單選框的值"?onclick="GetSelectRadioValue();"?/>????????????????
62?????????
63?????</div>
64?????</form>
65?</body>
轉載于:https://www.cnblogs.com/hacker84/archive/2008/01/14/1038217.html
總結
以上是生活随笔為你收集整理的JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QListWidget设置自定义行间距
- 下一篇： 怎么做java项目_作为一名初学Java