博客
关于我
JQuery_事件绑定与切换_hehe.employment.over.21.2
阅读量:394 次
发布时间:2019-03-05

本文共 2743 字,大约阅读时间需要 9 分钟。

文章目录

21.3 JQuery_事件绑定与切换

21.3.1 jquery标准的绑定方式

  • jq对象.事件方法(回调函数)
    • 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
    • 表单对象.submit():让表单提交
  • 示例:
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        //1.获取name对象,绑定click事件        $("#name").click(function () {                alert("点击");        });        //给name绑定鼠标移动到元素之上事件,绑定鼠标移出事件        $("#name").mouseover(function () {                alert("鼠标来了");        });        $("#name").mouseout(function () {                alert("鼠标走了");        });        $("#name").mouseover(function () {                alert("鼠标来了");        }).mouseout(function () {                alert("鼠标走了");        });        $("#name").focus;//让文本输入框获得焦点        // 表单对象.submint();//让表单提交    </script></head><body><input id="name" type="text" value="绑定点击事件"></body></html>

21.3.2 on绑定事件/off解除绑定

  • jq对象.on("事件名称",回调函数)
  • jq对象.off("事件名称")
    • 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
  • 示例:
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        $(function () {                //1.使用 on 给按钮绑定单击事件 click            $("#btn").on("click",function () {                    alert("点击");            });            //2.使用 off 接触 btn按钮的单击事件            $("#btn2").click(function () {                    // 接触btn按钮的单击事件               // $("#btn").off("click");                $("#btn").off();//无参数,将组件上的所有事件全部解绑            });        });    </script></head><body><input id="btn" type="button" value="使用on绑定点击事件"><input id="btn2" type="button" value="使用off解绑点击事件"></body></html>

21.3.3 事件切换:toggle

  • jq对象.toggle(fn1,fn2...)
    • 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
  • 注意
    • 1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
    • <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
  • 示例:
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        $(function () {                //获取按钮,调用toggle方法            $("#btn").toggle(function () {                    //改变div背景色backgroundColor 颜色为 green                $("#myDiv").css("backgroundColor","green");            },function () {                    //改变div背景色backgroundColor 颜色为 pink                $("#myDiv").css("backgroundColor","pink");            });        });    </script></head><body>    <input id="btn" type="button" value="事件切换">    <div id="myDiv" style="width:300px;height:300px;background:pink">        点击按钮变成绿色,再次点击红色    </div></body></html>

转载地址:http://mugwz.baihongyu.com/

你可能感兴趣的文章
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>