您的位置:首页 > Web前端 > JQuery

JQuery的摸索之路(二比较)

2010-02-26 11:54 543 查看
1.修改text1里的值为‘abc’

我们传统的做法是:

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: