使用JavaScript代码给每个li列表加两个鼠标事件onmouseover和onmouseout

使用JavaScript代码给每个li列表加两个鼠标事件onmouseover和onmouseout,第1张

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>RunJS 演示代码</title>

<style>

.kuai_two{

display:none

}

</style>

<script>

onload=function(){

var lis = document.getElementsByTagName("li")

for(var i=0i<lis.lengthi++){

var li = lis[i]

var div=li.children[1]

li.onmouseenter = function(){

div.style.display='block'

}

li.onmouseleave=function(){

div.style.display='none'

}

}

</script>

  </head>

<body>

    <ul>

<li> dfgdgdfg

<dl>

<dd><a>sdf</a></dd>

<dd><a>sdf</a></dd>

<dd><a>sdf</a></dd>

<dd><a>sdf</a></dd>

<dd><a>sdf</a></dd>

</dl>

<div class="kuai_two">

<p>

aaaaaa

</p>

<br /><br />

<p>

bbbbbb

</p>

<br /><br />

<h5>

site

</h5>

<p>

11111

</p>

<p>

22222

</p>

<p>

333

</p>

<p>

66666

</p>

<p>

55555

</p>

</div>

</li>

</ul>

  </body>

</html>

输入$('ul li').click(function(){// TODO})

利用jQuery动态获取点击事件

打开HBuilder开发工具,创建Web项目,并在web项目指定目录下新建静态页面,引入核心js,

插入可以 *** 作的DOM元素,在<body></body>插入div和ul元素,并给ul属性id,

在ul下方插入一个按钮button,设置id和class属性,引入样式文件,

在jquery初始化函数内编写按钮点击事件,动态向ul中插入li元素,并在li元素插入a标签,a标签有点击事件,

编写完毕后,预览该静态页面,点击“添加”按钮,发现报错,

检查js代码,发现a标签点击事件传参时单双引号出错,修改之后再次预览。

var lis = document.querySelectorAll("ul li")

for(var i = 0 i < lis.length i++){

    lis[i].onmouseover = function(){}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11957783.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存