博客列表 >jQuery的选择器使用方式——2018年4月4日11时29分

jQuery的选择器使用方式——2018年4月4日11时29分

一枝黄花
一枝黄花原创
2018年04月04日 11:38:34702浏览

今天学习了用jQuery选择器的几种方式。感觉跟CSS选择器差不多,那时候CSS没有学好,等一下有时间再去看一下之前的视频。这里我用了6种方式来写一个实时热点。

一个实时热点效果预览图

QQ截图20180404113246.png

代码如下

实例

<!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种选择器


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议