当前位置：网站首页 > 热门文章 > 正文

「融职培训」Web前端学习第4章 jQuery 2 jQuery常用方法

bigegpt 2024-10-24 09:01 3 浏览

一、事件概述

事件的基本概念

上一章我们讲解了使用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坐标。

课后练习

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

【融职教育】在工作中学习，在学习中工作

jquery鼠标移入移出

上一篇：vue项目引入jquery Vue项目引入三方库打包后的体积过大怎么处理
下一篇：卓象程序员:JQ实现简单轮播图效果

「融职培训」Web前端学习第4章 jQuery 2 jQuery常用方法

一、事件概述

二、鼠标单击事件

三、其他鼠标事件

课后练习

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

Ceph运维手册(基于P版本)

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程

「融职培训」Web前端学习 第4章 jQuery 2 jQuery常用方法

一、事件概述

二、鼠标单击事件

三、其他鼠标事件

课后练习

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

Ceph运维手册(基于P版本)

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程

「融职培训」Web前端学习第4章 jQuery 2 jQuery常用方法