效果图： 展开 收起 实现原理： 展开：单击图标或空白展开主菜单栏，单击图标额外展开子菜单栏 收起：单击空白收起主菜单栏和所有子菜单栏 通过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'>2li> ul> //用事件委托，给父元素 ul 绑定单击事件 ul.onclick = function (e){ //这里的e...='li2'>2li> ul> //用事件委托，给父元素 ul 绑定单击事件 ul.onclick = function (e){ //这里的e...总结 这篇文章是比较基础的，还有一些东西没有说，比如文中说 事件委托的实现 的时候，举的例子比较简单，监听的 li 里面没有子元素，如果存在子元素时，那点击子元素 事件就不会触发，那怎么办呢？
子元素选择器：在给定的父元素下匹配所有的子元素 3.prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 4.prev ~ sibings 之后的兄弟元素选择器：...#city下[appendTo()] //子节点.appendTo(父节点) $("li>广州li>").appendTo($("#city"))...> div> div id="btnList"> div>创建一个"广州"节点,添加到#city下[appendTo()]div> div>创建一个"广州"节点,添加到#city下[prependTo()]div>...li>极品飞车li> li>魔兽li> ul> div> 移除#bj的mouseenter
分类：DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()，js。...4.2 追加节点 语法 功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素...li>") //加到了ul的子元素li列表的后面； //$(".gameList").prepend("li>雨鑫战神...li>艾泽拉斯li> li>起拉希姆li> ul> div> li序号:2--> ul> div> 属性节点的操作<!
mouseout( function(){ $(this).css( "border","2px solid white" ); } ); 键盘事件 用户每次按下或者释放键盘上的键时都会产生事件...> 类样式函数 addClass() 为元素添加类样式 removeClass() 将元素的类样式移除 toggleClass() 样式的切换；有->无，无->有 ...li 节点 var newli = $("li>"+bookname+"li>"); /* 添加子节点 */ // newli 添加到 ul 后面...} }); 后代元素 后代是子、孙、曾孙等等 children([selector]) 方法返回被选元素的所有直接子元素 测试 ul>...; // ul 中的第一个子节点 var x = $("ul").children("li:first").text(); alert(x);
添加和删除节点 一旦我们创建了新的节点，我们可以使用以下方法将它们添加到文档中： appendChild(node)：将一个节点添加为另一个节点的子节点，作为最后一个子节点。...removeChild(node)：从父节点中删除指定的子节点。 下面是一个示例，演示如何创建新节点并将其添加到文档中： 的元素，设置了其文本内容，然后使用appendChild方法将新段落添加为div>元素的子节点。...li>Tomatoli> li>Broccolili> ul> li> ul> 单击列表项时，我们查找其子列表并切换其hidden类，以控制子列表的显示或隐藏。同时，我们还切换了展开/折叠按钮的图标。 总结 JavaScript DOM Node对象是DOM操作的核心。
ul id="ul"> li>PHPli> li>JavaScriptli> ul> li>jQueryli> ul> ul...例如，获取上述示例中ul的子元素。...var lis = document.getElementById('ul').children; console.log(lis); // 输出结果：(3) [li, li, ul] 元素对象的children...单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。 2.4 元素属性 在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。...分类 名称 说明 属性 length 可以获取元素类名的个数 方法 add() 可以给元素添加类名，一次只能添加一个 方法 remove() 可以将元素的类名删除，一次只能删除一个 方法 toggle(
后代选择器 $("A B"); A下的所有B(包括B的子级) let spans1 = $("div span"); //alert(spans1.length);...子选择器 $("A > B"); A下的所有B(不包括B的子级) let spans2 = $("div > span"); //alert(spans2.length);...="将加油添加到城市列表最上方"> 将雄起添加到上海下方"> ...; 将雄起添加到上海上方"> ul id="city">...">深圳li> ul> ul id="desc"> li id="jy">加油li> li id="xq">雄起li> </
再看看其他操作样式的类名吧： // 为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() 鼠标离开（离开子元素也触发）...ul id="list"> li>1li> li>2li> li>3li> li>4li> li>5li> ul> 事件委托的写法
子元素筛选器 需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色 ul> li>我是列表项1li> li>我是列表项2li> li>我是列表项...需求描述：将 ul 列表下所有的子节点全部移除 ul> li>列表项1li> 我是段落1 li>列表项2li> 我是段落2...注意：同时移除元素上的事件及 jQuery 数据 需求描述：将 ul 列表下所有的 p 子节点全部移除 ul> li>列表项1li> 我是段落1 li...需求描述：将 ul 下的所有 li 替换为 p 标签 ul> li>列表项1li> li>列表项2li> li>列表项3li> ul> $('ul>li...需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色 ul> li>1111li> li>2222</
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 ul> li>知否知否，点我应有弹框在手！
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 当时的2大浏览器霸主谁也不服谁！...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...事件冒泡下的e.target和this ul> li>abcli> li>abcli> li>abcli> ul> var ul = document.querySelector...事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 ul> li>知否知否，点我应有弹框在手！
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 ?...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ? 当时的2大浏览器霸主谁也不服谁！...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this ul> li>abcli>
Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...方法 描述 执行时机 keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时 keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时 keypress( )...触发或将函数绑定到指定元素的keypress事件 按下并松开 3.1.3 绑定事件 fadeIn 淡入 用600毫秒缓慢的将段落淡入 速度参数：("slow","normal", or "fast...4.2 追加节点 语法 功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素B前置插入到...li>") //加到了ul的子元素li列表的后面； //$(".gameList").prepend("li>雨鑫战神li>") //before after
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this ul> li>abcli>...事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 ul> li>知否知否，点我应有弹框在手！
对象区别与转换 （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():父元素将子元素追加到开头...，我们就是通过选中"请发言"的对象，然后给每一张图像绑定一个单击事件，依次拼接在后面发言框的后面即可。
你需要给ul>或者div>标签添加一个”list-group“类，这样会使它的子元素表现的像一个列表。...根据列表的类型，列表的子元素可以是li>或者；子元素需要包含类”list-groupitem”。...data-toggle告诉代码点击按钮时做什么，而data-target表明在单击时哪个部分要切换。...> div> 将类”form-control”添加到元素上，将使它变成全屏宽度的元素 结果如图所示 ?...正如您所看到的，在Bootstrap中有大量不同的组件，最初，您可能会发现很难记住这么多不同类型的类;然而，当你遇到麻烦时，可以参考一下文档。
// 并将todoValue重置为空字符串 this.todoValue = "" }, // 当用户单击列表中的项目时...这样，父组件的数据变化会自动更新子组件的数据，从而实现删除功能。 父组件的数据变化为啥会自动更新子组件的数据 在Vue.js中，当父组件的数据更新时，它会重新渲染所有子组件。...-- 通过 v-bind，将父组件的 item 值传给子组件 --> 将父组件的 item 值传给子组件 --> 将父组件的 item 值传给子组件 --> <!
展示英雄们 显示一个英雄列表，首先需要将英雄们添加到视图模板 模拟英雄 在lib / src下的以下文件中创建十个英雄的列表：lib/src/mock_heroes.dart import...-- each hero goes here --> li> ul> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定到模板，迭代它们，并单独显示它们。...添加一个onSelect（）方法，将selectedHero属性设置为用户单击的英雄。...在上面添加的样式元数据中，有一个名为selected的自定义CSS类。 为了让选定的英雄更清晰可见，当用户点击英雄名字时，你将把这个选定的class应用到li>。...将添加所选的CSS类。
原理： 1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu绝对定位实现，还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。...#id”：是为了实现单击，展开指定的下拉列表，默认是展开与按钮后面兄弟节点： ul class="nav nav-pills navbar-nav"> li>Indexli> li>产吕li> li > 实用工具li> ul> div...id="name" > ul class="dropdown-menu" > li>关于我们li> ul> div> 10、实现向上弹出子菜单...li> ul> div>
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
