使用内联jquery代码删除父级和单击的按钮容器 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Web前端学习第3章 JavaScript基础教程16 事件流

在之前的课程中，我们一直使用的是内联事件来为元素绑定事件，例如一个按钮的点击事件，代码如下 btn.onclick = function(){} //绑定鼠标单击事件我们还可以用使用事件监听器为元素绑定事件...三、事件委托利用事件流的原理，我们可以实现事件委托，事件委托可以简单的理解为将子级的事件委托给父级来处理，我们先来看一个简单的例子 1 2 按钮1 3 按钮2 4 网页中有两个按钮，他们的父级是一个div标签，现在我们希望给这两个按钮绑定事件...event，事件对象中包含了事件相关的信息，通过event.target可以获取到我们的事件目标，在这个例子中事件目标就是我们点击的按钮，而我们事件绑定的是按钮的容器，这样就可以将自己元素的事件委托给父级来处理...四、课后练习一、实现如下功能(阻止事件冒泡) 点击一个按钮，显示一个容器的盒子；点击容器，容器背景颜色改变；点击容器按钮容器关闭; 二、实现水果列表，让后添加的元素也可以删除(事件委托); 三、

9584 0

JQuery

xx，父级执行了命令 find选中子集执行了命令下面的选择器很重要 .parent()选择元素的父元素可以先用一个this，然后找到这个元素的父级。...---$(this) 会自动检索事件发生的目标链式编程（链式调用）的好处：简化代码量，执行的时候提高效率，导航标签都用ul套li jq中使用onclick、onmouseover等都取消on 删除类 .addClass()添加类 .removeClass()删除类删除了class=“xx”中的类名xx，而不会删除class。删除完之后是class。...()鼠标离开（离开子元素不触发）上面的这些鼠标移入和离开，触发和不触发指的是不再次触发父级。...验证两组不一样的时候，鼠标先进入父级，再进入子级，然后没有再次触发，验证成功。如果是直接进入子级的话，因为子级和父级是一体的，会触发。 <!

8.4K2 0

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

是的

没有找到

Web前端知识(四)

4.1.3. jQuery基本使用第一步:下载jQuery库第二步:引入下载的jQuery库第三步:编写jQuery代码 4.1.4.jQuery获取标签 4.1.5.jQuery中事件介绍...; offset().top; position()获取某个元素相对于父元素的偏移位置 position().left position().top 4.1.7.2.操作HTML l使用jQuery...代码实战: 切换显示隐藏我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。...如果是区块,则设置 CSS 代码:display:block; 如果是内联, 则设置 CSS 代码:display:inline; 4.1.9.4.jq中的滑动、卷起动画 jQuery 提供了一组改变元素高度的方法...4.1.9.5.jq动画综合案例 4.1.9.5.1.二级下拉菜单【效果图】： Html和css代码: 接下来：先隐藏起来所有的二级菜单 Js代码思路: 对于上面的代码，下拉菜单基本已经实现了

8.4K3 0

事件委托和this

或这样描述：　　任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。...也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。好处呢：1.提高性能； 2. 易于维护；比如用document元素来处理按钮的点击行为，用ul元素来处理其子元素li的事件。...如果this没有被设置，则默认指向全局对象，其通常是window 如果一个函数中运行了一个内联函数，比如一个事件监听器，则this指向内联函数的源代码。...例如,当设置一个按钮的单击处理程序,this将引用匿名函数内的按钮。如果函数是一个对象的构造函数，this指向新对象。如果函数被定义在一个对象上,然后调用对象时,this指向该对象。...三种方法都被用于调用一个函数，并能指定this的上下文，你可以让代码使用你规定的对象，而不是依靠浏览器去计算出this指向什么。

1.2K3 0

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

(点击按钮实现按钮变色和内容的显示和隐藏) 实现方式1:利用原生js css代码 body { margin:0; text-align:center; } button...的经典例子同样,我会一步一步从原生js,jQuery在到vuejs,并且实现父子元素的通信,实现效果如下图所示: 输入框内输入值,点击添加按钮,将表单中的值添加到页面中,同时,又可以删除列表项内容,注意是删除列表项而不是隐藏...on()方法时，添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)如果移除事件处理程序，则使用off()方法,要绑定在父级元素上，而且在低jQuery版本中不支持这个方法...remove方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。...,有一个坑就是,要格外注意的是:要绑定在想要操作元素的父级元素身上,否则会不起作用,其实它是利用了事件委托冒泡的机制而在低jQuery版本中,没有on这个方法,若使用它,则会报错,而对于on方法取而代之的是

21.9K1 0

Jquery入门基础教程免费版

核心特性：链式语法高效灵活的CSS选择器使用和扩展丰富的插件官网：https://jquery.com/ 三大版本：目前jQuery有三个大版本。...————————————————-----------看大厂的源码------ jd:1.6.4 sina:1.7.3 jquery 3.选择器和方法 3.1 使用jquery访问三个div元素 jQuery里面，我们要操作页面对象还是需要找对象，找页面对象，就是通过各类的选择器来找，简化我们的业务代码量。...需要大家去复习正则表达式的使用。复习代码： <!...事件 jQuery事件是对JavaScript事件的封装，分为基础事件和复合事件。

2.2K1 0

JavaScript面试问题：事件委托和this

一些JS库和框架公开了其它方式，如发布/订阅模型（将在后文提及）。事件捕获和事件冒泡是事件流中的两个阶段，任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。...点击按钮会导致事件流识别本身在容器下面的文本，每一个元素都接收同样的点击监听代码，由于事件捕获，点击事件会首先触发HTML节点绑定的点击处理程序，然后在事件冒泡阶段的末尾返回到最顶层元素。...使用事件委托能减少监听器数量，在元素的容器上绑定事件意味着只需要一个监听器。这种方法的缺点是,父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。...●如果this没有被设置，则默认指向全局对象，其通常是window ●如果一个函数中运行了一个内联函数，比如一个事件监听器，则this指向内联函数的源代码。...例如,当设置一个按钮的单击处理程序,this将引用匿名函数内的按钮。 ●如果函数是一个对象的构造函数，this指向新对象。 ●如果函数被定义在一个对象上,然后调用对象时,this指向该对象。

1.8K5 0

如何把控css的方向感

对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局...1em; } 复制代码 3.padding的实际应用（具体实现可自行思考） 1.增加链接或按钮的点击区域的大小 2.利用内联元素的padding实现高度可控的分割线 3.用内联元素实现瞄点定位距离复制代码....mg-item:nth-of-type(3n){ margin-right: 0; } 复制代码注：如果容器可以滚动，在IE和firefox下会忽略padding-bottom的值，chrome...但不包含浮动和绝对定位元素在默认文档流下只出现在垂直方向 margin合并的三种场景相邻兄弟元素父级和第一个/最后一个子元素 * 解决方案：父级设置为块级格式化上下文元素...父元素设置border-top/bottom值父元素设置padding-top/bottom值父元素设置高度复制代码空块级元素margin合并

1.7K1 0

WEB入门之十六操作DOM节点

，当单击按钮时通过clone函数把第一个下拉列表框的选中项，复制到了另一个下拉列表框中。...任务实训部分 1：动态管理树形菜单训练技能点 Ø jQuery节点操作需求说明使用jQuery节点操作函数对树形菜单进行动态添加和删除，如图7.2.1所示。...添加节点时，需要先单击选中某个一级或二级节点，然后在文本框中填写新添加的节点名，单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。...节点操作需求说明使用jQuery节点操作函数对行进行动态添加和删除。 ...当单击【修改】按钮时，单元格中的文本信息替换为文本框；单击【确定】按钮时，文本框中的数据显示到单元格中。

1.2K1 0

Imooc之Html与CSS

如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。...（真霸道，一个块级元素独占一行）元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...在标签中设置multiple=”multiple”属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击...就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

8.1K2 0

WEB入门之十六操作DOM节点

，当单击按钮时通过clone函数把第一个下拉列表框的选中项，复制到了另一个下拉列表框中。...任务实训部分 1：动态管理树形菜单训练技能点 Ø jQuery节点操作需求说明使用jQuery节点操作函数对树形菜单进行动态添加和删除，如图7.2.1所示。...添加节点时，需要先单击选中某个一级或二级节点，然后在文本框中填写新添加的节点名，单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。...节点操作需求说明使用jQuery节点操作函数对行进行动态添加和删除。...当单击【修改】按钮时，单元格中的文本信息替换为文本框；单击【确定】按钮时，文本框中的数据显示到单元格中。

1.4K1 0

JQuery从入门到实战

使用浏览器测试。代码实现 jQuery 的核心语法 $(); 2、JQuery基本语法 2.1、JS对象和JQuery对象转换 jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery...绑定事件 //jQuery 对象.on(事件名称,执行的功能); //给btn1按钮绑定单击事件 $("#btn1").on("click",function(){ alert("点我干嘛?")...; }); 解绑事件如果不指定事件名称，则会把该对象绑定的所有事件都解绑 //jQuery 对象.off(事件名称); //通过btn2解绑btn1的单击事件 $("#btn2").on("click...jQuery 中选择器的语法：$(); 代码实现 <!

16.2K3 0

BootStrap应用开发学习入门

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。...BS 代码展示两种方式显示代码： :内联显示代码 :显示为一个独立的块元素或者代码有多行 :显示变量赋值 :按键文本提示 : 电脑程序输出格式显示...---使用 class .sr-only，您可以隐藏内联表单的标签。...使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....btn-sm #这会让按钮看起来比较小。 .btn-xs #这会让按钮看起来特别小。 .btn-block #这会创建块级的按钮，会横跨父元素的全部宽度。

20.7K2 0

BootStrap应用开发学习入门

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。...BS 代码展示两种方式显示代码： :内联显示代码 :显示为一个独立的块元素或者代码有多行 :显示变量赋值 :按键文本提示 : 电脑程序输出格式显示...---使用 class .sr-only，您可以隐藏内联表单的标签。...使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....btn-sm #这会让按钮看起来比较小。 .btn-xs #这会让按钮看起来特别小。 .btn-block #这会创建块级的按钮，会横跨父元素的全部宽度。

17.5K3 0

【FE前端学习】第二阶段任务-基础

有序列表即把替换为 HTML块 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。...块级元素在浏览器中以新的一行开始和结束例如, , , ，内联元素如, , , HTML元素是块级元素，作为组合其他元素的容器...，或用于文档布局 HTML元素是内联元素，作为文本的容器，可给部分文本设置样式 HTML表单 ......HTML 元素添加和删除 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容...remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 CSS 获取和设置 addClass() - 向被选元素添加一个或多个类 removeClass() -

5.8K1 0

Python全栈之jQuery笔记

的方法.遍历方法中最大的种类是树遍历(tree-traversal). 1.jQuery遍历-祖先: parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历...,那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活), 或者它到达了对象层次的最顶层...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件....9、btn-lg 10、btn-md 11、btn-xs 12、btn-block 宽度是父级宽100%的按钮 13、active 14、disabled...前端性能优化分为如下几个方面: 一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息.

6.7K4 0

深入理解bootstrap

，包括顶部的CSS组件内部也可以任意使用这些基础组件 3.jQuery 4.响应式设计：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，包括弹性网格和布局...，比如使用类似于data-target的自定义属性等 2.JavaScrtip实现步骤：所有的插件都遵循jQuery插件开发的标准步骤，所有的事件都保持了统一标准 3.插件调用方法：所有插件的使用方式都非常类似...C.代码 1.code单选内联代码，kbd用户输入代码，pre多行代码块 2.pre元素上应用.pre-scrollable可以控制最大高度为340px，并滚动 D.表格 1.基础样式：.table...，.glyphicon和.glyphicon-* 2.新版本使用了CSS3中的@font-face特性 B.下拉菜单 C.按钮组 1.只需要在多个按扭外部使用一个窗口元素（比如div），然后在容器元素上应用...（tab）上实现 2.首先navbar的父容器上要应用.navbar样式，其次顶级ul块上要应用.nav和.navbar-nav样式 3.使用规则：菜单样式和菜单项保持一致被单击的链接或者按扭上需要应用

4.5K6 0

一些经典案例

案例一：（实现效果，鼠标移动到哪个菜单上，哪个菜单会显示二级菜单，移开会收回。）案例二：tab栏（选项卡）鼠标滑过，显示对应的特殊样式，下面的内容替换为需要的内容。和无缝滚动一样是专有名词。...两行代码有相同的部分，那么可以考虑使用链式编程。的实现方法，现在html5.0会使用placeholder jquery-1.12.4.min.js"> $(function(){ // 左侧的span单击，隐藏left...span，隐藏这个span 的父级 $('span').click(function(){ $(this).parent().hide(500)

1.2K3 0

HTML规范 - 代码格式

-- /注释文案 -->（文案前加“/”符号，类似标签的闭合）。允许只有开始注释！代码本身的注释方法单行代码的注释也保持同行，两端空格；多行代码的注释起始和结尾都另起一行并左缩进对齐。的注释。严格的嵌套尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。...严格的属性属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。...> 按钮不可嵌套表单元素 type,disabled 定义列表中的定义（描述内容）只能以dl为父容器，对应一个dt 文本删除块级容器定义列表只能嵌套dt和dd 定义列表中的定义术语只能以dl为父容器，对应多个dd 强调文本 <form

5.6K1 0

详细说明如何实现简易轮播效果

10%是依照父元素也就是body类进行设置的。...4、控制层和html结构拓展性说明控制层是一部分刚入前端的小白所踩的坑。这里先重点说明：控制层千万千万千万别创建在移动层中，如果你要使用这篇文章说明的轮播效果，那么控制层绝对不能创建在移动层中！...使用jQuery或许就没有这种问题，为了保险我们还是将left值设置在内联样式上；如图： 3、JavaScript部分首先该理解的是当点击按钮时移动层的left值变动。...这里使用jQuery写法，为两个按钮绑定点击事件。这里#next为下一张，#prev为上一张。绑定好事件后，设置关键的两个全局变量。一个是index用于记录当前所在内容屏数。...上一张和下一张都需要看这个值的多少。第三行代码：最后将这个计算过后的move值替代left的值，那么点击“下一张”按钮后就可以看清楚运动轨迹了。

1731 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭