JQuery 学习2

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"

Inherits="Default2" %>
<!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 Study2</title>
    <style type="text/css">
        .red{
            color:Red;
        }
        .Ahover{
            color:Lime;
            text-decoration:none;
        }
        .hand{
            cursor:hand;
        }
    </style>
    <script type="text/javascript" src="JQuery/jquery.3.2.min.js"></script>
    <script type="text/javascript" src="JQuery/JScript2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>my name is JINHO;</p>
        <input type="text" value="jinho" />
        <a href="#">☢放上来看看</a>
        <input type="button" value="点击我" />
    </div>
    <div>
        show and hide;
    </div>
    <input id="showDiv" type="button" value="show & hide" />
    <input type="button" value="获取远程数据" onclick="getData();" />
    <div id="getOtherContent"></div>
    </form>
</body>
</html>

js

/// <reference path="jquery-1.2.3-intellisense.js" />
$(
    function(){
    
        $("P").hover(
            function(){
                $(this).addClass("hand");
            },function(){
                $(this).removeClass("hand");
            }
        );
        $("input[type!='button']").blur(function(){alert(1);})
        //$(document).click(function(){alert("click");});
        
        $("input").mousemove(function(){$(this).css("border","1px solid red");});
        $("input").mouseout(function(){$(this).css("border","1px solid black");});
        $("a").hover(
            function(){
                $(this).addClass("Ahover");
            },
            function(){
                $(this).removeClass("Ahover");
            }
        );
        
        $("input[type='button']").toggle(
              function () {
                $(this).css({"border":"0px", "color":"blue"});
              },
              function () {
                $(this).css({"border":"5px", "color":"red"});
              },
              function () {
                $(this).css({"border":"10px", "color":"black"});
              }
        );
        
        //$("p").bind("click",function(){alert($(this).text());});
        //只执行一次
        //$("p").one("click",function(){alert($(this).text());});
       
        //bind绑定一个自定义函数
        $("p").click(handler);
        function handler(){
            $("p").bind("myCus",function(event,msg1,msg2){
                alert(msg1+":"+msg2);
            });
            //为p自定义一个函数
            $("p").trigger("myCus",["Hello","World!"]);
        }
        //$("p").unbind("click");
        $("div").eq(2).css({"border":"2px solid blue","height":"60px","width":"100%"});
        $("#showDiv").click(
            function(){
                //alert($(this).val());
                $("div").eq(2).toggle();
        });
        
       
        
    }
);
// $.load()
function getData(){
    $("#getOtherContent").load("test.htm");
}

$(document).unload(function(){alert("unload");});
$(window).error(function(){
    $(this).hide();
});

Technorati 标签: jquery

posted on 2010-04-18 22:00 JoinJ 阅读(233) 评论(0) 编辑收藏举报