1.点击按钮获取输入框中的值（JS对比jQuery）
2.分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）
3.使用层次选择器，选择某个元素下面的所有元素和子元素
4.使用过滤选择器，选择li中的元素
5.表格隔行换色
6.获取表单中的单选、多选、下拉值
7.下拉菜单
~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav > li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav > li > a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #fecc5b; border-right: 1px solid #fecc5b; } .nav ul li { border-bottom: 1px solid #fecc5b; } .nav ul li a:hover { background-color: #fff5da; } </style> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> </li> </ul> <script src="./jquery-3.6.0.js"></script> <script> $(function () { // 鼠标经过 $(".nav>li").mouseover(function () { // 显示元素（this 表示当前元素） $(this).children("ul").show(); }); // 鼠标离开 $(".nav>li").mouseout(function () { $(this).children("ul").hide(); }); }); </script> </body> </html> ~~~ #### 案例：排他思想 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(function() { // 1. 隐式迭代 给所有的按钮都绑定了点击事件 $("button").click(function() { // 2. 当前的元素变化背景颜色 $(this).css("background", "pink"); // 3. 其余的兄弟去掉背景颜色 隐式迭代 $(this).siblings("button").css("background", ""); }); }) </script> </body> </html> ~~~ 链式编程 ~~~js $(this).css("color", "red").siblings().css("color", ""); ~~~
