jQuery绑定事件

最新推荐文章于 2024-07-02 08:55:42 发布

迷亭君

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量941

点赞数 1

分类专栏： ajax+JQuery+Vue 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49044908/article/details/121275049

版权

ajax+JQuery+Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery绑定事件

事件名称绑定

语法为$(“选择器”).事件名称(事件的处理函数)
对于上面的语法给出解释:

$(“选择器”) : 定位dom对象,dom对象可以有多个,这些dom对象都绑定事件了
事件名称 : 就是js中的事件去掉on的部分,例如js中的单击事件是onclick,jQuery中的事件名称就是click
事件的处理函数 : 就是一个function,当事件发生时就会执行函数的内容

例如 : 给id是btn的按钮绑定点击事件

	$("#btn").click(function() {
		alert("btn按钮点击了");
	})

这是在程序的执行期间为按钮绑定事件,属于动态绑定,更加灵活

例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // 当页面dom对象加载后,给对象绑定事件,因为只有当对象已经在内存中创建好了才能使用
            $("#btn1").click(function () {
                // 过滤器
                var obj = $("div:first");
                obj.css("background", "red");
            })

            $("#btn2").click(function () {
                var obj = $("div:last");
                obj.css("background", "red");
            })

            $("#btn3").click(function () {
                var obj = $("div:eq(2)");
                obj.css("background", "red");
            })

            $("#btn4").click(function () {
                var obj = $("div:lt(4)");
                obj.css("background", "red");
            })

            $("#btn5").click(function () {
                var obj = $("div:gt(3)");
                obj.css("background", "red");
            })
        })
    </script>
</head>
<body>
    <div id="one">one</div>
    <div id="two">two</div>
    <div>
        div
        <div>div-div1</div>
        <div>div-div2</div>
    </div>
    <div>div-div3</div>
    <br/>
    <span>span</span>
    <br/>
    <input id="btn1" type="button" value="获取第一个div"/>
    <br/>
    <input id="btn2" type="button" value="获取最后一个div"/>
    <br/>
    <input id="btn3" type="button" value="获取下标为2的div"/>
    <br/>
    <input id="btn4" type="button" value="获取下标小于4的所有div"/>
    <br/>
    <input id="btn5" type="button" value="获取下标大于3的所有div"/>
</body>
</html>

使用on()函数绑定事件

on()方法在被选元素上添加事件处理程序.该方法给api带来很多遍历,比较推荐
语法 : $(“选择器”).on(event, function)
event : 事件名称,如click等, 一个或者多个,多个之间使用空格分开
function : 可选,规定当事件发生时执行的函数
例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on()方式绑定事件</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on("click", function () {
                // 使用append增加dom
                $("#mydiv").append("<button id='myBtn'>我是一个新添加的按钮</button>")
                // 为新建的按钮绑定事件
                $("#myBtn").on("click", function () {
                    alert("我被点击了")
                })
            })
        })
    </script>
</head>
<body>
    <div id="mydiv">我是一个div,我需要增加一个button</div>
    <br/>
    <input type="button" id="btn" value="div增加button" />
</body>
</html>

迷亭君

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery绑定事件

jQuery绑定事件语法为$(“选择器”).事件名称(事件的处理函数)对于上面的语法给出解释:$(“选择器”) : 定位dom对象,dom对象可以有多个,这些dom对象都绑定事件了事件名称 : 就是js中的事件去掉on的部分,例如js中的单击事件是onclick,jQuery中的事件名称就是click事件的处理函数 : 就是一个function,当事件发生时就会执行函数的内容例如 : 给id是btn的按钮绑定点击事件 $("#btn").click(function() { alert
复制链接

扫一扫