html

<ul id="demo">
<li id="li-1">li1</li>
<li id="li-2">li2</li>
<li id="li-3">li3</li>
<li id="li-4">li4</li>
<li id="li-5">li5</li>
</ul>
1
2
3
4
5
6
7
js
第一种:监听事件

document.getElementById("demo").addEventListener("click",function(e){
console.log(e.target.id);
})
1
2
3
第二种

var ul = document.getElementById('demo');
ul.onclick = function(e) {
console.log(e.target.id);
};
1
2
3
4
第三种:jQuery点击事件

$('#demo').click(function(e){
console.log(e.target.id);
});
---------------------
作者:sulingliang
来源:CSDN
原文:https://blog.csdn.net/qq_32862143/article/details/73824563
版权声明:本文为博主原创文章,转载请附上博文链接!

js 点击列表li,获得当前li的id的更多相关文章

  1. JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容

    这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...

  2. 004 作业二(单击弹跳li节点的每个文本节点的值;点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上,有,则去除)

    1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. 完整版百度地图点击列表定位到对应位置并有交互动画效果demo

    1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo  ...

  4. JS产品分类列表练习

    CSS: ;;} ul,li{list-style: none;} body{color: #666;background: #f5f5f5;} a{text-decoration: none;col ...

  5. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  6. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  8. 基于jQuery实现点击列表加载更多效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   < ...

  9. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

随机推荐

  1. EntityFramework 事物引发的问题

    前记 还是最近做的日志模块,今天做最后的入库工作.在测试入库日志记录时,总是出现怪异的问题. 开启服务开始接收 Kafka 的消息,第一条数据没有问题,后面的都如不了库.很是懵~~~ 调试了很久定位在 ...

  2. Robot Framework--接口测试环境搭建

    1.安装requests库 (robotframework-requests依赖这个request http client) 执行pip install requests 2. 安装requestLi ...

  3. 聊聊Hash索引

    hash index是基于哈希表实现的,只有精确匹配索引所有列的查询才会生效.对于每一行数据,存储引擎都会对所有的索引列计算一个hash code,并将的有的hash code存储在索引中,同时在哈希 ...

  4. 如何下载oracle jdk|oracle jdk下载慢,要登录等等问题

    wget -c --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup ...

  5. Promise.then方法的执行顺序例题分析

    1. 当Promise对象作为resolve的参数时 const p = Promise.resolve(); const p1 = Promise.resolve(p); //就是p const p ...

  6. sql sever 触发器的概念和使用

    触发器简介: 触发器是一种特殊的存储过程,它的执行不是由程序调用,也不是手动执行,而是由事件来触发.触发器是当对某一个表进行操作.例如:update.insert.delete这些操作的时候,系统会自 ...

  7. https web service in Tibco & PC

    Error: 1.Certificate signature validation failed , Signature does not matchuse wrong public certific ...

  8. Linux操作系统常用命令合集——第六篇-压缩和归档操作(16个命令)

    1.gzip [命令作用] 压缩和解压缩文件 gzip/guzip/zcat zcat:不显式展开的前提下查看文本文件内容 zdiff/zgrep/zless/zmore [命令语法]  gzip   ...

  9. Splay P3369 【模板】普通平衡树(Treap/SBT)

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(排名定义为比当前数小的数的个数+1.若有多 ...

  10. ROStopic 通信方式

    操作演示,对 topic 通信方式的理解请看:点击打开链接 开启终端,运行 roscore 新开一个终端(已经安装好(ros-<distro>-ros-tutorials 包,否则运行  ...