开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当有多个div时，用于添加/删除特定类的Jquery单击事件

当有多个div时，可以使用jQuery的点击事件来添加或删除特定类。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
  <div class="box">Div 3</div>

  <script>
    $(document).ready(function(){
      $(".box").click(function(){
        $(this).toggleClass("highlight");
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们首先引入了jQuery库。然后定义了一个CSS样式.highlight，用于设置被点击的div的背景颜色为黄色。

接下来，使用$(document).ready()函数来确保文档加载完毕后执行代码。在这个函数内部，我们使用.click()方法为所有class为box的div元素添加点击事件。

当点击一个div时，$(this)表示当前被点击的div元素。使用.toggleClass()方法，它会在被点击的div上切换highlight类的存在。如果div已经有highlight类，则移除它；如果没有，则添加它。

这样，每次点击一个div时，它的背景颜色会在黄色和默认颜色之间切换。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关搜索:当jquery laravel中有多个同名的类时，获取特定值 Jquery用于保留单击的链接，并在刷新后添加/删除css类当使用事件侦听器单击某个特定的div时，如何隐藏该div？当您在特定 div 上时，使用 Javascript 向 <li> 添加/删除类。当有多个实例时，删除/复制一个类的实例当多个帖子的点击有相同的div类和button类时，获取img src 当多个div具有相同的类名没有id标签时，如何使用BeautifulSoup选择特定的div？jQuery函数，用于在单击时将类添加到一个列表元素，但从先前单击的元素中删除如何在单击时将类添加到div，以及如何通过在页面上的其他位置单击来删除类随着jquery/ js中carousel中幻灯片的更改，在特定div中添加和删除类

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JQuery最全常用方法指南

在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。...这是一个Ajax事件当AJAX请求成功完成时，显示信息。...随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为selected的class。...（添加）删除绑定的事件。...例如： $("p").bind("click", function () { alert($(this).text()); }); //为每个p元素添加单击事件 $("p").unbind(); //删除所有

11K3 1

jquery对象和dom对象的相互转换

2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。...$("#msg").click(fn); //为id为msg的元素单击事件添加函数同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能对于jquery...随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为selected的class。...从每一个匹配的元素中（添加）删除绑定的事件。...例如： $("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件 $("p").unbind(); //删除所有

3.3K4 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

off(events,[selector],[fn])，在选择元素上移除一个或多个事件的事件处理函数。 bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。...事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素的click事件,然而元素和元素的click事件也同时被触发了.因此有必要对事件的作用范围进行限制.当单击元素时,只触发元素的click...事件,而不触发和元素上的 click事件.当单击元素时,只触发元素上的click事件, 而不触发元素上的click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....当鼠标移出这个元素时，会触发指定的第二个函数 toggle(fn,fn2,[fn3,fn4,…])用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 hover 在mouseover

8.3K2 0

Jquery 使用技巧总结

value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg").click(fn); //为id为msg的元素单击事件添加函数...//删除元素名称为select的class $("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class 9、完善的事件处理功能...随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为selected的class。...: 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。...//删除所有p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能其中toggle()和slidetoggle

2.9K2 0

Jquery入门基础教程免费版

比如prop()、removeProp() 类样式操作：是指对DOM属性className进行添加，移除操作。...C#就是基于事件机制编程的语言。事件的使用方法，三步骤：务必记住：找事匿 1.找对象 2.定事件 3.匿名函数 3.0 常用事件 Blur事件当元素失去焦点时触发 blur 事件。...Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件方法描述执行时机 click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。...('bgStyle') toggle:模拟连续点击; toggleClass:如果存在就删除一个类,如果不存在，则添加这个样式。

1021 0

Web阶段：第五章：JQuery库

Jquery 的初体验需求：使用Jquery和javascript给一个按钮绑定单击事件注意：使用Jquery之前要将第三方jar包导入 CSS样式操作 addClass() 添加样式 removeClass() 删除样式 toggleClass() 有就删除，没有就添加 offset() 设置和获取标签和坐标...click(function(){ //addClass() - 向被选元素添加一个或多个类 $divEle.addClass("redDiv blueBorder...而jquery的页面加载完成之后，会把所有注册了函数都按照注册的顺序，依次全部执行。事件 **click()** 绑定单击事件。触发单击事件 **mouseover()** 绑定鼠标移入事件。...//bind(事件字符串,回调函数),后来添加的元素不会绑定事件 //使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件 /* $(".

26.3K2 0

JavaScript类库---JQuery（一）

2、可以使用object对象，该对象的属性名是Jquery关键字时，可用于传入属性值；参数为一个函数：文档加载完毕时调用；相当于onLoad()函数；形如$(function(){})或JQuery(...，不存在就添加)：$('div').toggleClass('name1,name2'); 检测：$('div').hasClass('name');或 $('#di').is('name');只接受单个类名...$('div').data("x",1); 获取$('div').data('x'); 3、文档操作： 4、JQuery中的处理事件：　　1.事件简单注册：$("p").click(function...，第一个参数为事件名称，可为多个且用空格分开，第二个参数为处理函数；　　　　　　　　可以有三个参数，第一个参数和第三个参数为事件名与处理函数，第二个参数可为任何值，被设置为Event对象的data属性...; //触发没有命名空间的单击处理程序；　　　　　　　　$('p').trigger('click','true'/[]); //第二个参数为触发的处理程序的参数，传入数组时为多个参数；　　4

4.2K3 0

Web前端知识(四)

鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...操作类 1)添加类 - 添加一个类 addClass(class)给某个元素添加一个 CSS 类 $('div').addClass('myClass1'); 代码: 注意:类名没有”点” -添加多个类...addClass(class1 class2 class3...)给某个元素添加多个 CSS 类添加多个类时, 类名使用空格隔开 $ (‘div’).addClass(‘myClass1 myClass2...'); 升级版: 牛逼版: 2)删除类 -删除一个类 removeClass(class)删除某个元素的一个 CSS 类 $('div').removeClass('myClass1'); -...删除多个类 removeClass(class1 class2 class3…)删除某个元素的多个 CSS 类 $('div').removeClass('myClass1 myClass2');

7.4K3 0

Jump Start Bootstrap 第4章

这个ul元素应该有类”dropdown-menu”。现在，我们有了一个简单的下拉菜单，在单击链接时显示菜单。我们可以在浏览器中查看它，如图所示。 ?...添加data-dismiss使按钮在单击时关闭模式对话框。对于本体，我们需要一个包含类modal-body的div>元素。您可以将几乎任何内容放到该元素中。...它应该有一个data-target属性来告诉Bootstrap，在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。...当设置为“静态”时，当在模态主体外的任何地方点击时，模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能，当设置为false时，Esc键不会关闭模式对话框。...show属性用于通过JavaScript切换模式的可见性。当设置为true时，模式对话框将自动显示，不需要单击任何句柄元素。

28.4K4 0

WEB入门之十四 jQuery事件

事件，在该事件中通过两个匿名函数控制类名是content的div，第一个函数控制该div显示，第二个函数控制该div隐藏。...图5.1.10 hover事件 5.3.2 toggle事件该事件用于模拟鼠标的连续单击事件，第1次单击时触发第1个函数的执行；第2次单击时触发第2个函数的执行；第n次单击时触发第n个函数的执行。...div>div> 该示例与5.12差不多，只是由hover事件换成了toggle事件，当鼠标单击绿色的标题时，下面的内容就会显示出来；当鼠标再次单击绿色的标题时，下面的内容就会隐藏起来...>div align="center">删除div>添加商品多个事件用空格隔开 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数下面我们通过一个示例来演示on函数的用法，该示例让用户输入自己的身份证号，然后单击按钮时分析出用户的出生日期

811 0

WEB入门之十四 jQuery事件

的div元素设置hover事件，在该事件中通过两个匿名函数控制类名是content的div，第一个函数控制该div显示，第二个函数控制该div隐藏。...图5.1.10 hover事件 5.3.2 toggle事件该事件用于模拟鼠标的连续单击事件，第1次单击时触发第1个函数的执行；第2次单击时触发第2个函数的执行；第n次单击时触发第n个函数的执行...div> div> 该示例与5.12差不多，只是由hover事件换成了toggle事件，当鼠标单击绿色的标题时，下面的内容就会显示出来；当鼠标再次单击绿色的标题时...">产地div> div align="center">删除div> 添加商品事件中主要实现动态生成行和单元格并添加到表中，同时给所有的行绑定了鼠标单击事件，用来实现背景色的改变。

1291 0

21.jQuery

() "请输入关键字" CSS 1.addClass（为每个匹配的元素添加指定的类名） div> 111 div> $('span').addClass('c1'..."p").click(); 　　//单击事件 $("p").dblclick(); //双击事件 $("input[type=text]").focus() //元素获得焦点时,触发 focus...) //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次 $("input").keyup() //当按钮被松开时触发事件 $(window).scroll() //当用户滚动时触发事件...$(window).resize() //当调整浏览器窗口的大小时触发事件 $("input[type='text']").change() //当元素的值发生改变时触发事件 $("input...").select() //当input 元素中的文本被选择时触发事件 $("form").submit() //当提交表单时触发事件 $(window).unload() //用户离开页面时

3K9 0

02-老马jQuery教程-jQuery事件处理

该事件只适用于表单元素。 keydown([[data],fn]) $('p').keydown(fn); 当键盘或按钮被按下时，发生 keydown 事件。...如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。...],fn]) 删除由 delegate() 方法添加的一个或多个事件处理程序。...参数说明： selector:需要删除事件处理程序的选择器。 type:需要删除处理函数的一个或多个事件类型。由空格分隔多个事件值。必须是有效的事件。 fn:要删除的具体事件处理函数。...要删除特定的委派事件处理程序，提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件，使用特殊值 "**" 。

6.5K0 0

jQuery学习笔记

类与属性控制 .addCLass().hasClass().removeClass() 添加一个类，判断是否有指定类，删除类 $('body').addClass('test'); $('body')....事件类型行为事件： .click() 单击 .dbclick() 双击 .blur() 失去焦点时 .change() 值变化时 .focus() 获取焦点时 .focusin() jQuery扩展的获取焦点...deferred.done() 添加一个或多个成功回调 deferred.fail() 添加一个或多个失败回调 deferred.always() 添加一个函数，同时应用于成功和失败 deferred.progress...jQuery还提供了一个 jQuery.when()的回调管理函数，可以用于方便地管理多个事件并发的情况。...当有回调函数返回 false时终止调用链的执行 CallbackS的控制方法： callbacks.add() 添加一个或一串回调函数 callbacks.fire() 激发回调 callbacks.remove

3.5K2 0

jQuery的简单使用

通过jQuery注册事件 jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。...在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：删除样式在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式：添加样式，以键值的方式添加： <!...控制标签通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签： <!

7K1 0

前端架构师之01_JQuery

jQuery对象内部有3个元素。下标为0的元素表示其内部的DOM对象，即document对象。 length表示其内部DOM对象的个数，一个jQuery对象中可以包装多个DOM对象。...若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。 2.8 练习作业折叠菜单编写网页，设置CSS完成折叠菜单的结构和样式设置。...,function]) 当鼠标移入对象时触发鼠标事件 mouseout([[data],function]) 在鼠标从元素上离开时触发鼠标事件 click([[data],function]) 当单击元素时触发...// jQuery中的页面加载事件方法有3种语法形式，具体如下。...参数data表示将要传递给事件处理函数function的数据。参数type表示为元素添加的事件类型（多个用空格分隔）。参数over和out分别表示鼠标移入移出时的事件处理函数。

680 0

JavaScript学习笔记（四）—— jQuery入门

选择同元素类型的随后一个子元素 :nth-of-type 选择同元素类型的第n个或奇偶元素,n的值为"整数或odd或even" :only-of-type 匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素...返回键盘代码 jQuery的事件处理 1. jQuery常用的事件方法鼠标操作事件方法描述 mousedown() 鼠标的键被按下 mouseenter() 当鼠标指针进入目标时 mouseleave...方法描述 blur() 有元素或者窗口失去焦点时触发 change() 文本框内容改变时触发 error() 加载错误时触发 focus() 有元素或者窗口获得焦点时触发 select() 文本框中的字符被选择之后触发...切换与触发事件切换事件有两个方法用于事件的切换，一个是hover，一个是toggle 当需要设置鼠标悬停和鼠标移除的事件中进行切换时，使用K方法: jQuery提供的事件触发器之一，其作用是对页面上所有匹配的元素触发某一类型的事件。

11.2K5 0

JQuery基础

jQuery有两个版本： production version:用于生产、实际的网络，代码已被精简和压缩； development version：用于开发测试，可阅读源码。...事件处理程序：当HTML中发生某些事件调用的方法。...（提交表单时）,change（元素值（适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件；文档/窗口事件：load（元素已加载触发，在jQuery1.8中废除。...例如:$('p').remove('.test1'); empty()：从被选元素中删除子元素（被选元素没有被删除，相当于留了一个外壳） 4.获取/设置css类: addClass()：向被选元素中添加一个或多个类...； removeClass()：向被选元素中删除一个或多个类； toggleClass()：切换addClass()和removeClass()； css()：设置或获取css属性。

4.7K5 1

Python全栈之jQuery笔记

jQuery在进行值获取时,只会返回第一个元素对应的值. 1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为...() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击当单击元素时,发生click事件....事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件....,当必须是它的内部元素span才能触发这个事件,支持动态绑定. on注册事件的语法: 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或自定义事件) 第二个参数:selector.... zepto自定义构建地址: http://github.e-sites.nl/zeptobuilder/ touch模块封装了针对移动端常用的事件,可使用此模块进行移动端特定效果开发,这些事件有:

5.5K4 0

javaWeb核心技术第五篇之jQuery

并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more....需求分析: 当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中....技术分析: 事件文档处理 //////////////////// 步骤分析: 1.确定事件(单击事件) 给按钮派发单击事件 2.编写函数 //a.将左边选中的第一个插入到右边...},function(){ //第二个函数相当于mouseout });" - toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题...1.确定事件(单击事件) 给按钮派发单击事件 2.编写函数 //a.将左边选中的第一个插入到右边*/ $("#toRight1").click(function(){

8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭