专栏首页学习猿地Web前端学习 第4章 jQuery 2 jQuery常用方法
原创

Web前端学习 第4章 jQuery 2 jQuery常用方法

一、事件概述

事件的基本概念

上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件的概念,通过事件我们可以加强用户与浏览器的交互性,例如可以实现当用户点击某个元素的时候,对元素做一些操作,或是移动鼠标,对元素做一些操作。

事件的分类

事件主要可以分为以下几类:

  • 鼠标事件
  • 键盘事件
  • 文档事件
  • 表单事件
  • 触摸事件
  • 自定义事件

本章我们主要讲解鼠标事件。

二、鼠标单击事件

我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示:

1 $("selector").click(function(){
2     //事件触发执行的代码
3 })

我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素的时候,就会执行花括号中的代码。

输出文字

我们现在实现一个功能,当我们点击一个按钮的时候,在控制台输出"hello world",代码如下所示。

1 <body>
2     <button>按钮</button>
3     <script src="script/jquery.js"></script>
4     <script>
5         $("button").click(function(){
6             console.log("hello world");
7         })
8     </script>
9 </body>

切换图片

结合我们上一章的内容,来实现一个功能,当我们点击按钮的时候,将一张图片切换成另一张图片,代码如下所示。

1 <body>
2     <img src="images/0302_img0.jpg">
3     <script src="script/jquery.js"></script>
4     <script>
5         $("img").click(function(){
6             $(this).attr("src","images/0302_img1.jpg")
7         });
8     </script>
9 </body>

在上面的代码中,$(this)对应的就是我们点击的这个元素,也就是img标签,当我们点击img标签的时候,使用attr方法将其src属性设置成另一张了图片的地址,这样就实现了图片的切换。

获取索引

接下来我们要实现一个更复杂的效果:点击一个数字列表来实现切换图片的功能,列表有三个数字,对应着三张不同的图片。

要实现这样的功能,很多同学会想到,给数字列表分别绑定事件,每一个事件都对应不同的图片就可以了,虽然这样可以实现我们要的功能,但是如果需求又增加了两张图片,那我们就又要多定义两个事件,所以这个方案是不合理的。

我们需要的是用一个选择器找到所有的数字列表,让后统一绑定一个事件,然后在点击数字列表的时候,让程序找到我们点击的是第几个,然后切换到对应的图片,就可以了。下面的代码可以让我们判断是第几个元素触发了事件,当点击时会输出对应的下角标。

 1 <body>
 2     <ul>
 3         <li>1</li>
 4         <li>2</li>
 5         <li>3</li>
 6     </ul> 
 7     <script src="script/jquery.js"></script>
 8     <script>
 9         $("li").click(function(){
10             var i = $(this).index();
11             console.log(i);
12         })
13     </script>  
14 </body>
  • 在上面的代码中,index方法可以获取元素的索引,索引就是当前元素在其同级的元素中排第几个,从0开始计数。
  • 我们将index获取到的索引值赋值给变量i,并输出i就看到了这个元素的索引。

切换图片

找到了列表的索引,我们下一步就要实现图片切换的功能了,首先我们需要了解数组的概念,数组是一个集合,我们将3章图片的路径放到了数组中,这样我们就可以通过数组的下标来获取到数组的元素了。

1 var arr = ["images/0302_img0.jpg","images/0302_img1.jpg","images/0302_img2.jpg"];
2 arr[0]  //images/0302_img0.jpg
3 arr[1]  //images/0302_img1.jpg
4 arr[2]  //images/0302_img2.jpg

上面的代码可以了解到,我们可以通过数组的下标来获取数组中的元素。

接下来,我们结合之前学过的方法来实现一个图片切换的效果,代码如下所示。

 1 <body>
 2     <ul>
 3         <li>1</li>
 4         <li>2</li>
 5         <li>3</li>
 6     </ul> 
 7     <img src="images/0302_img0.jpg">
 8     <script src="script/jquery.js"></script>
 9     <script>
10         var arr = ["images/0302_img0.jpg","images/0302_img1.jpg","images/0302_img2.jpg"];
11         $("li").click(function(){
12             var i = $(this).index();
13             var url = arr[i];  //获取图片的地址
14             $("img").attr("src",url);  //将图片的src属性设置成数组中指定的图片地址
15         })
16     </script>  
17 </body>

这样,当我们点击数字列表的时候,就可以实现图片切换的功能了。

三、其他鼠标事件

上一节我们说了鼠标单击事件,其实鼠标事件还有很多,这节我们讲解鼠标移入,移出和移动事件。

鼠标移入移出改变样式

鼠标的移入和一出事件分别是mouseenter和mouseleave。我们来实现一个功能,当我们的鼠标移入一个div的时候,让其变为红色,移出的时候,让其变为绿色,代码如下:

    .box{
            width:100px;
            height:100px;
            background-color:red;
        }
        .bg{
            background-color: green
        }

    <div class="box"></div>
    <script src="script/jquery.js"></script>
    <script>
        $(".box").mouseenter(function(){
            $(this).addClass("bg");
        }).mouseleave(function(){
            $(this).removeClass("bg");
        })
    </script>  

这里我们使用了链式操作,用一个选择器,绑定两个属性。

鼠标移入和移出事件可以简写成一个hover事件,上面的代码可以简写如下所示:

 1 <!DOCTYPE html >
 2 < html  lang =“ en ” >
 3 < 头>
 4     < meta  charset =“ UTF-8 ” >
 5     < 标题>文档</ 标题>
 6     < 样式>
 7         。框 {
 8             宽度:100 像素 ;
 9             高度:100 像素 ;
10             背景色:红色;
11         }
12         。bg {
13             背景色:绿色
14         }
15     </ style >
16 </ head >
17 < 身体>
18     < div  class =“ box ” > </ div >
19     < 脚本 src =“ script / jquery.js ” > </ 脚本>
20     < 脚本>
21         $ (“ .box” )。悬停(function (){
22             $ (这个)。addClass (“ bg” );
23         } ,函数(){
24             $ (这个)。removeClass (“ bg” );
25         } )
26     </ 脚本>  
27 </ body >
28 </ html >

hover有方法有两个参数,都是函数,分别对应着mouseenter和mouseleave的事件,这样写的效果与上面完全相同。

鼠标移动获取坐标

鼠标在元素上移动的时候也会触发事件,下面我们来实现一个功能,当鼠标移动到一个div的时候,获取鼠标在网页页面上的坐标,代码如下所示:

 1 <!DOCTYPE html >
 2 < html  lang =“ en ” >
 3 < 头>
 4     < meta  charset =“ UTF-8 ” >
 5     < 标题>文档</ 标题>
 6     < 样式>
 7         。框 {
 8             宽度:300 像素 ;
 9             高度:300 像素 ;
10             边框:1 px纯红色;
11         }
12     </ style >
13 </ head >
14 < 身体>
15     < div  class =“ box ” > </ div >
16     < 脚本 src =“ script / jquery.js ” > </ 脚本>
17     < 脚本>
18         $ (“ .box” )。mousemove (函数(e ){
19             var  x  =  e 。pageX ;
20             var  y  =  e 。pageY ;
21             控制台。log (“ x轴的坐标是” + x );
22             控制台。log (“ y轴的坐标是” + y );
23         } )
24     </ 脚本>  
25 </ body >
26 </ html >
  • 在上面的代码中e是事件对象,我们可以通过它获取到x轴和y轴的坐标。
  • 然后通过console.log()方法在控制台输出x坐标和y坐标。

课后练习

  1. 滑动显示和隐藏的右边栏,点击按钮弹出,电气其他位置隐藏。
  2. 让图片跟随鼠标移动。
  3. 返回顶部

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第4章 jQuery 2 jQuery常用方法

    上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件的概念,通过事件我们可以加强用户与浏览器的交互性,例如可以实现当用户点...

    学习猿地
  • Web前端学习 第3章 JavaScript基础教程14 DOM基础

    我们可以通过DOM提供的querySelector方法来获取元素,然后进一步操作它的样式 示例代码如下:

    学习猿地
  • 学习猿地 python教程 django教程10 Django中的用户认证

    Django带有一个用户认证系统。它处理用户帐户,组,权限和基于cookie的用户会话。本文档的这一部分解释了默认实现如何开箱即用,以及如何[扩展和定制](ht...

    学习猿地
  • 【融职培训】Web前端学习 第4章 jQuery 2 jQuery常用方法

    上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件的概念,通过事件我们可以加强用户与浏览器的交互性,例如可以实现当用户点...

    学习猿地
  • 仿uc下部弹出菜单

    先说说我怎么会无聊到这种地步去弄这个代码呢,在今年2月份的时候公司本来要做个这种弹出的菜单的,有5个按钮每个都有一个菜单,记得网上有仿UC菜单的源码,就下下来看...

    xiangzhihong
  • 厚土Go学习笔记 | 11. for循环 go语言只有for循环

    Go 只有一种循环结构—— for 循环。 基本的 for 循环包含三个由分号分开的组成部分: 初始化语句:在第一次循环执行前被执行 循环条件表达式:每轮迭代开...

    李海彬
  • SQL查询优化实践

    关于SQL语句的优化的方法方式,网络有很多经验,所以本文抛开这些,设法在DAO层的优化和数据库设计优化上建树,并列举两个简单实例

    梁规晓
  • iPhoneX上的Face ID安不安全?苹果白皮书给出答案!

    近日苹果分享了一份FaceID的白皮书,详细地说明了iPhone X的Face ID是如何工作,在什么样的情况下Face ID才会开启使用,以及如何设置Face...

    安智客
  • 【干货】关于数据科学的十本好书

    《Python Machine Learning》 ? Python 是建议数据科学家应该学习的最顶尖的语言,掌握这种技能协商薪水时能得到更多。对任何数据科学...

    小莹莹
  • 聊聊eureka的TaskDispatcher

    eureka-core-1.8.8-sources.jar!/com/netflix/eureka/cluster/ReplicationTask.java

    codecraft

扫码关注云+社区

领取腾讯云代金券