ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery事件

2019-12-21 21:58:19  阅读:227  来源: 互联网

标签:jQuery function ... 选择器 事件 alert click


jQuery事件

事件,事件函数(事件方法)

 js:onXxx
            onclick();
            写在<script>内,ready()外;

jquery:没有on

            click();
            ready()内;
$(document).ready(function(){
   $("选择器").事件类型(function(){
            ... 
   });
});

windows事件:ready;

鼠标事件:

  1. click:单击事件
  2. mouseover():鼠标悬浮
  3. mouseout():鼠标离开
  4. 事件介绍

键盘事件

    1. keydown:按键 从上往下的过程
    2. keypress():按键被按压到 最底部
    3. keyup():松开按键

1.前端的一些事件、方法,会在某些情况下失效。 2.兼容性问题

例:通过event.keyCode指定具体的按键

            $("body").keydown(function(event){
                if(event.keyCode == 13){
                    alert("回车。。。...");
                }
            });

表单事件

focus():获取焦点

blur():失去焦点

颜色值:可以使用 英语单词或者 #6位十六进制

​ a.#000000:黑色 #ffffff:白色

​ b.如果6位是两两相同的,则可以写出3位,#aabbcc 可以写成#abc

绑定事件与移除事件

$("选择器").click( function(){...});

绑定事件

​ $("选择器").bind("事件名",[数据],函数);

​ $("选择器").bind("click",function(){...});

​ $("选择器").bind("focus",function(){ ... });

批量绑定

​ $("选择器").bind({"事件名":函数,"事件名":函数 ,...,"事件名":函数})

移除事件

​ $("选择器").unbind("事件名");

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                background: lightgray;
                height: 50px;
                width: 200px;
            }
        </style>

    </head>
    <body onl oad="init()" >
        <input type="text" id="username"/><br />
        name:<input type="text"  id="name"/>
        <input type="button" value="绑定" onclick="Bind()" />
        <input type="button" value="解绑" onclick="unBind()" />
        <div onm ouseover="over()" onm ouseout="out()">
            some text..
        </div>
        <p id="mytitle" >woshi</p>
        <h1>H1...</h1>
        <script type="text/javascript"  src="jquery-3.4.1.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("h1").click(function(){
                    alert("单击事件");
                });
                $("div").bind("click",function(){
                    alert("bind形式单击事件");
                });
                /*$("div").mouseover(function(){
                    alert("鼠标悬浮");
                }).mouseout(function(){
                    alert("鼠标离开");
                });*/
                $("body").keydown(function(event){
                    if(event.keyCode == 13){//通过keyCode来指定摸一个按键。event.keyCode event参数
                    alert("按压..");
                    }
                })/*.keypress(function(){
                    alert("压到底了");
                }).keyup(function(){
                    alert("松开");
                })*/;
                
                $("#username").focus(function(){
                    //当前元素就是文本框$("#username"),即 id="uid"的文本框
                    //当前元素可以用this表示
                    $(this).css("background-color","red");
                });
                $("#username").blur(function(){
                    $(this).css("background-color","white");
                });
            });//ready结尾
    
            $(function(){
                var $title = $("#mytitle");
                alert($title.html());
            });
            
            
            function init(){
                var title = document.getElementById("mytitle");
                alert(title.innerHTML+"kkk");
            }
            
            
            /*function over(){
                alert("悬浮");
            }
            
            
            function out(){
                alert("离开");
            }*/
            function Bind(){
                $("#name").bind("click",function(){
                    alert("click..");
                });
            }
            function unBind(){
                $("#name").unbind()("click");
            }
        </script>
    </body>
</html>

标签:jQuery,function,...,选择器,事件,alert,click
来源: https://www.cnblogs.com/x-i-n/p/12078351.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有