效果图： 展开 收起 实现原理： 展开：单击图标或空白展开主菜单栏，单击图标额外展开子菜单栏 收起：单击空白收起主菜单栏和所有子菜单栏 通过js改变元素的类，并在样式表中定义不同类的样式，实现样式的改变...主菜单的类为.long时，width:25rem，类为.short时，width:7.5rem 子菜单的类为.hide时，height:0，类为.show时，heigth由js根据子元素数量计算 源代码...let in_ul = self.nextSibling.nextSibling; /*获取子菜单下的子元素个数（li标签）*/ let ll = in_ul.children.length...; /*获取主菜单*/ let out_ul = document.getElementById('list'); /*子菜单收起时，单击展开主菜单和该子菜单*/ if...= ll * 4 + 'rem'; out_ul.className = 'long'; } /*子菜单展开时，单击收起该子菜单*/ else {
从上面的图中我们看见，当点击 蓝色 p 元素时，先触发了 p 元素上绑定的事件，然后又触发了 红色 div 元素上绑定的事件，这就是事件冒泡了。 事件委托 的实现 先来段代码 我们用事件委托的方式改写一下上面的代码，不过在这之前，我们还要明白一下什么是 event 对象 任何事件触发后将产生一个event对象 event对象记录事件发生时的鼠标位置...='li2'>2 //用事件委托，给父元素 ul 绑定单击事件 ul.onclick = function (e){ //这里的e...='li2'>2 //用事件委托，给父元素 ul 绑定单击事件 ul.onclick = function (e){ //这里的e...总结 这篇文章是比较基础的，还有一些东西没有说，比如文中说 事件委托的实现 的时候，举的例子比较简单，监听的 li 里面没有子元素，如果存在子元素时，那点击子元素 事件就不会触发，那怎么办呢？
子元素选择器：在给定的父元素下匹配所有的子元素 3.prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 4.prev ~ sibings 之后的兄弟元素选择器：...#city下[appendTo()] //子节点.appendTo(父节点) $("广州").appendTo($("#city"))...> 创建一个"广州"节点,添加到#city下[appendTo()] 创建一个"广州"节点,添加到#city下[prependTo()]...极品飞车 魔兽 移除#bj的mouseenter
添加和删除节点 一旦我们创建了新的节点，我们可以使用以下方法将它们添加到文档中： appendChild(node)：将一个节点添加为另一个节点的子节点，作为最后一个子节点。...removeChild(node)：从父节点中删除指定的子节点。 下面是一个示例，演示如何创建新节点并将其添加到文档中： 元素，设置了其文本内容，然后使用appendChild方法将新段落添加为元素的子节点。...Tomato Broccoli <script...当用户单击列表项时，我们查找其子列表并切换其hidden类，以控制子列表的显示或隐藏。同时，我们还切换了展开/折叠按钮的图标。 总结 JavaScript DOM Node对象是DOM操作的核心。
mouseout( function(){ $(this).css( "border","2px solid white" ); } ); 键盘事件 用户每次按下或者释放键盘上的键时都会产生事件...> 类样式函数 addClass() 为元素添加类样式 removeClass() 将元素的类样式移除 toggleClass() 样式的切换；有->无，无->有 ...li 节点 var newli = $(""+bookname+""); /* 添加子节点 */ // newli 添加到 ul 后面...} }); 后代元素 后代是子、孙、曾孙等等 children([selector]) 方法返回被选元素的所有直接子元素 测试 ...; // ul 中的第一个子节点 var x = $("ul").children("li:first").text(); alert(x);
后代选择器 $("A B"); A下的所有B(包括B的子级) let spans1 = $("div span"); //alert(spans1.length);...子选择器 $("A > B"); A下的所有B(不包括B的子级) let spans2 = $("div > span"); //alert(spans2.length);...="将加油添加到城市列表最上方"> ...; ...">深圳 加油 雄起 </
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 当时的2大浏览器霸主谁也不服谁！...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...事件冒泡下的e.target和this abc abc abc var ul = document.querySelector...事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 知否知否，点我应有弹框在手！
再看看其他操作样式的类名吧： // 为id为div1的对象追加样式divClass2 $("#div1").addClass("divClass2") // 移除id为div1的对象的class名为...如下： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent...() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...) 元素失去焦点 2. focus() 元素获得焦点 3. click() 鼠标单击 4. mouseover() 鼠标进入（进入子元素也触发） 5. mouseout() 鼠标离开（离开子元素也触发）... 1 2 3 4 5 事件委托的写法
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 知否知否，点我应有弹框在手！
子元素筛选器 需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色 我是列表项1 我是列表项2 我是列表项...需求描述：将 ul 列表下所有的子节点全部移除 列表项1 我是段落1 列表项2 我是段落2...注意：同时移除元素上的事件及 jQuery 数据 需求描述：将 ul 列表下所有的 p 子节点全部移除 列表项1 我是段落1 <li...需求描述：将 ul 下的所有 li 替换为 p 标签 列表项1 列表项2 列表项3 $('ul>li...需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色 1111 2222</
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this abc...事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 知否知否，点我应有弹框在手！
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 ?...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ? 当时的2大浏览器霸主谁也不服谁！...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this abc
对象区别与转换 （1）jquery对象在操作时，更加方便 （2）jquery对象和js对象方法不通用 （3）两者相互转换的方式 jq -- > js: jq对象[索引] 或者 jq对象.get(索引)...语法：$("html标签名")获得所有匹配标签名称的元素 id选择器。语法：$("#id的属性值")获得与指定id属性值匹配的元素 类选择器。...语法：$("A B ")选择A元素内部的所有B元素 子选择器。语法：$("A > B")选择A元素内部的所有B子元素 （3）属性选择器 属性名称选择器。...3、CRUD操作 1. append()：父元素将子元素追加到末尾 * 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾 2. prepend():父元素将子元素追加到开头...，我们就是通过选中"请发言"的对象，然后给每一张图像绑定一个单击事件，依次拼接在后面发言框的后面即可。
// 并将todoValue重置为空字符串 this.todoValue = "" }, // 当用户单击列表中的项目时...这样，父组件的数据变化会自动更新子组件的数据，从而实现删除功能。 父组件的数据变化为啥会自动更新子组件的数据 在Vue.js中，当父组件的数据更新时，它会重新渲染所有子组件。...-- 通过 v-bind，将父组件的 item 值传给子组件 --> <!
你需要给或者标签添加一个”list-group“类，这样会使它的子元素表现的像一个列表。...根据列表的类型，列表的子元素可以是或者；子元素需要包含类”list-groupitem”。...data-toggle告诉代码点击按钮时做什么，而data-target表明在单击时哪个部分要切换。...> 将类”form-control”添加到元素上，将使它变成全屏宽度的元素 结果如图所示 ?...正如您所看到的，在Bootstrap中有大量不同的组件，最初，您可能会发现很难记住这么多不同类型的类;然而，当你遇到麻烦时，可以参考一下文档。
原理： 1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu绝对定位实现，还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。...#id”：是为了实现单击，展开指定的下拉列表，默认是展开与按钮后面兄弟节点： Index 产吕 实用工具 关于我们 10、实现向上弹出子菜单...li>
展示英雄们 显示一个英雄列表，首先需要将英雄们添加到视图模板 模拟英雄 在lib / src下的以下文件中创建十个英雄的列表：lib/src/mock_heroes.dart import...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定到模板，迭代它们，并单独显示它们。...添加一个onSelect（）方法，将selectedHero属性设置为用户单击的英雄。...在上面添加的样式元数据中，有一个名为selected的自定义CSS类。 为了让选定的英雄更清晰可见，当用户点击英雄名字时，你将把这个选定的class应用到。...将添加所选的CSS类。
ui-block-b"> Right column 从一组 HTML 元素创建网格时默认使用的 CSS 类是 ui-grid-* 类。... 默认情况下，块将页眉文本显示为一个带 + 图标的按钮。...您也可以通过使用图标、缩略图和计数泡泡来创建不同的视觉样式。您可以通过使用 ul-li-count 类，将计数泡泡添加到一个列表项（清单 9）。 清单 9....Album ul-li-icon 类限制图片的大小，最大宽度和高度为 40px，它还能够将图片放在列表项中的适当位置。...在这种情况下，您就会有一个长列表，它看起来几乎是无法使用的，而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运，使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。
常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this abc...abc abc var ul = document.querySelector('ul'...动态新创建的子元素，也拥有事件。 知否知否，点我应有弹框在手！ 知否知否，点我应有弹框在手！... // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点 var ul = document.querySelector
上面这段html代码中，单击了页面中的 元素， 在冒泡型事件流中click事件传播顺序为 —》—》—》document 在捕获型事件流中click事件传播顺序为...事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。...传统事件处理，为每个元素添加事件处理器，代码如下： View Code 事件代理的处理方式，代码如下： red orange... yellow green blue indigo purple (function...如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
