我的jquery页面

<%@ 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>

阅读更多
个人分类: js脚本 jquery .net
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭