4月3日作业:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> .xz1{ background-color: red; } </style> </head> <body> <ul> <li><p>常用选择器1</p></li> <li><p>常用选择器2</p></li> <li><p>常用选择器3</p></li> <li><p>常用选择器4</p></li> <li><p>常用选择器5</p></li> <li><p>常用选择器6</p></li> </ul> </body> </html> <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> <script type="text/javascript"> $('ul li').addClass('xz1') // 1.所有的li背景颜色改变 $('*').removeClass() $('li>p').css('color','red') // p标签的前景色变为红色 $('*').removeAttr("style") $('li:last').css('color','red') // 2.最后一个li变现的颜色变为红色 $('*').removeAttr("style") $('li:first').css('color','red') // 3.第一个li标签前景色变为红色 $('*').removeAttr("style") $('li:even').addClass('xz1') // 4.索引为偶数的背景以暗色改变 $('li:even>p').css('color','white') // 5.索引为偶数的P标签前景变为白色 $('*').removeAttr("style") $('*').removeClass() $('li:eq(4)').addClass('xz1') // 6.索引为4的li标签改变背景颜色 $('*').removeClass() $('li:eq(4)').next().css('background-color','yellow') // 7.索引为4的下一个改变背景颜色 $('*').removeAttr('style') </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例