Html基础详解之（jquery）之二

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定时间处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see.bind(),.deleqate(),和.live()，要删除的.on()绑定的时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<div>
    <p>s</p>
</div>



    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("p").on("click", function(){
        alert( $(this).text("sssssssss") );
        });
    </script>


</body>
</html>

demo1

off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。

click

$("p").on("click", function(){
alert( $(this).text() );
});

event

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

submit

$("form").on("submit", false)

preventDefault().

$("form").on("submit", function(event) {
  event.preventDefault();
});

stopPropagation().　

$("form").on("submit", function(event) {
  event.stopPropagation();
});

show([speed,[easing],[fn]]) 显示隐藏的匹配元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <p style="display: none">Hello</p>
</div>





    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("p").show("fast",function(){
        $(this).text("Animation Done!");
        });
    </script>


</body>
</html>

demo

hide([speed,[easing],[fn]]) 隐藏显示的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <p>Hello Word</p>
</div>





    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("p").hide();
    </script>


</body>
</html>

demo