今天学习了用jQuery选择器的几种方式。感觉跟CSS选择器差不多,那时候CSS没有学好,等一下有时间再去看一下之前的视频。这里我用了6种方式来写一个实时热点。
一个实时热点效果预览图
代码如下
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的选择器方法</title> <body> <div> <ul> <li>1. 美国发建议征税清单 <a href=''>热度 44988</a></li> <li>2. 美公布加征关税清单 <a href=''>热度 43537</a></li> <li>3. 广州民房凌晨失火 <a href=''>热度 42992</a></li> <li>4. 女生发掀裙自拍照 <a href=''>热度 42015</a></li> <li>5. 美国优兔总部枪击案 <a href=''>热度 40266</a></li> <li>6. 外逃17年的女红通 <a href=''> 热度 38575</a></li> <li>7. 中国有王牌对贸易战 <a href=''>热度 37687</a></li> <li>8. 身份证新规 <a href=''>热度 36163</a></li> </ul> </div> </body> </html> <script type="text/javascript" src="../js/s/jquery-3.3.1.js"></script> <script type="text/javascript"> $('UL').find('a').css('text-decoration','none') $('a').get(0).style.color = 'red' $('li').last().css('font-size','30px') $('li').eq(3).css('background-color','lightgreen') $('li').eq(4).next().css('background-color','lightskyblue') $('li').eq(2).next().css('font-size','25px') $('li').css('color','deeppink') $('li').slice(7).css('background-color','lightgreen') </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:这里我用到了6种选择器