Jquery

来源：互联网发布：斗蟹软件下载编辑：程序博客网时间：2024/06/05 08:41

<head runat="server">
<title></title>
<script src="JS/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function () {
//绑定一个事件
$("#pBind").bind("click", function () {
alert($(this).text());
});

//绑定多个事件
$("#btnClick").bind({
click: function () { $("#moreEvents").slideToggle(); },
// mouseover: function () { $("body").css("background-color", "red"); },
// mouseout: function () { $("body").css("background-color", "#FFFFFF"); }
mouseover: function () { $("#divOver").css("background-color", "blue"); $("#pOut").css({ "background-color": "green", "font-size": "18pt" }) },
mouseout: function () { $("#pOut").css("background-color", "#fff"); $("#divOver").css("background-color","#fff") }
// mouseover: function () { $("body").css("backgroud-color", "blue"); },
// mouseout: function () { $("body").css("backgroud-color", "red")；}
});

// $("#btnClick").bind({
// click: function () { $("#moreEvents").slideToggle(); },
// mouseover: function () { $("body").css("background-color", "red"); },
// mouseout: function () { $("body").css("background-color", "#FFFFFF"); }
// });
//one 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。此事件只执行一次
$("#pOne").one("click", foo);

$(".clickme").live("click", function () {
alert($(this).text());
});
//从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
$(".clickme").click(function () {
$(".clickme").die("click");
});

// $(".clickme").die("click", function () {
// alert($(this).text());
// });

});
var foo = function () {
alert($(this).text());
};

</script>
<style type="text/css">
.clickme
{ height:150px;
width:150px;
border:2px solid green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<p id = "pBind">dddd</p>
<P id="moreEvents" ></p>
<button type="button" name="btnClick" id="btnClick" value ="Click" >Click me</button>
<p id="pOne">此事件只执行一次</p>
</div>
<div class="clickme">Please click here!</div>
<div class ="clickme">Please click another DIV!</div>
<div id ="divOver">Div moseover,please click.pain,fortunate,lucky</div>
<p id="pOut">P 標籤，鼠標移開，，mouseout ，shoot afraid ，</p>
<input id="Text1" type="text" style ="display: " />
<select id="Select1" style =" display :none">
<option></option>
</select>
</form>

</body>
</html><head runat="server">
    <title></title>
    <script src="JS/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(function () {
            //绑定一个事件
            $("#pBind").bind("click", function () {
                alert($(this).text());
            });

            //绑定多个事件
            $("#btnClick").bind({
                click: function () { $("#moreEvents").slideToggle(); },
                //                                mouseover: function () { $("body").css("background-color", "red"); },
                //                                mouseout: function () { $("body").css("background-color", "#FFFFFF"); }
                mouseover: function () { $("#divOver").css("background-color", "blue"); $("#pOut").css({ "background-color": "green", "font-size": "18pt" }) },
                mouseout: function () { $("#pOut").css("background-color", "#fff"); $("#divOver").css("background-color","#fff") }
                //                mouseover: function () { $("body").css("backgroud-color", "blue"); },
                //                mouseout: function () { $("body").css("backgroud-color", "red")；}
            });

            //                        $("#btnClick").bind({
            //                            click: function () { $("#moreEvents").slideToggle(); },
            //                            mouseover: function () { $("body").css("background-color", "red"); },
            //                            mouseout: function () { $("body").css("background-color", "#FFFFFF"); }
            //                        });
            //one 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。此事件只执行一次
            $("#pOne").one("click", foo);

            $(".clickme").live("click", function () {
                alert($(this).text());
            });
            //从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
            $(".clickme").click(function () {
                $(".clickme").die("click");
            });

            //            $(".clickme").die("click", function () {
            //                alert($(this).text());
            //            });

        });
        var foo = function () {
            alert($(this).text());
        };

    </script>
    <style type="text/css">
      .clickme
      { height:150px;
         width:150px;
          border:2px solid green;
          }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <p id = "pBind">dddd</p>
      <P id="moreEvents" ></p>
      <button type="button"    name="btnClick" id="btnClick" value ="Click" >Click me</button>
      <p id="pOne">此事件只执行一次</p>
    </div>
    <div class="clickme">Please click here!</div>
    <div class ="clickme">Please click another DIV!</div>
    <div id ="divOver">Div moseover,please click.pain,fortunate,lucky</div>
    <p id="pOut">P 標籤，鼠標移開，，mouseout ，shoot afraid ，</p>
<input id="Text1" type="text" style ="display: " />
<select id="Select1" style =" display :none">
    <option></option>
</select>
    </form>

</body>
</html>

阅读全文

0 0