jQuery事件

Posted 黑山大胖子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery事件相关的知识,希望对你有一定的参考价值。

1.添加事件

  用 $("#aa").click(function(){ }) 的方式添加,如果是给class等选取的含有多个元素的jQuery对象添加事件,可以一次性给所有元素加上事件,可以在函数体中用 $(this) 来选取当前元素,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
<!--以下是4个同class名的按钮-->
<input type="button" class="aa" value="测试1">
<input type="button" class="aa" value="测试2">
<input type="button" class="aa" value="测试3">
<input type="button" class="aa" value="测试4">
</body>
<script type="text/javascript">
    $(".aa").click(function(){    //一次性给class名为aa的元素全部都添加上事件
        var a = $(this).val();    //$(this)代表当前点击的元素,点击谁谁就是
        alert(a);    
    })
</script>
</html>

 

2.挂事件和清事件

  触发一个事件会给另一个元素添加上事件就是挂事件,触发一个事件会把另一个元素上挂上的事件清除掉就是清事件

  用 bind() 方法挂事件,用 unbind() 方法清掉事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
<!--以下是3个按钮,id分别为aa、bb、cc,点击aa会给bb添加事件,点击cc会给bb清掉挂上的事件-->
<input type="button" id="aa" value="测试1">
<input type="button" id="bb" value="测试2">
<input type="button" id="cc" value="测试3">

</body>
<script type="text/javascript">
    $("#aa").click(function(){    //点击aa触发事件
        $("#bb").bind("click",function(){    //给bb挂上点击事件
            alert($(this).val());    
        })    
    })
    
    $("#cc").click(function(){    //点击cc触发事件
        $("#bb").unbind("click");    //清除bb上挂的点击事件
    })
</script>
</html>

 

例子:复选框的全选

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <!--1个全选框,5个复选框,点击全选可以全部选取或不选取5个复选框-->
    <div><input type="checkbox" name="qx" id="qx"><label for="qx">全选</label></div>
    <input type="checkbox" name="shi" class="shi" id="jn"><label for="jn">济南</label>
    <input type="checkbox" name="shi" class="shi" id="qd"><label for="qd">青岛</label>
    <input type="checkbox" name="shi" class="shi" id="zb"><label for="zb">淄博</label>
    <input type="checkbox" name="shi" class="shi" id="yt"><label for="yt">烟台</label>
    <input type="checkbox" name="shi" class="shi" id="wf"><label for="wf">潍坊</label>
</body>
<script type="text/javascript">
    $("#qx").click(function(){    //给全选框添加点击事件
        var zt = $(this).prop("checked");    //获取全选框的选中状态
        $(".shi").prop("checked",zt);        //将全选框的状态赋予5个复选框
    })
</script>
</html>

 

 

  

以上是关于jQuery事件的主要内容,如果未能解决你的问题,请参考以下文章

原生js如何绑定a连接点击事件?

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)