JQuery的摸索之路(二比较)
2010-02-26 11:54
543 查看
1.修改text1里的值为‘abc’
我们传统的做法是:
再精简的做法是
JQuery的写法是:
2.按下按钮显示隐藏div的内容:
传统的做法
JQuery做法
html代码:
代码
我们传统的做法是:
window.document.form1.Text1.value=‘ABC’;
再精简的做法是
document.getElementById(‘Text1’).value=‘ABC’; document.all(‘Text1’).value=‘ABC’; //(只支持IE)
JQuery的写法是:
$(‘#Text1’).val(‘ABC’);
2.按下按钮显示隐藏div的内容:
传统的做法
function button1_onclick() { var div1=document.getElementById('div1'); if(div1.style.display=='') { div1.style.display='none'; } else { div1.style.display=''; } }
JQuery做法
$('#button2').click(function(){ $('#div2').toggle(); });
html代码:
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryDemo1.aspx.cs" Inherits="JqueryDemo1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script> <style> .d1 { background-color:Red; color:White; } </style> <script type="text/javascript" language=javascript> function button1_click() { var div1=document.getElementById("div1"); if(div1.style.display=='') { div1.style.display="none"; } else { div1.style.display=''; } } $(document).ready(function(){ $('#Button2').click(function() { $('#div2').toggle(); }); } ) $(document).ready( function(){ //给div1加class d1 $('#Button1').click( function(){ $('#div1').addClass('d1'); }) //给所有div加 class d1 $('#Button2').click( function() { $('div').addClass('d1'); } ) } ) </script> <title>未命名頁面</title> </head> <body> <form id="form1" runat="server"> <input id="Button1" type="button" value="button" onclick="return button1_click()" /> <div id="div1" runat="server"> div1<br /> div1<br /> div1<br /> div1<br /> div1<br /> div1<br /> </div> <input id="Button2" type="button" value="button" /> <div id="div2" runat="server"> div1<br /> div1<br /> div1<br /> div1<br /> div1<br /> div1<br /> </div> </form> </body> </html>
相关文章推荐
- JQuery的摸索之路(一)
- 多态的摸索之路( 甲 )
- 前端学习之路——管理jQuery包装集
- 前端学习之路——jQuery动画
- jQuery学习之路(5)- 简单的表单应用
- jQuery 之路重走(2) jQuery对象和Dom对象
- Python之路【第十四篇】jQuery、AngularJS
- jQuery 之路重走(7) jQuery中ajax的应用
- 摸索之圆角按钮jquery插件
- jquery mobile 之路--------第一篇:Hello JQuery Mobile!
- python自动化之路-Jquery(1)
- css 的规律摸索之路(三)文本省略问题
- jQuery 学习之路(4):事件
- ExtJS学习之路第一步:对比jQuery,认识ExtJS
- jQuery 之路重走(3) jQuery选择器
- jQuery 之路重走(4) jQuery中的DOM操作
- [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数
- [js高手之路] 设计模式系列课程 - jQuery的extend插件机制
- 0000005_java学习之路_ko+jquery获取select选中项信息
- jQuery插件之路(二)——轮播