jQuery几个简单的点击事件

最新推荐文章于 2024-06-03 17:18:43 发布
最新推荐文章于 2024-06-03 17:18:43 发布
阅读量565 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tss139/article/details/80338140
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(function(){$("#btn").click(function () {
		$("#p").text("<span>我要吃屎</span>");
	});
});
	$(function(){
		$("#text").focus(function () {
		$("#sp").text("狗天天");
	});
});
	$(function(){
		$("#text").blur(function () {
		$("#sp").text("狗香香");
	});
});
	$(function(){
		$("#div").mouseover(function () {
		$("#div").css("background-color","red");
	});
});
	$(function(){
		$("#div").mouseout(function () {
		$("#div").css("background-color","black");
	});
});
</script>
<style>
	.div{
		height: 200px;
		width: 200px;
		border: 1px solid red;
	}
</style>
</head<script type="text/javascript"><body>
	点下按钮<br/>
	<input type="text"  id="text" /><span id="sp"></span>><br/>
	<input type="button" id="btn" value="点我""/>
	<p id="p"></p>
	<div id="div" class="div">
		
	</div>
</body>
</html>

tssit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 7801
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jQuery实现点击事件的四种方法
juejiangjianchi的博客
07-31 1721
1、 <button id="but" onclick="but()"></button> function but() { alert("but") } 2、 <button id="but"></button> $("#but").click(function(){ alert("but") }); 3、 <button ...
jQuery
qq_50748038的博客
08-26 6344
jQuery事件的基本使用绑定和解绑，事件委托和jQuery中插入内容、克隆节点的方法，了解jQuery静态方法在数组和对象上的操作以及字符串操作
jQuery的click点击方法合集
me_Jackyoyo的博客
04-20 3219
$("#tb2").on('click', 'i', function () { }); // 二次点击取消选中 function badReactionClick() { $('body').on('click', '.badReactionDescription input[id^="bad"]', function () { var name = $(this).attr("name"); $(":radio[name=" + name + "]:not(
vue3+ts 点击一个按钮执行另一个按钮的默认事件
最新发布
weixin_52517566的博客
06-03 212
先定义一个按钮的方法，在通过ref获取第二个按钮，通过exportBtn.value!拿到第二个按钮的默认事件，注意：一定要通过$el拿到按钮的节点才能执行节点的点击事件。
jQuery鼠标点击事件
柯晓楠
01-16 2万+
概念 个人理解： jQuery鼠标点击事件是最常用的事件之一，当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件，都属于鼠标点击事件的范围。常见的鼠标操作有：单击、双击、右键等等。 click() 事件函数 说明： 当用户单击鼠标左键时触发click()函数，每触发一次匹配元素的click事件，该事件函数就会被调用。 语法： 触发被选元素的click事件： $(selector...
介绍js各种事件
weixin_64965154的博客
06-02 9269
当用户将该元素拖到可放置的元素上并释放鼠标按钮时，将移动该元素到可放置的元素中。在这个例子中，我们获取了ID为“myElement”的元素，并使用addEventListener()方法添加了一个鼠标移动事件监听器。在这个例子中，我们获取了ID为“myButton”的按钮元素，并使用addEventListener()方法添加了一个点击事件监听器。点击事件是指当用户单击页面上的某个元素时触发的事件。鼠标移动事件是指当用户将鼠标移动到页面上的某个元素上时触发的事件。六、窗口大小改变事件。
jQuery中进行点击事件绑定
小脚的Blog
01-28 824
业务需求是在客户打分为0-5时，显示出文本输入框，在打分为6-10分时不需要显示，本身在设计的时候将这个文本输入框设置为 display:none; <li> <label><span style="color: red;">*</span>3.您对本次保单复效的整体流程是否满意？ <span>请用0-10分进行打分，10分代表非常满意，0分代表非常不满意。</span> </label> .
几个比较经典常用的jQuery小技巧
12-02
将jQuery代码与`onclick`事件结合起来，可以在元素被点击时触发指定的jQuery操作： ```html $(document).height(); var it_height = $('.move').height(); $('.move').css({'position' : 'absolute' , 'top': ...
Jquery注册事件实现方法
10-24
首先，我们需要了解jQuery中的几个核心概念，包括选择器、事件处理函数以及事件绑定。 1. jQuery选择器：jQuery的选择器基于CSS选择器，允许我们高效地定位DOM元素。例如，`$("#btnTest")` 选择了ID为`btnTest`的...
jQuery事件绑定方法学习总结(推荐)
10-21
本文将深入探讨其中的几个关键方法：on(), bind(), delegate(), 和 live()，并对比它们的使用场景和优缺点。 首先，`bind()`是jQuery早期版本中用于绑定事件处理函数的方法。在上面的例子中，它被用来在按钮元素上...
Jquery几个实例源码
09-29
在本资源中，"Jquery几个实例源码"包含了几个基于jQuery库的简单项目实例，这些实例可以帮助初学者更好地理解jQuery的基本用法和常见功能。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
jquery事件机制扩展插件 jquery鼠标右键事件
10-28
以下是一个简单的jQuery鼠标右键事件插件的实现： ```javascript /* 鼠标右键插件 */ (function($) { $.fn.extend({ // 定义鼠标右键方法，接收一个函数参数 "rightClick": function(fn) { // 禁止系统的右键...
【jquery常见事件】Jquery常见事件应用汇总【附应用场景】
赏樱看雪撸代码
05-29 1294
jquery双击事件、jquery单击事件、jquery派发事件、阻止冒泡、jquery绑定与解绑事件、jquery鼠标移动事件等。
jQuery事件(1)
2401_84094620的博客
04-13 1007
语法： $().click(function(……){})说明：鼠标单击操作（并不是只有按钮才有，我们可以为任何一个元素添加单击操作）2：鼠标移入移出 mouseover mouseout此处使用了链式调用，对同一个对象进行多种操作，可以节省代码量。3：鼠标按下与鼠标松开 mousedown 与mouseup。
jQuery事件(1)，终于彻底把握了
2401_84092456的博客
04-04 921
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题。
一分钟带你简单了解jQuery
热门推荐
Turniper的博客
08-20 2万+
JavaScript库 为了简化JavaScript开发，第三方厂商开发了JavaScript库。 在目前整体的前端市场中最常用的JavaScript库有以下四种： 主流JavaScript库 1.jQuery 2.Vue.js 3.AngularJS 4.React 这些JavaScript库其目的都是相同的，就是帮助前端开发工程师降低开发的难度，并且提高开发的效率。 在这些主流的JavaScript库中，使用最广，案例最多，同时官方也给了最好支持的那必然就是jQuery。 jQuery 1.jQuery
jQuery的click事件一次点击执行多次的原因与解决办法
zhuimenghou的博客
08-14 4088
在js中，使用了jQuery的$("#id").on(“click”,function(e) {}方法，而且在js中，方法声明如下 function orderCancle() { $("#id").on(“click”,function(e) {} } 而且这个方法在多个ajax返回成功后，被多次调用，即多次执行了 orderCancle() ； 最后点击的时候，出现了点击一次触发多次click事件的结果。查了资料才发现，jquery的click 不是 替换原有的function，而是接着添加。 解决办
Jquery中事件
m0_73030012的博客
09-17 1390
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery是为事件处理特别设计的语法：$(selector).toggle(fun1, fun2,fun3-----)第一个方法和第二个方法是必须的，后面是可选的。注意：这个方法在1.8之前可以使用的，目前已经不支持！！
jQuery事件对象属性详解与实战
jQuery的使用通常涉及以下几个步骤：首先，从官方站点下载最新版的jQuery库文件，然后在HTML文档中引入这个文件。一旦jQuery库加载完成，我们就可以使用`$(document).ready()`函数来确保所有DOM元素加载完毕后再执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值