<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<title>测试jquery</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("op");
$('#kk000').click(function() { return confirm('You are going to visit: ' + this.id); });
$('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href); });
// $('#external_links a').mouseover(function() { return confirm('You are going to visit1: ' + this.href); });
$('#kk').mouseover(function() { return confirm('You are going to visit1: ' + this.href); });
$("a").click(function() {
alert("Hello world!");
});
$("#orderedlist").addClass("red");
$("#orderedlist > ul").addClass("green");
$("#orderedlist > ul > li").addClass("blue");
$("#orderedlist > ul > li #k").addClass("yellow");
$("#orderedlist").find("li").find("a").each(function(i) {
$(this).html($(this).html() + " BAM! " + i);
});
$("#div1").css("border", "1px solid black").css("color", "red");
$("#div1 > ul >li a").css("border", "1px solid red").css("color", "red");
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
$("#huoqu").click(function() {
alert($("#quzhi").val());
});
$("#zdd").load("Default2.aspx");
$("#yb").click(function() {
$.get("Ajax.aspx?id=88", { Action: "get", Name: "" }, function(data, textStatus) {
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
//alert(textStatus);//请求状态:success,error等等。 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});
});
$("#Button1").click(function() {
$.get("Ajax.aspx?id=99", { Action: "get", Name: "" }, function(data, textStatus) {
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
//alert(textStatus);//请求状态:success,error等等。 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});
});
function showWin(){
/*找到div节点并返回*/
var winNode = $("#win");
//方法一:利用js修改css的值,实现显示效果
// winNode.css("display", "block");
//方法二:利用jquery的show方法,实现显示效果
// winNode.show("slow");
//方法三:利用jquery的fadeIn方法实现淡入
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
//方法一:修改css的值
//winNode.css("display", "none");
//方法二:jquery的fadeOut方式
winNode.fadeOut("slow");
//方法三:jquery的hide方法
winNode.hide("slow");
}
$("#Button2").click(function() {
$.get("Ajax.aspx?id=66", { Action: "get", Name: "" }, function(data, textStatus) {
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
//alert(textStatus);//请求状态:success,error等等。 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});
});
});
</script>
<style type="text/css">
.red{ color:Red; background-color:Red;}
.green{ color:green; background-color:green;}
.blue{ color:blue; background-color:blue;}
.yellow{ color:yellow; background-color:yellow;}
.cssadd{ color:Red; background-color:#ffc};
#win{
/*边框*/
border:1px red solid;
/*窗口的高度和宽度*/
width : 300px;
height: 200px;
/*窗口的位置*/
position : absolute;
top : 100px;
left: 350px;
/*开始时窗口不可见*/
display : none;
}
/*控制背景色的样式*/
#title{
background-color : blue;
color : red;
/*控制标题栏的左内边距*/
padding-left: 3px;
}
#cotent{
padding-left : 3px;
padding-top : 5px;
}
/*控制关闭按钮的位置*/
#close{
margin-left: 188px;
/*当鼠标移动到X上时,出现小手的效果*/
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id ="external_links">
<a id ="kk" href="" >22</a>
</div>
<div id ="orderedlist"><ul>
<li><a href="http://www.baidu.com">div-ul-li</a></li>
<li><a href="http://www.baidu.com">div-ul-li1</a></li>
<li><a href="http://www.baidu.com">div-ul-li2</a></li>
<li><a href="http://www.baidu.com">div-ul-li3</a></li>
</ul></div>
<br />
<div id ="div1"><ul>
<li><a href="http://www.baidu.com">div-ul-li</a></li>
<li><a href="http://www.baidu.com">div-ul-li1</a></li>
<li><a href="http://www.baidu.com">div-ul-li2</a></li>
<li><a href="http://www.baidu.com">div-ul-li3</a></li>
</ul></div>
<br />
<br />
<div id ="faq"><ul>
<dt ><a href="#">div-ul-li</a></dt>
<dd id="dd"><a href="#">div-ul-li1</a></dd>
<dt id="dt"><a href="#">div-ul-li2s</a></dt>
<dd id="dd"><a href="#">div-ul-li3</a></dd>
</ul></div>
<div id ="zdd"></div>
<div>异步调用<br />
<input type="button" value="异步调用测试" id="yb" /> <input type="button" value="嘿嘿" id="Button1" /> <input type="button" value="呵呵" id="Button2" />
</div>
<div>测试split用法及indexof<br />
<asp:TextBox ID ="hj" runat ="server" Width="200"></asp:TextBox>
<asp:Button ID ="bb" runat ="server" Text="测试" οnclick="bb_Click" />
<input id ="kk000" value="获取id" type="button"/>
<input type="text" id ="quzhi" /><input type="button" id ="huoqu" value="获取文本的值" />
</div>
<a οnclick="showWin()" href="#" mce_href="#">弹出窗口</a>
<div id="win">
<div id="title">我是标题栏!<span id="close" οnclick="hide()">X</span></div>
<div id="content">我是一个窗口!</div>
</div>
</form>
</body>
</html>