addClass()仅指向子元素(而不是嵌套元素)

addClass()是jQuery库中的一个方法，用于向选中的元素添加一个或多个类名。它的语法如下：

$(selector).addClass(classname)

其中，selector是要选中的元素，可以是一个CSS选择器、DOM元素或jQuery对象；classname是要添加的类名，可以是一个或多个类名，多个类名之间用空格分隔。

该方法的作用是将指定的类名添加到选中元素的class属性中。通过添加类名，可以改变元素的样式或实现特定的功能。

在使用addClass()方法时，需要注意以下几点：

仅指向子元素：addClass()方法只会将类名添加到选中元素的子元素上，而不会添加到嵌套元素上。这意味着如果选中的元素有多个子元素，那么这些子元素都会添加指定的类名。

下面是一个示例：

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

$('.parent').addClass('highlight');

上述代码将会给.parent元素的所有子元素添加highlight类名，即：

<div class="parent">
  <div class="child highlight">Child 1</div>
  <div class="child highlight">Child 2</div>
</div>

嵌套元素：如果需要将类名添加到嵌套元素上，可以使用find()方法来选择嵌套元素并添加类名。

下面是一个示例：

<div class="parent">
  <div class="child">Child 1</div>
  <div class="nested">
    <div class="child">Nested Child</div>
  </div>
</div>

$('.parent').find('.child').addClass('highlight');

上述代码将会给.parent元素下的所有.child元素添加highlight类名，包括嵌套在.nested元素中的子元素，即：

<div class="parent">
  <div class="child highlight">Child 1</div>
  <div class="nested">
    <div class="child highlight">Nested Child</div>
  </div>
</div>

总结一下，addClass()方法用于向选中元素的子元素添加一个或多个类名。它可以通过改变元素的样式或实现特定的功能。在使用时，需要注意仅指向子元素，如果需要添加到嵌套元素上，可以使用find()方法来选择并添加类名。

腾讯云相关产品和产品介绍链接地址：

相关·内容

小程序中点击子元素事件而不触发父元素的点击事件

在测试小程序的时候，发现了这样的一个bug，点击子元素事件d的时候触发父元素的点击事件，从而执行父级的点击事件，跳转到了父级的点击事件的页面了。 ?...catch事件绑定可以阻止冒泡事件向上冒泡当点击子集的catchtap='navmap'事件之后阻止冒泡事件向上冒泡，所以不会触发bindtap='carState'，成功解决bug,实现小程序中点击子元素事件而不触发父元素的点击事件

5.9K1 0

数组是如何随机访问元素？数组下标为什么从0开始，而不是1？

例如：二叉树，堆，图，等，是非线性表，是因为，在非线性表中，数据之间并不是简单的前后关系。数组是如何随机访问数组元素？数组是如何实现根据下标随机访问数组元素的吗？...数组若无序，插入新的元素时，可以将第K个位置元素移动到数组末尾，把新的元素，插入到第k个位置，此处复杂度为O(1)。...将多次删除操作中集中在一起执行，可以先记录已经删除的数据，但是不进行数据迁移，而仅仅是记录，当发现没有更多空间存储时，再执行真正的删除操作，这样减少数据搬移次数节省耗时。...为什么数组要从 0 开始编号，而不是1？从偏移角度理解a[0] 0为偏移量，如果从1计数，会多出K-1。增加cpu负担。...为什么循环要写成 for(inti=0;i<3;i++)而不是 for(inti=0;i<=2;i++)。

6.3K1 0

Day15:大前端

用来在网页中插入第三方页面 xhtml和 html 有什么区别 XHTML 是一个基于 XML 的置标语言 HTML是一种基本的 WEB 网页设计语言 XHTML元素必须被正确地嵌套。...image.png 如何理解 JS 中的this关键字 “this” 一般是表示当前所在的对象 JS中的this关键字由函数的调用者决定，谁调用就this就指向哪个。...如果找不到调用者，this将指向windows对象。由于 this 关键字很混乱，如何解决这个问题使用bind，call，apply函数也可以解决问题。...image.png 判断对象的数据类型 Object.prototype.toString.call(target) isType isArray() a标签不可以嵌套交互式元素 p标签不能包含块级元素...li标签可以包含div以及ul，ul的子元素应该只有li ?

3.9K2 0

通读音_Android API

(selector) .is(function(index)) 有任何元素匹配selector就返回true。如果使用判定函数，判定函数在选中的元素中执行，所以this指向当前的元素。...如果使用函数方法，这个函数在被选择的元素中执行，所以this指向的手势当前元素。...text内容，包括子元素。...vimeo.com/31950192 这个视频教程是follow-up Nettut的”How to Scrape Web Pages with Node.js and jQuery”，用 cheerio而不是...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3.5K3 0

jQuery

console.log(this);//谁调用了mouseover，然后this就是谁，且this是dom对象，使用jquery需要转换为jquery对象 }) mouseover 事件在鼠标移动到选取的元素及其子元素上时触发...mouseenter 事件只在鼠标移动到选取的元素上时触发以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover 鼠标离开事件使用mouseleave，而不是mouseout...案例-突出显示案例-手风琴淘宝服饰精品 index() $(‘li’).index() 获取li标签在兄弟元素间的索引值当父类的对象引用没有指向父类的对象，而是指向了子类的对象时，调用方法或访问变量时会怎样呢...jQuery background-color 和 backgroundColor 入口函数 $(document).ready(function(){}) $(function(){}) JQuery类操作 addClass...() $('div').addClass('current'); removeClass() $(this).removeClass('current'); toggleClass() 切换类

1.1K2 0

jQuery选择器和选取方法

blockquote”选取文档中的所有元素，而”div.note” 则选取所有class属性为”note”的元素。...注意该过滤器的序号是从1开始的，因此如果一个元素是其父节点的第一个子元素，会认为它是奇数元素，匹配的是3n+1，而不是3n。...如果传入文档元素给has()，它会将选中元素集调整为那些是指定元素祖先节点的选中元素: $("p").has("a[href]") //包含链接的段落 add()方法会扩充选区，而不是对其进行过滤或提取...不传入选择器时，它们会返回所有子元素、兄弟元素或父元素。传入选择器时，它们会过滤元素集，仅返回匹配的。...siblings()方法则返回每一个选中元素的所有兄弟元素(选中元素本身不是自己的兄弟元素)。

5.2K4 0

学习zepto.js(对象方法)

但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说明,下边介绍的方法都会返回zepto对象; add(): 支持一到二个参数...该方法判断第二个参数是否为function,如果是,就通过上下文(context)来执行,并传入两个参数,idx(下标),payload(在addClass里边,这个值为元素之前的className)...Array对象的一系列循环方法第二个参数貌似都是设置函数内部this指向的(没有资料可以证明我说的话,用之前查文档,错了别找我- -) classRE函数是一个使用缓存的动态生成正则对象的函数 ?...正则对象调用的test()方法会返回一个bool值,匹配成功为true,匹配失败为false; 最后在addClass方法中,调用className传入两个参数,第一个是元素对象,第二个是原有class...大体相同,唯有在forEach循环中,addClass是给集合push值,而removeClass是从一个字符串中replace掉值; toggleClass(): 方法使用与前两个类似,只不过多了第二个参数

2.6K8 0

JQuery碎碎念

'); 1.4 JQuery变量命名习惯 //良好的命名习惯 var $li = $('#list li'); 1.5 利用DOM原生的属性和函数 1.5.1 冗长而缓慢 $('img').click(...function () { $(this).attr('src'); }); 1.5.2 简洁而快速 $('img').click(function () { this.src;...}); 1.6 创建元素的通用语法 1.6.1 创建元素通用语法方式 $('', { text: p_text, "class": 'red', title: p_title...myList").click( function() { $(this).method(); $("#myList li").each( function() { //this并不指向...'red'); 3.4 利用链式命令，减少代码量 //链式命令，减少代码量 $("#myList li").css('border','3px').css('color','red'); 3.5 使用子查询

5.7K3 0

Web 前端开发代码规范

如：FONT-SIZE:12PX必须改为font-size:12px； 4、关于css背景图片(关键字：合并，缩写，去引号), 引号不是必须的，而且在某些浏览器上加引号反而出错： // 不推荐 .canbox...// 严格模式下会抛出异常 (function() { some = 'foo'; }()); 2、防止函数中的this指针意外指向全局。...非严格模式下，函数中未被定义或为空( null or undefined)的this会默认指向全局环境(global)。...如代码: $('div').addClass('className').html('html code').click(function(){ alert(1); }); ——使用子查询使用children...(), find(), filter()来进行子查询。

3.2K1 0

jquery常用方法

ID").bind(type,[data],fn); //绑定事件处理器函数 $("#ID").toggle(fn,fn);//注册每次点击时切换要调用的函数 1 2 3 外观效果 $("#ID").addClass...$("#ID").find(expr);//搜索所有与指定表达式匹配的元素 $("#ID").children();//获得匹配元素集合中每个元素的所有子元素 $("#ID").parent();//...(html);//把所有匹配的元素用其他元素的结构化标记包裹起来 $("#ID").empty();//删除匹配的元素集合中所有的子节点 1 2 Ajax操作 $("#ID").load(url,[data...jQuery.isPlainObject();//是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。...jQuery.param(object);//将对象的键值对转化为URL键值对字符串形式 jQuery.proxy();//调整this的指向 --------------------- 作者：三五月儿

8002 0

数据提取-PyQuery

获取当前节点 from pyquery import PyQuery as pq doc = pq(filename='demo.html') doc('#main #top') 获取子节点...'>test 2") d('p').filter('#1') #返回[] d('p').filter('.2') #返回[] # 6.find() ——查找嵌套元素...').attr('id')#返回my_id # 9.修改属性值，例： d('a').attr('href', 'http://baidu.com')把href属性修改为了baidu # 10.addClass...(value) ——为元素添加类，例： d=pq('') d.addClass('my_class')#返回[] # 11.hasClass(name...(selector=None) ——获取子元素，例： d=pq("helloworld") d.children()#返回

7143 0

Valine – 为长评论添加评论数量限制 Expend Limit

，判断元素下标大于最大值（且不能为最大值）取消隐藏 i>vmax-1&&i!...不过有人说了 valine 自带不是有吗？是的，的确有，不过仅限于单个评论字符串限制，而不能隐藏展开当条评论内多条评论，所以需求是评论数量限制，超出n条评论则隐藏，点击按钮即显示效果。...老规矩，说下思路遍历 vlist 下的直接 vcard 子元素（因为二级评论拥有相同的类名，需要只选择直接子元素）判断并添加 expend 的条件（设置限制最大显示数量）循环输出当前 vquote...subVcardMax = 3; //最大显示数量 if(subVcard.length > subVcardMax){ subVcard.parent().addClass...= undefined){ $(subVcardEach).addClass('hide'); }; };

991 0

jQuery选择器（20171026）

） b)内容过滤选择器 :contains(text)//选取含有文本内容为text的元素 :empty//选取不包含子元素或者文本的空元素 :has(selector)//选取含有选择器所有匹配的元素的元素...:parent//选取含有子元素或者文本的元素 c)可见性选择器 :hidden//选取所有不可见的元素（包括、 <div style="display...，如$("div[id][class$='Bar']" e)子元素选择器 :nth-child(index/even/odd/equation)//选取第index个子元素或者奇偶元素 :first-child...//选取每个父元素的第一个元素（返回整个文档中每个元素的第一个子元素），如$("ul li:first-child");选择每个中第1个元素 :last-child//选取每个父元素的最后一个元素...:only-child//若某子元素是其父元素中惟一的子元素，将会被匹配 f）表单对象属性选择器 :enabled//选择所有可用元素，例$("#form1:enabled") :disabled

9252 0

jQuery的三种$()

1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。...所以，$('#sId>li')所选择的是id为"sId"的所有孩子节点，即使这个的后代还有也不是它所找的范围（所找到的DOM对象，只是它本级的DOM对象。）。...而$('#sId li:not(.horizontal)')，就是指类名"sId"里面的所有li的子孙中没有horizontal类的所有元素。...举个例子 $(...).parent().find(...).addClass().end() 这里执行动作的节点是find(...)...，是一个数组对象，它所做的动作是“addClass()”，之后，用了个end()，这时所返回的东东就是指向了parent()所指向的节点，也就是执行“addClass()”动作的那个数组对象的父节点。

7883 0

第四篇爬虫技术之PyQuery 实战篇

，html()、text()方法只返回首个元素的相应内容块 4.eq(index) ——根据给定的索引号得到指定元素　　接上例，若想得到第二个p标签内的内容，则可以：　　print d('p').eq...2")　　　　d('p').filter('#1') #返回[] 　　d('p').filter('.2') #返回[] 6.find() ——查找嵌套元素...hello.com 　　d('p').attr('id')#返回my_id 9.修改属性值　　d('a').attr('href', 'http://baidu.com')把href属性修改为了baidu 10.addClass...(value) ——为元素添加类　　d=pq('') 　　d.addClass('my_class')#返回[] 11.hasClass(name)...=None) ——获取子元素　　d=pq("helloworld") 　　d.children()#返回[,

5721 0

jquery 操作css 选择器

.addClass() 　　为每个匹配的元素添加指定的样式类名　　.addClass(className) 　　　　className 为每个匹配元素所有增加的一个或多个样式名　　....addClass(function(index,currentClass)) 　　　　函数返回一个或者多个用空格隔开， index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素。...$("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式。　　...$("ul li:last").addClass(function(index){ 　　　　return "item-"+index; 　　}) 在最后一个元素上加上“item...$('#foo').toggleClass(className,add0rRemove) 就等同于　　if(add0rRemove){ 　　　　$('#foo').addClass(className

9665 0

50道JavaScript详解面试题，你需要了解一下

答案是输出为10，因为将对象传递给函数时的对象相似，仅传递其值，而不传递对内存位置的实际引用。这就是为什么更改仅影响函数范围内的参数的原因。 3、控制台输出是什么？...instanceof需要TypeScript，而typeof则不需要。 typeof在右侧使用变量名称， instanceof在左侧和右侧使用值，而不是。...不可以，因为字符串在JavaScript中是不可变的，指向字符串的变量可以分配给另一个字符串。 21、承诺链中的嵌套捕获可以捕获在承诺链中向上抛出的错误吗？...不可以，嵌套是一种用于限制catch语句范围的控制结构。用简单的话来说，嵌套的catch仅捕获其作用域及其以下范围内的故障，而不捕获嵌套范围之外的链中较高的错误。 22、控制台输出是什么，为什么？...子例程是主例程中遇到的函数，然后将其保存到对象并存储以供以后使用。例如，执行范围（变量，参数等）与子例程一起存储。

3.5K4 0

Web前端开发代码规范（基础）

如：FONT-SIZE:12PX必须改为font-size:12px； 3、关于css背景图片(关键字：合并，缩写，去引号), 引号不是必须的，而且在某些浏览器上加引号反而出错： // 不推荐 .canbox...// 严格模式下会抛出异常 (function() { some = 'foo'; }()); 2、防止函数中的this指针意外指向全局。...非严格模式下，函数中未被定义或为空( null or undefined)的this会默认指向全局环境(global)。...如代码: $('div').addClass('className').html('html code').click(function(){ alert(1); }); ——使用子查询使用children...(), find(), filter()来进行子查询。

1.8K2 1

GOGO-前端开发规范

如：FONT-SIZE:12PX必须改为font-size:12px；3、关于css背景图片(关键字：合并，缩写，去引号), 引号不是必须的，而且在某些浏览器上加引号反而出错：// 不推荐.canbox...// 严格模式下会抛出异常(function() { some = 'foo';}());复制2、防止函数中的this指针意外指向全局。...非严格模式下，函数中未被定义或为空( null or undefined)的this会默认指向全局环境(global)。...如代码:$('div').addClass('className').html('html code').click(function(){ alert(1);});复制——使用子查询使用children...(), find(), filter()来进行子查询。

2332 0

jQuery中常用的函数和属性详细解析

$("p").click( function (event, a, b) { // 一个普通的点击事件时，a和b是undefined类型 // 如果用下面的语句触发，那么a指向"foo",而...$("p").hover(function(){ $(this).addClass("over"); }, function(){ $(this).addClass("out"); } ); 元素事件列表说明...取得所有div元素中的p元素，添加background类属性 $("div").find("p").andSelf().addClass("border"); $("div").find("p").addClass...") $("div span:first-child")匹配父元素的第1个子元素 $("div span:last-child") 匹配父元素的最后1个子元素 $("div button:only-child...可以用来无缝迭代对象和数组 jQuery.extend( target, object1, [objectN] ) 扩展一个对象，修改原来的对象并返回，这是一个强大的实现继承的工具，这种继承是采用传值的方法来实现的，而不是

2.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云