Html基础详解之（jquery）之二

时间：2022-01-23 08:21:44

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

相关文章