使用jquery显示嵌套ul li的第一级子元素 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jQuery二级菜单的显示隐藏

在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。HTML 结构首先，需要创建适当的HTML结构来表示二级菜单。一种常见的方法是使用嵌套的ul>和li>元素。...li>子菜单项3li> li>子菜单项4li> ul> li> ul>...每个菜单项都包含一个链接，以及一个嵌套的无序列表ul>来表示二级菜单。CSS 样式接下来，需要使用CSS样式来控制二级菜单的显示和隐藏。可以通过设置样式的display属性来实现。...JavaScript 交互要使用jQuery实现二级菜单的显示和隐藏，可以使用jQuery的事件处理函数。...当鼠标进入菜单项时，使用slideDown()方法显示相应的二级菜单。当鼠标离开菜单项时，使用slideUp()方法隐藏二级菜单。

5.6K3 0

jquery入门

}); $("#btn_child_selector").click(function() { // 层级选择器，可以类似css语法一样，使用样式嵌套...-- 使用JQuery改造瀑布流！...li>选择所有的子元素: 选择器.children()li> li>选择所有的指定的子元素: 选择器.children("ul")li> li>选择第一个子元素：选择器.first()li> li>选择最后一个子元素：选择器.last()li> li>判断标签是否包含某个class...li>二次筛选：选择器.has(子标签选择器)，选择所有包含指定子元素的父标签li> li>二次筛选：父选择器.find(子选择器)，从父选择器选中的标签中的子元素里面

3.4K2 0

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

是的

没有找到

jQuery练习——下拉菜单

哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。笔者还是前端的菜鸟，还请大家多多指教呀~ 欢迎大佬指正，一起学习，一起加油！...第一期——下拉菜单的实现 ---- 文章目录整体效果图一、HTML样式二、CSS样式三、jQuery代码总结 ---- 整体效果图实现效果：当鼠标移到不同的一级菜单，会显示相应的二级菜单，...使用选中ul和li ，为其添加鼠标移入和移出的函数，即mouseover和mouseout。接着用.children获取下拉列表中要显示的元素，也就是nav的子元素。 ...(this).children("ul")的意思是当前元素的子元素，this表示当前元素。添加隐藏和显示的方法，即hide（）和show（）。 ...隐藏元素和显示元素的使用。

29.4K2 0

JQuery第一节

课程目标掌握jQuery常用API的使用了解jQuery的设计思想 jQuery基本介绍为什么要学jQuery 【01-让div显示与设置内容.html】使用JS操作DOM的时候，会遇到以下的一些缺点...{});就是典型的DOM对象转jQuery对象 jQuery对象转换成DOM对象： var $li = $(“li”); //第一种方法（推荐使用） $li[0] //第二种方法 $li.get(0)...交集选择器 $(“div.redClass”); 获取class为redClass的div元素子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素后代选择器...$(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等跟CSS的选择器一模一样。...名称用法描述 children(selector) $(“ul”).children(“li”) 获取当前元素的所有子元素中的li元素 find(selector) $(“ul”).find(“li

2.1K3 0

自写JQ控件-树状菜单控件

/* 子菜单项 */ .st_tree ul ul li a{ font-size: 17px; } /* 子子菜单项 */ .st_tree ul ul ul li a{ font-size: 16px...this.tree.find("ul ul[show='true']").show(); /* 显示 show 属性为 true 的子级菜单 */ }/* option....（1）比如一些位置的知识： jquery获取元素位置的方法有两个： position方法：获取匹配元素集中第一个元素的坐标，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。...使用： $("#target").position().left; $("#target").position().top; offset方法：获取匹配元素集中第一个元素的坐标，获取的是该元素相对于...使用： offset方法：获取匹配元素集中第一个元素的坐标，获取的是该元素相对于document对象的偏移位置。使用：（2）CSS 伪元素 ?

2.4K3 0

前端基础：jQuery

也都能做，但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小，压缩后只有 100 KB 左右强大的选择器出色的 DOM 封装可靠的事件处理机制出色的浏览器兼容性...() 返回被选元素的直接父元素，仅仅是上一级 parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分测试 ul>...} }); 后代元素后代是子、孙、曾孙等等 children([selector]) 方法返回被选元素的所有直接子元素测试 ul>...; // ul 中的第一个子节点 var x = $("ul").children("li:first").text(); alert(x);...// 不知道找什么 var x = $("ul").find().text(); alert(x); }); 元素的过滤 first() 过滤第一个元素

14.4K2 0

JQuery高级

jQuery中定义变量的时候，一般命名用$开头。同事一看就知道是使用了jQuery，然后使用jQuery的语法。其实$是jQuery中的一个函数。...***事件冒泡现象：父子级标签触发子级的事件，这个事件会逐层向父级传递。子集执行了某一事件，会逐层向上触发相同事件，直到被处理或者遇到return。...比如子级有单击事件，那么父级如果有单击事件也会被触发，父级的父级如果有单击事件也会被触发。任何一个操作，计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...标签===标记====元素的内容、标签的属性）网页文档的根：html标签 html的子标签是head和body 纯前端会学很多东西，后端不需要了解全部，知道其中的原理即可。...新增节点------- 步骤： 1、声明变量保存节点数据（名字一般为$开头，然后找的标签是什么就叫做什么） 2、使用追加函数将节点变量追加到指定位置子级加： append(添加的内容) 向末尾加 appendTo

2K5 0

前端之jquery函数库

jquery介绍　　jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。...： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent...() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...ul> jquery事件事件函数列表： blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

6K2 0

jQuery基础--基本概念

为什么要学习jQuery？【01-让div显示与设置内容.html】使用javascript开发过程中，有许多的缺点： 1. 查找元素的方法太少，麻烦。 2....DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...对象　　jQuery对象转换成DOM对象： var $li = $(“li”); //第一种方法（推荐使用） $li[0] //第二种方法 $li.get(0) li id="cloth">衣服li> li>裤子li> li>裤衩子li> li>袜子li> ul> jquery-1.12.4

1.1K2 0

前端(四)-jQuery

对象，就可以对这个对象进行操作；可以查找当前元素下的子元素； html //当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失 li>3元素的子元素 }); //还可以是使用:hidden 和 :visible 可见选择器 $("#play ol li").mouseover(function...) 通过选择器获取节点 $(html) 使用HTML字符创建jQuery节点 3.4.2 插入节点 1 元素内部插入子节点方法说明 $(A).append(B) 将B节点追加到A节点的子节点中 $...) 获取当前元素的父级元素 parents() 获取当前元素的所有祖先元素 3.6.4 each() 遍历例子 //遍历所有的li元素 //隐式迭代:自动遍历集合中的所有元素 $("li").each...elm时dom元素对象,不可以直接使用jQuery方法,必须是转化为jQuery节点 alert($(this).html()); //$(this)转换为jQuery节点 }); 3.6.5

9.9K3 0

继续死磕前端

如下： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent...() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。...ul id="list"> li>1li> li>2li> li>3li> li>4li> li>5li> ul> 事件委托的写法

3.7K1 0

jQuery

$s(“Ii.current”) 交集元素 2.1.2 层级选择器名称用法描述子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素后代选择器...$(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 2.1.3 筛选选择器名称用法描述 :first $(‘li:first’) 获取第一个li元素 :last...parent() $(“li”).parent(); 查找父级 children(selector) $(“ul”).children("“li”) 相当于$(“ul>li”)，最近一级（亲儿子) find...创建元素 var li = $('li>新创建的元素li>'); **添加元素(**在后面添加) $('ul').append(li); 添加元素(在前面添加) $('ul').prepend(...删除删除元素集合中的子节点 $('ul').empty();//相当于清空ul里的内容通过html来清空 $('ul').html(); 4.4 尺寸，位置操作 4.4.1 jQuery尺寸操作语法

10.2K1 0

jQuery

3.jQuery 对象和 Dom 对象使用的区别 JQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 JQuery 对象的属性和方法 4.DOM 对象和 jQuery 对象互转...ul> // jQuery $("li").has("ul").css("background-color", "red"); 2.查找查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的...jQuery 对象返回方法描述 children(selector) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...事件监听绑定在父元素上, 但事件发生在子元素上事件会冒泡到父元素但最终调用的事件回调函数的是子元素: event.target 好处: 新增的元素没有事件监听减少监听的数量(n==>1) jQuery...1.基本动画方法描述 show() 将隐藏的元素显示 hide() 将可见的元素隐藏 toggle() 可见就隐藏，不可见就显示以上的动画都可以添加参数： ① 第一个参数就是显示执行的时间，以毫秒为单位

11.9K2 0

学习jQuery这一篇就够了

目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！...子元素筛选器需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色 ul> li>我是列表项1li> li>我是列表项2li> li>我是列表项...3li> li>我是列表项4li> ul> $('ul li:first-child').css('background', 'red'); 需求描述：选择所有父级元素 ul 下的最后一个子元素...> $('ul li:last-child').css('background', 'red'); 需求描述：选择所有父级元素 ul 下的第二个子元素 li，设置其背景为红色 ul> li...注意：同时移除元素上的事件及 jQuery 数据需求描述：将 ul 列表下所有的 p 子节点全部移除 ul> li>列表项1li> 我是段落1 li

3.5K5 0

jQuery

jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。...对象只能使用jQuery 封装的方法。...element.remove();//删除匹配的元素（本身） element.empty();//删除匹配的元素集合中所有的子节点 element.html('');//清空匹配的元素内容，也可设置内容...可以设置元素的偏移：offset({ top: 50, left: 50 }); 2.position() 获取元素偏移 position() 返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位...//1. events: 一个或多个用空格分隔的事件类型，如"click"或"mouseover" 。 //2. selector: 元素的子元素选择器。

23K5 0

Python全栈之jQuery笔记

$("ul>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的...$('#ul1 li:gt(2)') 选择id为ul1元素下的前三个之后的li :lt $('#ul1 li:lt(2)')...下面是两个用于向下遍历DOM树的jQuery方法: children() 返回被选元素的所有直接子元素.该方法只会向下一级对DOM树进行遍历....//该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是...id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素

6.7K4 0

JQuery快速入门

:contains(text) 选取含有文本内容的为text的元素 :empty 选取不包含子元素或者文本的空元素 :has(selector) 选取含有选择器所匹配元素的元素 :parent 选取含有子元素或者文本的元素...DOM操作示例查找结点获取元素结点：var $li = $('ul li:eq(1)'); 获取属性结点：var p_txt = $li.attr('name'); 创建结点 jQuery工厂方法...:$(html语句); var $li_1 = $('li>li>');$('ul').append('$li_1'); 文本结点和属性结点于此类似插入结点插入结点的方式很多： append(...li:eq(1)').remove(); 清空结点，即清空结点中的内容(子节点) $('ul li:eq(1)').empty(); 复制结点 $('#xionger').click(function...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。

3.5K10 0

【CSS——效果实现】自适应页面（蓝桥杯真题-5136）【合集】

菜单项通过 li> 标签定义，其中 “课程” 菜单项有下拉子菜单，通过嵌套的 ul> 列表实现。.../js/jQuery.min.js">：引入 jQuery 库，方便后续使用 jQuery 进行交互效果的实现，如菜单的展开和收缩等。...菜单项样式（.menu li） .menu li { display: block; /* 菜单项独占一行 */ } 将菜单项的显示方式设置为块级元素，这样每个菜单项都会单独占据一行，适应移动设备屏幕的纵向布局...display: block;：当 input 元素被选中时，将 .collapse 元素的显示方式设置为块级元素，即显示菜单。 5.....row 元素的显示方式设置为块级元素，使得卡片描述和图片各占一行。

1.6K1 0

jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 1....> li>我是ul 的li> li>我是ul 的li> li>我是ul 的li> ul> 子、兄以外有所加强。...语法用法说明 parent() $("li"). parent(); 查找最近一个父级 children(selector) $("u1"). children("li"); 相当于$("ul>1i...2.需要得到当前小li 的索引号，就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片，可以通过 eq(index) 方法去选择 5.显示元素

3.9K3 0

Bootstrap快速入门

):not(.dropdown-toggle){border-radius:0} display属性:用于定义建立布局时元素生成的框的类型，如果不谨慎使用容易出错 none 此元素不会显示 block...此元素显示为块级元素，前后会带换行符 inline 默认，此元素会被显示为内联元素，没有换行符 inline-block 行内块元素 list-item 此元素会以列表显示 run-in 此元素会根据上下问作为块级元素和内联元素显示...官方网站 JavaScript语法回顾 ||和&&运算符：a&&b返回第一个可转化为false的元素值，a||b返回第一个可转换为true的元素值。...使用行在水平方向上创建一组列具体内容放在列中，只有列可以作为行的直接子元素接下来看一下.container样式的源码，可以看出其核心就是.container和@media的设置 .container....pagination.square > li > a { margin 0 5px; } ul class='pagination square'>ul> 第三方扩展 Font Awesome

5.2K6 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭