盗网站后台源码,北京市建设监理协会官方网站,南宁网页制作培训,wordpress微信注册登录界面(一).概述 现在有好多比较优秀的客户端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不错, 最近研究了一下 jQuery,在学习时顺便整理了一个教程, 后面会有示例代码下载链接. jQuery是JavaScript语言的一个新的资源库(… (一).概述 现在有好多比较优秀的客户端脚本语言组件, 如: 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 script srcResources\js\jquery-1.2.1.js typetext/javascript/script (三).代码示例 1. 访问页面元素 1 head runatserver 2 title访问元素/title 3 script srcResources\js\jquery-1.2.1.js typetext/javascript/script 4 !--将jQuery引用进来-- 5 script typetext/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 /script23 /head24 body25 form idform1 runatserver26 div27 asp:TextBox IDTextBox1 runatserver TextHello! ChengKing./asp:TextBox28 div classKingClassHello! Rose/div br /29 input type button value获取元素 onclick GetElement(); /30 /div31 /form32 /body 2. Dom对象和jQuery对象转换示例 1 head runatserver 2 titleDom和jQuery对象转换示例/title 3 script srcResources\js\jquery-1.2.1.js typetext/javascript/script 4 !--将jQuery引用进来-- 5 script typetext/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 /script22 /head23 body24 form idform1 runatserver25 div26 div iddiv1 runatserver27 Hello! ChengKing.28 /div29 input type button value对象转换 onclick ChangeObjectType(); /30 /div31 /form32 /body 3. 访问对象内部元素 1 head runatserver 2 title访问内部元素/title 3 script srcResources\js\jquery-1.2.1.js typetext/javascript/script 4 !--将jQuery引用进来-- 5 script typetext/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 /script22 /head23 body24 form idform1 runatserver25 div26 div iddiv1 runatserver 27 pHello! ChengKing./p 28 pHello! Rose./p 29 /div30 input type button value访问内部元素 onclick VisitInnerElement(); /31 /div32 /form33 /body 4. 显示/隐藏元素 1 head runatserver 2 title显示/隐藏元素/title 3 script srcResources\js\jquery-1.2.1.js typetext/javascript/script 4 !--将jQuery引用进来-- 5 script typetext/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 /script29 /head30 body31 form idform1 runatserver 32 div iddiv1 runatserver 33 p段1: Hello! ChengKing./p 34 p段2: Hello! Rose./p 35 p段3: Hello! King./p36 /div37 input typebutton value隐藏第一段 onclickHideElement(); /38 input typebutton value显示第一段 onclickShowElement(); / 39 input typebutton value隐藏第二段 onclickHideSecondSegment(); /40 input typebutton value隐藏显示的Div onclickHideVisibleDivElement(); / 41 input typebutton value显示隐藏的Div onclickShowHideDivElement(); / 42 /form43 /body 5. 根据条件查询对象元素集合 1 head runatserver 2 title根据条件获取页面中的元素对象集合/title 3 script srcResources\js\jquery-1.2.1.js typetext/javascript/script 4 !--将jQuery引用进来-- 5 script typetext/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的classk17 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[nameTextBox1]).val());36 } 37 //根据属性类型和状态获取元素38 function GetSelectRadioValue()39 {40 alert($(input[typeradio][checked]).val()); 41 }42 /script43 /head44 body45 form idform1 runatserver46 div47 ul48 liHello! ChengKing./li49 li classkHello! Rose./li50 li classkHello! King./li51 52 /ul53 input typebutton value获取所有li元素内容 onclickGetLiElementHtml(); /54 input typebutton value获取所有li元素[且它的classk]内容 onclickGetLiElementHtmlWithClassIsK(); / 55 br /br /br /56 input nameTextBox1 typetext valueHello, King! /57 input nameRadio1 typeradio valueHello, Rose! checkedchecked /58 br / 59 input typebutton value取得含有name属性的元素的值 onclickGetElementValueWithNameProperty(); / 60 input typebutton value取得nameTextBox1的文本框的值 onclickGetTextBoxValue(); / 61 input typebutton value取得选中的单选框的值 onclickGetSelectRadioValue(); / 62 63 /div64 /form65 /body 转载于:https://www.cnblogs.com/hacker84/archive/2008/01/14/1038217.html
