前端基础之jQuery事件

合集 - 前端炒米粉(25)

22.前端基础之jQuery事件2024-03-23

23.前端基础之jQuery重要补充2024-03-23 24.前端框架之Bootstrap2024-03-24 25.前端补充：url编码2024-04-09

一、jQuery绑定事件的两种方式

在 jQuery 中，有两种主要的方式可以绑定事件到元素上：使用on()方法和直接使用事件处理程序属性。这两种方式在实际应用中都很常见，具体取决于开发者的偏好和需求。

1、使用 on() 方法绑定事件

on()方法是 jQuery 中用于绑定事件处理程序的主要方法。它的语法如下：

 $(selector).on(event, childSelector, data, handler);

event：要绑定的事件类型，如 "click"、"mouseover" 等。
childSelector (可选)：一个选择器字符串，用于指定要绑定事件的子元素。
data (可选)：传递给事件处理程序的数据。
handler：事件处理程序函数。

示例：

 // 使用 on() 方法绑定 click 事件
$("button").on("click", function() {
  alert("Button clicked!");
});

可以使用.on()方法绑定多个事件处理程序，或者为多个事件同时绑定同一个处理程序。例如：

 $('#myElement').on({
    click: function() {
        // 处理点击事件的代码
    },
    mouseenter: function() {
        // 处理鼠标进入事件的代码
    }
});

2、直接使用事件处理程序属性

另一种方式是直接使用事件处理程序属性，例如click()、mouseover()等。这种方式比较简单，但是不够灵活。

示例：

 // 使用 click() 方法绑定 click 事件
$("button").click(function() {
  alert("Button clicked!");
});

3、区别和建议

使用on()方法可以更灵活地处理事件，可以动态绑定事件到动态创建的元素上，也可以方便地移除事件处理程序，功能更加强大，支持事件委托。
直接使用事件处理程序属性简单直接，适用于静态页面或简单的事件处理。

一般来说，推荐使用on()方法，因为它更灵活、功能更强大，可以更好地满足复杂的交互需求。

事件

this指代的就是当前被操作对象本身（有点像面向对象的self）

 <button id="d1">点我</button>
<button id="d2">点爆</button>
 
<script>
    // 第一种
    $('#d1').click(function (){
        alert('别问，问就是牛逼')
    })
 
    // 第二种 (功能更加强大，还支持事件委托)
    $('#d2').on('click',function (){
        alert('别说，你还真牛逼')
    })
</script>

二、克隆事件

1、clone() 方法

在 jQuery 中，通过 clone() 方法可以克隆元素，包括元素的事件处理程序。当你使用 clone() 方法克隆一个元素时，克隆的元素会保留原始元素的事件处理程序。这意味着，如果原始元素绑定了事件，克隆后的元素也会具有相同的事件处理程序。

2、示例

下面是一个简单的示例，演示如何使用 clone() 方法克隆一个带有点击事件的按钮：

 <!DOCTYPE html>
<html>
<head>
  <title>Clone Event Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<button id="d1">美女荷官，点击就送</button>
 
<script>
    $('#d1').on('click',function (){
        // console.log(this)  // this指代的就是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  // 克隆默认情况下只可能html和css，不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件
    })
</script>
 
</body>
</html>

根据这个示例，我们知道在 jQuery 的 clone() 方法中，可以传递一个参数来指示是否克隆元素的事件处理程序。当参数为 true 时，会克隆元素及其相关的事件处理程序。如果不传递参数或参数为 false，则默认情况下不会克隆事件处理程序。

在上述代码中，通过将 true 作为参数传递给 clone() 方法，确保了克隆的按钮保留了原始按钮的点击事件处理程序。这样，当点击原始按钮时，会触发相同的事件处理程序，并将克隆的按钮插入到 body 元素后面。

因此，使用 clone() 方法可以方便地克隆元素及其事件处理程序，使得克隆后的元素具有与原始元素相同的行为。

3、总结

（1）console.log(this) ：this指代的就是当前被操作的标签对象。

（2）$(this).clone().insertAfter($('body')) ：克隆默认情况下只克隆html和css，不克隆事件。

（3） $(this).clone(true).insertAfter($('body')) ：括号内加true即可克隆事件

三、自定义模块框

模态框的内部本质就是给标签移除或者添加上hide属性

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
   <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128, 128, 128, 0.4);
            z-index: 99;
        }
 
        .modal {
            position: fixed;
            height: 400px;
            width: 400px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 100;
 
        }
 
        .hide {
            display: none;
        }
 
    </style>
 
</head>
<body>
<div>我是最下面的</div>
<button id="d1">给我出来</button>
<div class="cover hide"></div>
<div class="modal hide">
    <p>username: <input type="text"></p>
    <p>password: <input type="password"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>
<script>
    let $coverEle = $(".cover");
    let $modalEle = $(".modal");
    $('#d1').click(function (){
        // 将两个div标签的hide类属性转移
        $coverEle.removeClass('hide');
        $modalEle.removeClass('hide');
    })
    $('#d2').on("click",function (){
        $coverEle.addClass("hide");
        $modalEle.addClass("hide");
    })
</script>
</body>
</html>

四、左侧菜单

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .left {
            float: left;
            background-color: blueviolet;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .item {
            border: 1px solid red;
        }
        .hide {
            display: none;
        }
    </style>
 
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜单一
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        <div class="title">菜单二
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        <div class="title">菜单三
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
    </div>
</div>
 
<script>
    $('.title').click(function (){
        // 先给所有的item加hide
        $('.item').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
</body>
</html>

尝试用一行代码描述

 $(':title').not(this).children().toggleClass('hide')

五、返回顶部

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: darkcyan;
            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
 
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: green"></div>
<div style="height: 500px;background-color: blue"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>
    $(window).scroll(function (){
        if ($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>
</body>
</html>

六、自定义登录校验

在获取用户的用户名和密码的时候，用户如果没有填写，应该给用户展示提示信息

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>
    username：<input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>
    password：<input type="password" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function (){
        // 获取用户输入的用户名和密码，做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text('用户名不能为空')
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function (){
        $(this).next().text('')
    })
</script>
 
 
</body>
</html>

七、input实时监控

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
    $('#d1').on('input',function (){
        console.log(this.value)
    })
</script>
 
</body>
</html>

八、hover事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p id="d1">权浩是个大傻逼</p>
<script>
    // $('#d1').hover(function (){  // 鼠标悬浮 + 鼠标移开
    //     alert(111)
    // })
    $("#d1").hover(
        function (){
            alert('鼠标悬浮时的我')
    },
        function (){
            alert('鼠标移开时的我')
    })
</script>
</body>
</html>

九、键盘按键按下事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
 
<script>
    $(window).keydown(function (event){
        console.log(event.keyCode)
        if(event.keyCode === 16){
            alert('你按到了shift键')
        }
    })
</script>
 
</body>
</html>xxxxxxxxxx <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><script>    $(window).keydown(function (event){        console.log(event.keyCode)        if(event.keyCode === 16){            alert('你按到了shift键')        }    })</script></body></html><script>    $(window).keydown(function (event){        console.log(event.keyCode)        if(event.keyCode === 16){            alert('你按到了shift键')        }    })</script>

posted @ 2024-03-23 17:31 Xiao0101 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之jQuery重要补充

· 前端基础之jQuery进阶

· 【4.0】前端基础jQuery之jQuery事件

· 【16.0】前端基础jQuery之jQuery事件

· jQuery事件

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

xiao

前端基础之jQuery事件

一、jQuery绑定事件的两种方式

1、使用 on() 方法绑定事件

2、直接使用事件处理程序属性

3、区别和建议

事件

二、克隆事件

1、clone() 方法

2、示例

3、总结

三、自定义模块框

四、左侧菜单

五、返回顶部

六、自定义登录校验

七、input实时监控

八、hover事件

九、键盘按键按下事件

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

目录

	// 使用 on() 方法绑定 click 事件
	$("button").on("click", function() {
	alert("Button clicked!");
	});

	$('#myElement').on({
	click: function() {
	// 处理点击事件的代码
	},
	mouseenter: function() {
	// 处理鼠标进入事件的代码
	}
	});

	// 使用 click() 方法绑定 click 事件
	$("button").click(function() {
	alert("Button clicked!");
	});

	<button id="d1">点我</button>
	<button id="d2">点爆</button>

	<script>
	// 第一种
	$('#d1').click(function (){
	alert('别问，问就是牛逼')
	})

	// 第二种 (功能更加强大，还支持事件委托)
	$('#d2').on('click',function (){
	alert('别说，你还真牛逼')
	})
	</script>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Clone Event Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>

	<button id="d1">美女荷官，点击就送</button>

	<script>
	$('#d1').on('click',function (){
	// console.log(this) // this指代的就是当前被操作的标签对象
	// $(this).clone().insertAfter($('body')) // 克隆默认情况下只可能html和css，不克隆事件
	$(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件
	})
	</script>

	</body>
	</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
	<style>
	.cover {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(128, 128, 128, 0.4);
	z-index: 99;
	}

	.modal {
	position: fixed;
	height: 400px;
	width: 400px;
	background-color: white;
	top: 50%;
	left: 50%;
	margin-left: -300px;
	margin-top: -200px;
	z-index: 100;

	}

	.hide {
	display: none;
	}

	</style>

	</head>
	<body>
	<div>我是最下面的</div>
	<button id="d1">给我出来</button>
	<div class="cover hide"></div>
	<div class="modal hide">
	<p>username: <input type="text"></p>
	<p>password: <input type="password"></p>
	<input type="button" value="确认">
	<input type="button" value="取消" id="d2">
	</div>
	<script>
	let $coverEle = $(".cover");
	let $modalEle = $(".modal");
	$('#d1').click(function (){
	// 将两个div标签的hide类属性转移
	$coverEle.removeClass('hide');
	$modalEle.removeClass('hide');
	})
	$('#d2').on("click",function (){
	$coverEle.addClass("hide");
	$modalEle.addClass("hide");
	})
	</script>
	</body>
	</html>

xiao

前端基础之jQuery事件

一、jQuery绑定事件的两种方式

1、 使用 on() 方法绑定事件

2、直接使用事件处理程序属性

3、区别和建议

事件

二、克隆事件

1、clone() 方法

2、示例

3、总结

三、自定义模块框

四、左侧菜单

五、返回顶部

六、自定义登录校验

七、input实时监控

八、hover事件

九、键盘按键按下事件

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

目录

1、使用 on() 方法绑定事件