我的jquery页面

来源：互联网发布：如何检查网络连通性编辑：程序博客网时间：2024/06/06 13:15

<%@ 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="测试" onclick="bb_Click" />
        <input id ="kk000" value="获取id" type="button"/>
        <input type="text" id ="quzhi" /><input type="button" id ="huoqu" value="获取文本的值" />
    </div>
     <a onclick="showWin()" href="#" mce_href="#">弹出窗口</a>
    <div id="win">
        <div id="title">我是标题栏！<span id="close" onclick="hide()">X</span></div>
        <div id="content">我是一个窗口！</div>
    </div>

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