jQuery的事件(代码演示如何使用)

青旅半醒 2022-05-17 11:29 146阅读 0赞

1、jQuery的事件有哪些？

javscript的事件：onClick,onmouseover
    jquery的事件：click,mouseover
    注意jQuery的事件比javascript的事件少一个on
    1）鼠标事件
        click：单击事件
        //dbclick：双击事件
        mouseover：鼠标悬念（移入）
        mouseout：鼠标移出

<style> .abc{ background-color: #aaa; } </style>
            <script type="text/javascript"> $(function(){ $("#nav li").mouseover(function(){ $(this).addClass("abc");//当鼠标移入li元素时添加样式 }).mouseout(function(){ //$(this).removeClass() //当鼠标移出时删除所有样式 $(this).removeClass("abc") //当鼠标移出时删除指定样式 }); }); </script>
    
            <div id="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">团购</a></li>
                    <li><a href="#">在线浏览</a></li>
                </ul>
            </div>

2) 键盘事件
          keydown：键盘按下事件
          keypress：键盘按下并放开时触发
          keydown：键盘放开时触发

<script type="text/javascript"> $(function(){ //按回车键自动登录(不用再点击登录按钮) $(document).keydown(function(event){ if(event.keyCode==13){ $("#actionForm").submit(); return true; } return false; }) }); </script>
    
            <form id="actionForm" action="../index.html">
                登录名：<input id="txtLoginName" /><br />
                密码：<input type="password" />
                <input type="button" value="登录" />
            </form>

3) 表单事件
          focus：获得焦点时触发
          blur：失去焦点
          select：文本选中时触发

<script type="text/javascript"> $(function(){ //文本框获得焦点时，将当前文本框的内容清空（值等于"请输入登录名.."） //文本框失去焦点时，判断内容是否为"请输入登录名.."或是否为空，那么将这个值"请输入登录名.."设回到文本框 $("#txtLoginName").focus(function(){ if($(this).val()=='请输入登录名...'){ $(this).val('');//清空内容 } }).blur(function(){ if($(this).val().trim()==''){ $(this).val('请输入登录名...');//清空内容 } }); }); </script>
    
            <form id="actionForm" action="../index.html">
                登录名：<input id="txtLoginName" value="请输入登录名..." /><br />
                密码：<input type="password" />
                <input type="button" value="登录" />
            </form>

4）其它事件
          bind()：绑定事件
          unbind()：移除绑定事件

<script type="text/javascript"> $(function(){ //绑定单个事件 // $("#btn1").bind('click',function(){ // alert("OK"); // }); //绑定多个事件 $("#btn1").bind({ mouseover:function(){ alert("鼠标悬念"); }, mouseout:function(){ alert("鼠标移出"); } }) //解除绑定事件 $("#btn2").click(function(){ //$("#btn1").unbind("click");//解除绑定的单个事件 $("#btn1").unbind("mouseover mouseout");//解除多个绑定的事件，用空格分隔 //$("#btn1").unbind();//解除所有绑定的事件 }); }); </script>
    
            <input type="button" id="btn1" value="点我" /><br />
            <input type="button" id="btn2" value="解除绑定" />

hover()：相当于mouseover和mouseout的组合

.abc{
                    background-color: #aaa;
                }
            </style>
            <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
            <script type="text/javascript"> $(function(){ // $("#nav li").mouseover(function(){ // $(this).addClass("abc");//当鼠标移入li元素时添加样式 // }).mouseout(function(){ // //$(this).removeClass() //当鼠标移出时删除所有样式 // $(this).removeClass("abc") //当鼠标移出时删除指定样式 // }); $("#nav li").hover( function(){ $(this).addClass("abc");//当鼠标移入li元素时添加样式 }, function(){ $(this).removeClass("abc") //当鼠标移出时删除指定样式 } ); }); </script>

togger()：
               a) 鼠标连续点击
               b) 显示和隐藏

<script type="text/javascript"> $(function(){ //点击当前页面时显示红绿蓝的背景色 $("body").toggle( function(){ $(this).css("background-color","red"); }, function(){ $(this).css("background-color","green"); }, function(){ $(this).css("background-color","blue"); } ); }); </script>
        </head>
        <body>
            测试
        </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery trigger()事件使用

一、常用事件在页面加载完成时自动触发input的点击事件，在移动端可以实现自动弹出输入法，获得焦点 $("input:first").trigger("clic

本是古典何须时尚/ 2024年02月18日 21:14/ 0 赞/ 50 阅读

相关 Jquery 事件

$(document).ready(function () { $('food-0').on('click', function () {

骑猪看日落/ 2022年08月02日 04:39/ 0 赞/ 202 阅读

相关 jQuery代码优化：事件委托篇

随着DOM结构的复杂化和Ajax等动态脚本技术的运用，事件委托自然浮出了水面。jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文

ゝ一纸荒年。/ 2022年07月25日 19:28/ 0 赞/ 195 阅读

相关 jquery事件

处理简单的事件按钮的点击事件是最常见的了，如下, 通过3个按钮想改变测试div的颜色 <div class="mydiv" style="width: 12

秒速五厘米/ 2022年05月26日 23:10/ 0 赞/ 212 阅读

相关 jQuery使用事件依托

/如果使用事件依托，就算在绑定事件之后加入子元素，该子元素上任然会被绑定事件/ $("button").click(function () {

末蓝、/ 2022年05月19日 13:38/ 0 赞/ 120 阅读

相关 jQuery的事件(代码演示如何使用)

1、jQuery的事件有哪些？ javscript的事件：onClick,onmouseover jquery的事件：click,mouseover

青旅半醒/ 2022年05月17日 11:29/ 0 赞/ 147 阅读

相关代码演示

int main(void) { u8 XYZ_Value[3]; u8 temp; LED_Init(

忘是亡心i/ 2022年03月28日 03:12/ 0 赞/ 259 阅读

相关关于jQuery的keyup()事件的使用

jQuery是个非常优秀的前端的框架内，我们这次来接收一下keyup事件，来看一下官方给出的说法keyup事件会在按键释放时触发。说普通一点就是这个事件会当你按完键盘就触发这个

心已赠人/ 2021年12月15日 09:39/ 0 赞/ 307 阅读

相关用最简的代码和例子演示如何使用jQuery进行单元格合并

前言这几天的项目再次应用到了表格中单元格合并的功能，之前的有个项目是只在某一列中进行合并操作，因此代码是遍历每行的某一列单元格，而这次的需求比较复杂，列数很多，都可以动

Bertha 。/ 2021年09月11日 06:14/ 0 赞/ 392 阅读

相关追加的html代码使用jquery的click事件无效

追加的html代码使用jquery的click事件无效在动态增加的内容中包含点击按钮，但是通过jquery的click无法触发

朱雀/ 2020年07月02日 07:36/ 0 赞/ 808 阅读