开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当有多个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 使用技巧总结

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的筛选,事件,效果,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

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的元素。您可以将几乎任何内容放到该元素中。...它应该有一个data-target属性来告诉Bootstrap，在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。...当设置为“静态”时，当在模态主体外的任何地方点击时，模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能，当设置为false时，Esc键不会关闭模式对话框。...show属性用于通过JavaScript切换模式的可见性。当设置为true时，模式对话框将自动显示，不需要单击任何句柄元素。

28.3K4 0

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

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

6.4K0 0

21.jQuery

() "请输入关键字" CSS 1.addClass（为每个匹配的元素添加指定的类名） 111 $('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

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方法则是删除标签中的类样式： <!...，还有一个css方法可以添加样式，以键值的方式添加： <!...控制标签通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签： <!

7K1 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方法: <script type="text/javascript...trigger(type,[data])函数式<em>jQuery</em>提供<em>的</em><em>事件</em>触发器之一，其作用是对页面上所有匹配<em>的</em>元素触发某一<em>类</em>型<em>的</em><em>事件</em>。

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.6K5 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

jQuery (二)

使用jQuery处理事件事件处理一个栗子，单击p时背景变成灰色由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html <!...'gray'); }); 效果 [20180821_175532.gif] 或者使用第二个参数，添加相关的属性，完成事件的相关触发 // 单击任意p时，使其背景变成灰色 $('', { src...)}); // 触发事件时，将会添加额外的属性给事件对象，如果事件以前被监听，将会被直接触发 $('#button1').trigger({ type:'click', synthetic:true }...('js/js_jquery.js', () => { $('div').js_jquery(); // 直接使用加载的类库 }) 底层是使用XMLHttmpRequest对象来获取将要执行的脚本内容...当draggable为true的时候，可以对元素进行拖动，这是h5的内容一些注意事项不要依赖$ 插件要返回this 插件有两个或者两个以上的选项，使用对象直接传入不能污染命名空间，请在jquery

9.3K3 0

一个小时学会jQuery

因为类样式的可重用，所以多个元素可以引用同一个样式。...在jQuery中，可以获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。...); //从p节点中删除 'selected' 类 $("p").toggleClass("selected"); //如果存在就删除,否则就添加HTML代码/文本/值 4.8、内容操作 $('p')....$("p").undelegate("click") //从p节点删除由 delegate() 方法添加的所有click事件 $("p").click(); 　　//单击事件 $("p").dblclick...scriptCharset允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据。当脚本和页面字符集不同时，这特别好用。

18.5K7 1

学习jQuery这一篇就够了

addClass() 方法描述：为每个匹配的元素添加指定的样式类名。... console.log($('p').hasClass('beauty')); # 5. toggleClass() 方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类...注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出 “按钮被单击了” 按钮 $('button').on('click',function () {...需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色 1111 2222</

9935 0

waypoint_使用jQuery Waypoint创建粘性导航标题

在处理程序函数的主体中，我们使用的是jQuery的.toggleClass()方法的.toggleClass()变体，该变体提供了一种有用的速记方式：在此语法中，第二个参数确定是否将类添加到目标元素或从中删除...向下滚动时，我们将扩展其高度，并且下面的内容保持不变。不过有一个问题-要使其正常工作，您可能希望导航栏周围的任何垂直边距都应应用于nav-container而不是nav 。就是这样！...---- 步骤4：垂直偏移如果您考虑一下，在很多情况下，当元素到达浏览器视口的最边缘时触发事件并不是您想要的。幸运的是，Waypoints为此提供了一个方便的选项： offset 。...所有这些都是标准的jQuery票价：在nav添加或删除sticky类后，我们便会使用.css()覆盖元素的垂直位置，然后使用.animate()其设置为应有的水平。...如果您不仅仅想添加和删除类，还可以考虑使用LavaLamp这样的插件。在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。

3.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭