当使用JQuery更改父div的背景时，子div会消失 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

【Jquery练习】tab栏切换

哈喽大家好，本次是jQuery案例练习系列第二期，本期是用jQuery实现tab栏的切换。笔者还是前端的菜鸟，还请大家多多指教呀~ 欢迎大佬指正，一起学习，一起加油！...实现思路： 1、添加点击事件 2、将当前点击按钮的背景色改成粉色 3、将兄弟节点的背景色去掉 $(document).ready(function(){...tab页面标签栏时，tab页面内容也相应发生改变，如下是实现的效果，接下来跟着笔者一起来试试吧~ HTML部分本次页面包含两部分，即tab栏标签栏和tab栏内容结构。...2、为当前选中的元素添加一个选中的样式，并清除兄弟节点的其他样式。 3、让点击的元素的子元素显示，其他元素消失。...).addClass('active').siblings().removeClass('active'); // siblings:除自己以外 // 当前指向的上级父元素的下一个子元素的索引下标出现

7.6K3 0

vue常见操作使用手法

> // 当 movirArr的数组为空的时候，做出的预加载 loading 2....-- 可以点，判断数组为不为空 --> 3.像jquery 一样，追加dom (vue 是以数据为导向的，应该摆脱jquery的 dom的繁杂操作) <el-form-item label="时间"...$route.params.sectionId === sectionId, } } 5.子->父组件的通信，vue....} } 总结套路：　子组件使用函数（事件）给父组件传递 receiveTitle 属性，然后父组件监测这个属性，给这个属性绑定方法 receiveTitle，方法传参数，这个参数就是要传递的...courseList: { type: Array } } 总结套路：父组件将变量传到子组件，需要在子组件标签上绑定这个变量，然后子组件就可以在props 里接受这个变量 7.

1.8K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

JQuery的学习

JQuery对象和JS对象区别与转换： 1.JQuery对象在操作时，更加方便； 2.JQuery对象和JS对象方法不通用； 3.两者相互转换： * JQuery --> JS : JQuery...* 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾 2.prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2)：将对象2添加到对象...1元素内部，并且在开头 3.appendTo():父元素将子元素追加到末尾 * 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾 4.prependTo():父元素将子元素追加到开头...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2........当页面加载完，3秒后。自动显示广告 2. 广告显示5秒后，自动消失。分析： 1. 使用定时器来完成。

18.5K2 0

【前端基础篇】JavaScript之jQuery介绍

代码示例：删除被选元素（及其子元素） div id="div1">我是⼀个divdiv> 删除 div 元素 $(function...背景颜色会变为黄色 blur(): 当元素失去焦点时触发，通常用于验证用户输入。...背景颜色会恢复为白色 hover(): 当鼠标悬停在元素上时触发两个不同的函数，分别用于鼠标移入和移出。...submit(): 当表单提交时触发，通常用于在提交前进行验证或提交确认。...; }); // 用户提交表单时，弹出提示 change(): 当表单元素的值发生变化时触发，适用于下拉菜单或单选按钮等。

3.3K1 0

Bootstrap 模态框（Modal）插件的基本应用

模态框（Modal）通俗的说就是在父窗体上弹出的一个子窗体。通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。...当模态框被切换时，它会引起内容淡入淡出。 aria-labelledby="myModalLabel"，该属性引用模态框的标题。...1、backdrop 属性有 boolean 或 string 'static'，默认值为 true， data-backdrop 是指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。...4、remote 类型是 path ，默认值：false ，data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。...四、事件下面试模态框中用到的事件，这些事件可在函数中当钩子使用。 1、show.bs.modal 在调用 show 方法后触发。

5.5K0 0

JS的面试题（一）

return基本数据类型时无效， return引用类型，返回值是return的内容 3.构造函数中的this指什么？...(“div”)[0] 一个是dom元素一个是jquery元素 48、将当前点击元素的文字大小设置为20px，兄弟元素文字大小设置为16px，父元素增加class abc，将父元素的兄弟元素删除class...abc ，父元素的兄弟元素中第一个子元素文字设置为红色，最后一个子元素文字设置为蓝色，父元素的下一个元素逐渐消失之后，在父元素后面增加一个class为newDom的div $(this).click...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃调用时的命名，之后由 jQuery 代替进行编写 54、如何用jQuery获取元素在文档中的位置？...合并jquery中的对象 var obj=$.extend(deep,{},obj1,obj2) deep是true时，是深拷贝 60、jQuery中的end()有什么作用？

1K1 0

学习jQuery这一篇就够了

目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！...子元素筛选器需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色我是列表项1 我是列表项2 我是列表项...> $('ul li:last-child').css('background', 'red'); 需求描述：选择所有父级元素 ul 下的第二个子元素 li，设置其背景为红色会复制元素上的事件处理函数，从 jQuery 1.4 开始，元素数据也会被复制。...需求描述：当文本框获取焦点时，设置其背景为红色，当文本框失去焦点时，设置其背景为绿色 $(':text').focus(function () { $(

3.5K5 0

vuejs中的组件以及父子组件间通信传值

子组件向父组件传值通信通过以上示例看出,当父组件根实例app里面data的list数据发生变化时,子组件TodoList也会发生变化,也就是说父组件里面的数据会影响子组件的显示,那么问题来了,现在我想要点击列表删除该项...既然子组件的渲染结果是由父组件决定的,想要删除子组件,就必须要更改父组件的数据,所以在删除子组件的时候,我们需要点击该子组件,子组件需要把对应的内容传给父组件，让父组件去改变数据，让父组件的数据改变了的...，随之子组件便会跟着消失或者增加子组件向父组件传值是通过vue提供的emit内置方法实现的,vm.emit("eventName自定义事件名称",携带的附加参数),触发当前实例上的事件。...,通过emit方法向外触发事件的方式,当点击子组件的时候,在该子组件绑定点击click事件方法,在该子组件methods方法内,通过emit向外触发一个自定义事件在父组件创建子组件的同时可以去监听父组件...进行传递,而子组件触发父组件时,在$emit第二个参数,通过携带索引值参数,这个参数也会随之的被传入到父组件中去注意点: 子组件内定义的事件方法或者数据是无法在父组件中使用的,反过来也是如此,也就是说

21.9K1 0

前端基础：jQuery

也都能做，但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小，压缩后只有 100 KB 左右强大的选择器出色的 DOM 封装可靠的事件处理机制出色的浏览器兼容性...(){ // 获取框中的值 var str = $(this).val(); // 将 h3 元素中的文本内容更改为 str $("h3"...).text( str ); } ); 表单事件当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。...例如：点击一次按钮，让 div 完成 4 个指定动作：背景变粉字体变绿向上收缩向下拉伸 div{ width: 200px; height...parent() 返回被选元素的直接父元素，仅仅是上一级 parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分测试

14.4K2 0

移除jQuery好像也没那么难

jQuery 是一个非常实用且实用的库，但随着浏览器对 ES6 的广泛支持（截至撰写本文时超过 96%），现在可能是时候从 jQuery 过渡到原生 JavaScript 了。...你可以通过在一个元素上调用 querySelector 或 querySelectorAll 来实现相同的效果，从而将选择范围限制在元素的子元素中。...// jQuery // 返回 .box 的下一个、上一个和父元素 $(".box").next(); $(".box").prev(); $(".box").parent(); // JavaScript...要在没有 jQuery 的情况下实现类似功能，你可以在将元素添加到 DOM 时附加事件处理程序。...("focus", "blurred"); 检查元素是否具有指定类如果您只想在元素具有某个类时执行某些操作，可以使用 .classList.contains() 来代替 jQuery 的 .hasClass

2.6K1 0

前端面试题2（CSS）

，不会和它的子元素发生margin折叠元素自身的margin-bottom和margin-top相邻时也会折介绍一下标准的CSS的盒子模型？...当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC 产生原因：当样式表晚于结构性html...需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding 抽离样式模块怎么写，说出思路？...例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px 百分比：将计算后的值传递给后代设置元素浮动后，该元素的 display 值会如何变化？...监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。

3.7K1 1

第213天：12个HTML和CSS必须知道的重点难点问题

块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上 clear属性 clear属性：确保当前元素的左右两侧不会有浮动元素。...对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。...（不推荐使用）方法三：让父级div 也一并浮起来这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。...不推荐使用方法四：父级div定义 display:table 原理：将div属性强制变成表格优点：不解缺点：会产生新的未知问题。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

2.9K2 0

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。...在模态框中需要注意两点：第一是 .modal，用来把 div> 的内容识别为模态框。第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。...keyboard boolean默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。...remote path默认值：false data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。...-- /.modal --> 结果如下所示：只需要点击 ESC 键，模态窗口即会退出。事件下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

3721 0

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 2.父级div定义 overflow:hidden 原理：必须定义width或...每次写完关闭之后重新调用该函数，会导致页面被重写。 innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。...优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 2，结尾处加空div标签 clear:both 原理：添加一个空div，利用css...，废话不多说进入正题： 1.事件冒泡：通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件...1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素； 2.

2.3K2 0

一篇带你从小白到入门的vue教程

作为默认的内容,在父组件没有使用 slot 时,会渲染这段默认的文本;如果写入了 slot ,那就会替换整个 .所以上列渲染后的结果为: div id="app"> div>...分发的内容更多分发的内容 div> div> 注意:子组件内的备用内容,它的作用域时子组件本身。...div> div> div> 注：在组合使用组件时,内容分发API至关重要。...说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。...像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。 Axios如何使用？

8.8K2 1

前端之bootstrap模态框

简介：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。...Modal简介 Modal实现弹出表单 Modal实现删除提示框其他用法 Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。...通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用 modal.js。...您可以使用按钮或链接。这里我们使用的是按钮。如果您仔细查看上面的代码，您会发现在标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。...在模态框中需要注意两点：第一是 .modal，用来把 div> 的内容识别为模态框。第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。

4.2K5 0

：第十一章 - Vue 中 ref 的使用

1、虚拟 DOM 　　在我们使用 JS/Jquery 直接对 DOM 元素进行操作时，不管是对元素样式的修改（背景颜色从红色变成蓝色）还是对页面中的某些布局进行动态调整（通过点击按钮在列表中添加一行新的数据...2、使用 ref 获取页面 DOM 元素　　在使用 JS/Jquery 获取页面的 DOM 元素时，我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM 元素。...嗯，可以说，我们很难抛弃 Jquery 的一个重大原因，就是当我们需要获取到页面上的 DOM 元素时，使用 Jquery 的 API 相比于原生的 JS 代码，简单到极致，有木有。...3、使用 ref 获取子组件对象同使用 ref 获取页面的 DOM 元素相似，当我们需要获取子组件时，只需要将使用到子组件上的地方添加 ref 属性即可。...在下面的示例代码中，我添加了一个子组件，当我们点击 Vue 实例上的按钮时，会先调用子组件的方法，然后获取子组件的数据。

1.6K3 0

jQuery选择器大全(48个代码片段+21幅图演示)2

// 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的 $...这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？...——5.2 :only-child 当某个元素有且仅有一个子元素时，:only-child才会生效。...（当x=0,y>=0时，等同于:hth-child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）下面的两个例子是针对2)和...简体中文 div> ——6.2 :checked（取选中的单选框或复选框元素）下面的代码，更改边框或背景色仅在IE下有效果

2.1K8 0

JavaWeb（八）JQuery

对象，jquery 对象时jQuery 独有的，不能调用dom 对象里面的属性和方法，jQuery 对象是一个数组。...$(this) ：当前 HTML 元素元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 1 $("[href]") :选取所有带有 href 属性的元素。...1 把所有 p 元素的背景颜色更改为红色： 2 $("p").css("background-color","red"); jQuery选择器一览：选择器实例选取 * $("*") 所有元素 #id...当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

2.5K4 0

JQuery干货篇之操控DOM

作者说 JQuery干货篇之插入元素本次使用的html,css还是我上一篇的源代码，详情请看上一篇文章分类插入子元素：append,prepend ,appendTo,prependTo 封装包裹元素...，这个在后面的插入元素起到关键作用，如果在要引用html中的一个标签内容的话，不使用clone方法，那么就会将这段内容移动，因此这里使用clone会很方便，详细请看append的用法实例实例：...1 $("div.dcell").clone(); //这里的clone方法必须是JQuery对象调用使用DOM API创建新元素 DOM API是用js操作的，其实jquery在幕后悄悄的调用....children("img").first().unwrap(); //这里将第一个img元素的父级元素删除，并且保留了其中的子元素 $("div.dcell").children("img...当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。

1.4K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭