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

JQuery 特效

2015-12-23 23:11 801 查看 
//按钮倒计时 <script src="../Script/jquery-1.9.1.js"></script> <script language="javascript"> $(document).ready(function () { //$("#Button1").attr("disabled","disabled").attr("value","ClickMe").attr("type","radio"); //var s = $("#Button1").attr("type"); //alert(s); //$("#Button1").removeAttr("disabled"); showTime(); }); var n = 10; //实现按钮倒计时 function showTime() { n--; if (n == 0) {//将 value的值换成“同意”，将 button 的disabled属性 移出 直到 n==0时停止 $("#Button1").attr("value","同意").removeAttr("disabled"); } else { $("#Button1").attr("value", "同意(" + n + ")"); window.setTimeout("showTime()", 1000); } } </script>




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">

.white {
background-color:white;
}
.pink {
background-color:#FFFFcc;
}
.m_over {
background-color:yellow;
font-weight:bold;
}
</style>
<script src="../Script/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
//$("#GridView1 tr:first").css("background-color", "navy").css("color", "white");
//$("#GridView1 tr:gt(0):odd").css("background-color", "#ffffcc");

//通过css()方法来操作内联样式
//var bg = "";
//$("#GridView1 tr:gt(0)").mouseover(function () {
//    bg = $(this).css("background-color");
//    $(this).css("background-color", "yellow");
//}).mouseout(function () {
//    $(this).css("background-color", bg);
//});

//通过操作class来实现光棒效果
$("#GridView1 tr:gt(0)").mouseover(function () {
$(this).addClass("m_over");
}).mouseout(function () {
$(this).removeClass("m_over");
});

});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Code" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。" Width="100%">
<AlternatingRowStyle CssClass="pink" />
<Columns>
<asp:BoundField DataField="Code" HeaderText="Code" ReadOnly="True" SortExpression="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Image1" HeaderText="Image1" SortExpression="Image1" />
<asp:BoundField DataField="Image2" HeaderText="Image2" SortExpression="Image2" />
<asp:BoundField DataField="Parent" HeaderText="Parent" SortExpression="Parent" />
</Columns>
<HeaderStyle BackColor="Navy" ForeColor="White" />
<RowStyle CssClass="white" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>" DeleteCommand="DELETE FROM [Menu] WHERE [Code] = @Code" InsertCommand="INSERT INTO [Menu] ([Code], [Name], [Image1], [Image2], [Parent]) VALUES (@Code, @Name, @Image1, @Image2, @Parent)" ProviderName="<%$ ConnectionStrings:mydbConnectionString.ProviderName %>" SelectCommand="SELECT [Code], [Name], [Image1], [Image2], [Parent] FROM [Menu]" UpdateCommand="UPDATE [Menu] SET [Name] = @Name, [Image1] = @Image1, [Image2] = @Image2, [Parent] = @Parent WHERE [Code] = @Code">
<DeleteParameters>
<asp:Parameter Name="Code" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Code" Type="String" />
<asp:Parameter Name="Name" Type="String" />
<asp:Parameter Name="Image1" Type="String" />
<asp:Parameter Name="Image2" Type="String" />
<asp:Parameter Name="Parent" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Name" Type="String" />
<asp:Parameter Name="Image1" Type="String" />
<asp:Parameter Name="Image2" Type="String" />
<asp:Parameter Name="Parent" Type="String" />
<asp:Parameter Name="Code" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>

</div>
</form>
</body>
</html>




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#main {
width:200px;
border:1px solid black;
}
.title {
background-color:navy;
padding:5px;
color:white;
font-weight:bold;
text-align:center;
margin-top:1px;
}
.content {
background-color:#ffffcc;
height:300px;
display:none;
}
</style>
<script src="../Script/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$(".title").click(function () {
if ($(this).next().css("display") != "block") {
$(".content").css("display", "none");
$(this).next().css("display", "block");
} else {
$(this).next().css("display", "none");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<div class="title">我的好友</div>
<div class="content"></div>
<div class="title">陌生人</div>
<div class="content"></div>
<div class="title">黑名单</div>
<div class="content"></div>

</div>
</form>
</body>
</html>




//文本框不能为空提示
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Script/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
//var s = $("#ss").html();
//alert(s);
//$("#ss").text("我不是猪");
$("#TextBox1").focus(function () {
var s = $(this).val();
if (s == "不能为空") {
$(this).val("");
$(this).css("color", "black");
}
}).blur(function () {
var s = $(this).val();
if (s.length == 0) {
$(this).val("不能为空");
$(this).css("color", "#a0a0a0");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="ss">猪头可爱</span>

<asp:TextBox ID="TextBox1" runat="server" style="color:#a0a0a0" Text="不能为空"></asp:TextBox>
</div>
</form>
</body>
</html>




//文本输入框
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Script/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#TextBox1").keyup(function () {
var s = $(this).val();
var l = 140 - s.length;

$("#Label1").html(l);
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="152px" TextMode="MultiLine" Width="338px"></asp:TextBox>
<br />
还可以输入<asp:Label ID="Label1" runat="server"></asp:Label>
字</div>
</form>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航