zoukankan      html  css  js  c++  java
  • jQuery事件

    一、添加单击事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="../jquery-3.3.1.min.js"></script><!--如果有多个js
    样式把jquery放在最上面防止出错-->
    </head>

    <body>
    <body>
        <input  type="button" class="cc" value="ff"/>
        <input  type="button" class="cc" value="gg"/>
        <input  type="button" class="cc" value="ii"/>
        <input  type="button" name="cc" value="jj"/>
    </body>
    <script type="text/javascript">
        var a = $("#aa");
        var b = $(".bb");
        var c = $(".cc");
        $("[name='cc']").click(function(){
            alert("nihao");    //单个添加单击事件
        })
        $(".cc").on("click",function(){
            alert($(this).val());//谁触发。this就代表谁
                
        })//多个元素单击加事件
    </script>
    </body>

    二、挂事件

    <body>
        <input  type="button" class="cc" value="ff" id="a"/>
        <input  type="button" class="cc" value="gg" id="b"/>
        <input  type="button" class="cc" value="ii" id="c"/>
        <input  type="button" name="cc" value="jj"/>
    </body>
    <script type="text/javascript">
    	var a = $("#aa");
    	var b = $(".bb");
    	var c = $(".cc");
    	$("#a").click(function(){
    		$("#b").bind("click",function(){
    			alert("shenme");
    		})	
    	})//挂事件
    </script>
    

     

    三、移除事件

    <body>
        <input  type="button" class="cc" value="ff" id="a"/>
        <input  type="button" class="cc" value="gg" id="b"/>
        <input  type="button" class="cc" value="ii" id="c"/>
        <input  type="button" name="cc" value="jj"/>
    </body>
    <script type="text/javascript">
    	var a = $("#aa");
    	var b = $(".bb");
    	var c = $(".cc");
    	$("#a").click(function(){
    		$("#b").bind("click",function(){
    			alert("shenme");
    		});	
    	});//挂事件
    	$("#c").click(function(){
    		$("#b").unbind("click");	
    	});//移除事件
    </script>
    
  • 相关阅读:
    8月24 杂七杂八
    胡思乱想
    前端思考题
    前端经典面试题
    一些被废弃的东西
    关于设置img图片大小优先级的问题
    关于 removeChild()删除节点
    关于前端基本要求及一些题
    关于 Oracle 11g 先决条件检查失败的解决办法
    《现代前端技术解析》第一章读书笔记(未完成)
  • 原文地址:https://www.cnblogs.com/navyouth/p/8340265.html
Copyright © 2011-2022 走看看