JQuery 如何选择带有多个class的元素

最新推荐文章于 2019-10-18 17:57:27 发布
最新推荐文章于 2019-10-18 17:57:27 发布
阅读量74 收藏
点赞数
文章标签： javascript ViewUI

Q: 

比如下面代码需要选择同时带有这几个class的元素，怎么写？

1<div class="modal fade in"></div>

A: 

1. 依次过滤

1$(".modal.fade").filter("in")

2. 属性选择

1$("[class='modal fade in']") //此处顺序必须一致才行

3. 直接选择

1$(".modal.fade.in")
【jQuery】第四课——掌握jQuery选择器的使用，会使用jQuery选择器获取元素
王迪
09-08 2527
知识点：了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素，比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用，了解使用jQuery选择器的注意事项。 页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处...
jQuery 选择同时包含两个class的元素的实现方法
weixin_33714884的博客
11-23 983
Jquery选择器 多个 class属性参照以下案例 &lt;element class="a b good list card"&gt; 1. 交集选择： $(".a.b") --选择同时包含a和b的元素。 2. 并集选择：$(".a, .b") --选择包含a或者包含b的元素。 3.依次过滤 $(“.good”).filter(“.list”).filter(“.Card”)...
jquery 选择带多个class的元素
readonlyfile
11-07 1413
转载自：http://shawphy.com/2010/08/multiple-class.html ------------------------------------------ 今天收到读者来信，询问如何选择如下的元素 这里有个特征，就是需要选择同时带有这几个class的元素。 或者也被误认为选择一个带有空格的class。 经过测试，使用选择特殊的转义符号来做 $(“.g
jQuery 多个 classes 选择器
xyjikl
12-14 467
实例 选取 class 为 "intro"、"demo" 或 "end" 的所有元素： $(".intro,.demo,.end") 尝试一下 » 定义和用法 .class 选择器可用于选取多个 class。 注意：用逗号分隔每个 class。 注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。 语法 $(".class1,.class2,.c
jQuery得到多个值只能用取Class ,不能用取ID的方法
10-20
下面是一些使用jQuery选择和操作Class元素的例子： 1. 获取所有Class为"checkApply"的元素： ```javascript var checkBoxs = $(".checkApply"); ``` 2. 遍历这些元素并设置其值： ```javascript checkBoxs.each...
jQuery带分页的下拉选择框插件
06-24
例如，可以使用以下代码片段来创建一个带有分页和自动补全的下拉选择框： ```html <select class="pagination-autocomplete"> <!-- 这里放置你的选项 --> $(document).ready(function() { $('.pagination-...
jQuery 查找元素操作实例小结
10-16
使用class选择器可以通过类名找到所有带有该类的元素。格式为$('.className')，例如： $('.content')。 3. 标签选择：可以直接通过HTML的标签名来选择页面上的元素，例如： $('div') 会选取页面上所有的div标签。也...
jQuery类名选择器（.class）
实践求真知
04-12 7933
一 介绍 类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。 在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。 类名选择器很好理解，在大学的时候大部分人一定都选过课，可以把CSS类名理解为课程名称，元素理解成学生，学生可以选择多门课程，而一门课程又可以被多名学生所选择。 CSS类与元素的关系既可
jQuery 多个class选择器
聆听。。花开雨落的博客
10-18 2603
选取 class 为 "intro"、"demo" 或 "end" 的所有元素： $(".intro,.demo,.end") 定义和用法 .class选择器可用于选取多个 class。 注意：用逗号分隔每个 class。 注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。 ...
jQuery如何选择有多个class的元素
Lcl1562871004的博客
12-07 1204
&amp;lt;div class=&quot;exp1 exp2 exp3&quot;&amp;gt;&amp;lt;/div&amp;gt; 有3种方法： 依次过滤 $(&quot;.xep1.exp2&quot;).filter(“exp3”) 属性选择 $(&quot;[class=‘exp1 exp2 exp3’]&quot;) //此处顺序必须和元素中顺序一致才行 直接选择 $(&
jquery多class选择器
趴趴熊的博客
06-01 516
$(document).ready(function(){ $(".a.c").click(function(){ alert(1); }); }); 11 12
_009_jQuery 选择同时包含两个class的元素的实现方法
poiuyppp的博客
06-04 990
jQuery 选择同时包含两个class的元素的实现方法Jquery选择器 多个 class属性参照以下案例 &lt;element class="a b good list card"&gt;1. 交集选择： $(".a.b") --选择同时包含a和b的元素。2. 并集选择：$(".a, .b") --选择包含a或者包含b的元素。3.依次过滤  $(“.good”).filter(“.list”...
使用jquery选择多个相同class中的一个的方法
热门推荐
leixu1027的博客
09-26 1万+
$(".swiper-wrapper .swiper-slide:nth-of-type(1)").append(''); .swiper-wrapper父级class .swiper-slide子级 :nth-of-type(1) 跟在子级后面，1表示相同class中第一个
jQuery 选择同时包含两个class的元素
weixin_33958585的博客
11-25 663
<element class="a b"> 交集选择： $(".a.b")--选择同时包含a和b的元素。 并集选择：$(".a, .b")--选择包含a或者包含b的元素。 ...
jquery获取多个class的元素
caixiajia的专栏
04-10 6108
需求： 获取删除div的id 删除 方法： $(".list-li.active").find(".btn").attr('id');  交集选择： $(".a.b")--选择同时包含a和b的元素。 并集选择：$(".a, .b")--选择包含a或者包含b的元素
jquery 如何获取有多个class名的元素
weixin_33744141的博客
12-21 3298
  1.情景展示 　　如何使用jquery获取带有多个class样式的元素？  2.解决方案 $("p.opinion.mb15.gray2e.max2line.mr20:contains('大摩健康PK中海医疗保健')").each(function(){ window.open($(this).parent().attr('href')); });    ...
jquery隐藏多个class
最新发布
09-06
<think> 我们参考了站内引用内容，用户想要查找如何使用jQuery隐藏多个class元素的方法。根据引用[2]和引用[4]，我们可以使用jQuery选择器选择多个class元素，然后调用hide()方法或者使用css()方法设置display属性为none。 具体步骤： 1. 使用jQuery选择器选择多个class元素。例如，如果我们有一组class为"myClass"的元素，我们可以使用`$(".myClass")`来选择所有具有该class的元素。 2. 调用hide()方法或者使用css()方法隐藏这些元素。 方法一：使用hide()方法 ```javascript $(".myClass").hide(); ``` 方法二：使用css()方法设置display属性 ```javascript $(".myClass").css("display", "none"); ``` 此外，根据引用[3]，我们还可以使用可见性过滤选择器来选取元素，但这里我们主要是隐藏元素，所以直接使用类选择器即可。 如果用户需要动态切换显示和隐藏，可以使用toggle()方法（引用[1]）或者slideToggle()方法（引用[4]）来实现动画效果。 例如，切换显示隐藏： ```javascript $(".myClass").toggle(); // 切换显示和隐藏 ``` 或者使用滑动效果： ```javascript $(".myClass").slideToggle(); // 以滑动方式切换显示和隐藏 ``` 根据引用[5]，如果这些class元素在iframe内部，则需要先获取iframe的内容，然后在其中查找元素。但是用户的问题中没有提到iframe，所以我们暂时不考虑。 综上所述，隐藏多个class元素最简单直接的方法是使用`$(".className").hide()`。 §§相关问题§§ 1. 如何同时隐藏多个不同class的元素？ 2. jQuery中hide()方法和css("display", "none")有什么区别？ 3. 如何通过jQuery实现元素的淡入淡出效果？ 4. 如何隐藏一个元素但保留其占位空间？ </think> 根据提供的引用信息，以下是使用jQuery隐藏多个class元素的几种常用方法： ### 方法1：使用`.hide()`直接隐藏 ```javascript // 隐藏所有指定class的元素 $(".className").hide(); // 示例：隐藏所有class为"iconfontHidden"的元素 $(".iconfontHidden").hide(); ``` **特点**：直接设置元素`display: none`，最简单高效的方式[^1]。 --- ### 方法2：使用`.toggle()`动态切换 ```javascript // 切换多个元素的显示/隐藏状态 $(".className").toggle(); // 示例：带动画效果的切换（500ms动画时间） $(".iconfontBtn").next('div').slideToggle(500); ``` **适用场景**：需要交互式切换显示状态的元素（如按钮触发）[^1][^4]。 --- ### 方法3：通过CSS属性控制 ```javascript // 直接修改CSS属性实现隐藏 $(".className").css("display", "none"); // 示例：检查状态后隐藏 if ($('.iconfontHidden').css('display') === 'block') { $(".iconfontHidden").css("display", "none"); } ``` **优势**：可精确控制样式，适合自定义需求[^1][^4]。 --- ### 方法4：结合选择器批量操作 ```javascript // 同时隐藏多组不同class的元素 $(".class1, .class2, .class3").hide(); // 示例：隐藏表格中特定<td> $("td.targetClass, td.auxClass").hide(); ``` **技巧**：通过逗号分隔多个选择器实现批量操作[^2][^3]。 --- ### 特殊场景：隐藏iframe内部元素 ```javascript // 隐藏iframe内指定class的元素 $("#iframeId").contents().find(".className").hide(); // 具体实现（兼容IE） var iframe = $("#diggerName")[0]; iframe.onload = function() { $("#diggerName").contents().find(".inquiry_title").hide(); }; ``` **注意**：需要等待iframe加载完成后操作[^5]。 --- ### 核心要点总结 1. **选择器是关键**：使用`$(".yourClassName")`精确选取目标元素[^3] 2. **隐藏原理**：本质是设置`display: none`属性 3. **性能优化**：批量操作时尽量使用组合选择器减少DOM查询次数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值