列表隔行变色
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 点击按钮$("#btn").click(function(){// 奇----红色,偶----黄色// odd----奇数的// even----偶数$("ul>li:even").css("backgroundColor","red");$("ul>li:odd").css("backgroundColor","yellow");}); });</script></head><body><input type="button" value="隔行变色" id="btn"><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li><li>我是第9个li</li><li>我是第10个li</li></ul><script>// $(function () {// //就这么写，会不会报错，会不会有效果// var lis = $("li");// for (var i = 0; i < lis.length; i++) {//if (i % 2 == 0) {// // lis:jq对象// // lis[i]:DOM对象，通过下标取出来了// lis[i].style.backgroundColor = "pink";//} else {// lis[i].style.backgroundColor = "hotpink";//}// }// });</script></body></html>
显示和隐藏下拉菜单
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(imgs/bg.jpg);}.wrap li {background-image: url(imgs/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;display: none;}</style><script src="jquery-1.12.1.js"></script><script>// 页面加载事件$(function(){// 获取ul中所有的li,然后注册鼠标进入和鼠标离开事件$(".wrap>ul>li").mouseenter(function(){// 当前li中的所有的子元素,再从所有的子元素中找ul$(this).children('ul').stop().show(500);});// 鼠标离开$(".wrap>ul>li").mouseleave(function(){$(this).children('ul').stop().hide(500);});});</script></head><body><div class="wrap"><ul><li><a href="javascript:void(0);">一级菜单1</a><ul class="ul"><li><a href="javascript:void(0);">二级菜单11</a></li><li><a href="javascript:void(0);">二级菜单12</a></li><li><a href="javascript:void(0);">二级菜单13</a></li></ul></li><li><a href="javascript:void(0);">一级菜单2</a><ul><li><a href="javascript:void(0);">二级菜单21</a></li><li><a href="javascript:void(0);">二级菜单22</a></li><li><a href="javascript:void(0);">二级菜单23</a></li></ul></li><li><a href="javascript:void(0);">一级菜单3</a><ul><li><a href="javascript:void(0);">二级菜单31</a></li><li><a href="javascript:void(0);">二级菜单32</a></li><li><a href="javascript:void(0);">二级菜单33</a></li></ul></li></ul></div></body></html>
列表的高亮显示效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>ul {list-style-type: none;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>// 高亮显示的效果:鼠标进入,当前的li有背景颜色,离开颜色就干掉了// 获取ul中所有的li标签,添加鼠标进入和鼠标离开事件// 页面加载// $(function(){//// 鼠标进入//$("#uu>li").mouseenter(function(){// $(this).css("backgroundColor","red");//});//// 鼠标离开//$("#uu>li").mouseleave(function(){// $(this).css("backgroundColor","");//});// });// $(function(){//// 鼠标进入//$("#uu>li").mouseenter(function(){// $(this).css("backgroundColor","red");//}).mouseleave(function(){// $(this).css("backgroundColor","");//});// });// $(function(){//// 鼠标进入//$("#uu>li").mouseenter(function(){// $(this).css("backgroundColor","red");//});//// 鼠标离开事件//$("#uu>li").mouseleave(function(){// $(this).css("backgroundColor","");//});//// 点击事件:当前的li中的字体样式改变//$("#uu>li").click(function(){// $(this).css("color","green");// $(this).css("fontSize","29px");// $(this).css("fontFamily","Century Gothic");//});// });// 链式编程$(function(){// 鼠标进入$("#uu>li").mouseenter(function(){$(this).css("backgroundColor","red");}).mouseleave(function(){$(this).css("backgroundColor","");}).click(function(){$(this).css("color","green").css("fontSize","29px").css("fontFamily","Century Gothic");});});</script></head><body><ul id="uu"><li>倩女幽魂</li><li>海阔天空</li><li>千纸鹤</li><li>真的爱你</li><li>丑八怪</li><li>突然的自我</li><li>左手右手</li><li>喜洋洋</li><li>一路顺风</li></ul></body></html>
