<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的选择器函数</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
.main h2{line-height: 30px;}
</style>
<div class="main">
<h1 id="tlite">新闻资讯</h1>
<h2>做有态度的新闻专业栏目</h2>
<ul>
<li>01:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>02:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>03:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>04:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>05:新闻列表列表列表列表新闻列表列表列表列表</li>
<li>06:新闻列表列表列表列表新闻列表列表列表列表</li>
</ul>
</div>
<script type="text/javascript">
// 1:class选择器
$('.main').css({"background-color":"#B2E0FF","width":"800","height":"500","margin":"auto"});
// 2:ID选择器
$('#tlite').css({"color":"#fff","font-size":"24px","padding-top": "40px"});
// 3:所有标题元素 <h1> - <h6>
$(":header").css({"text-align":"center","font-weight": "normal"})
// 4:所有 <li> 元素
$("li").css({"list-style-type":"none","line-height": "30px"})
// 5:第一个<li> 元素
$("li:first").css("color","#F44336")
// 6:最后一个<li> 元素
$("li:last").css("color","#F44336")
// 7:所有偶数<li> 元素
$("li:even").css("background-color","#fff")
//8:标签选择器
$("h2").css({"font-size": "16px","color": "grey"})
</script>
</body>
</html>
博客列表 >常用的选择器函数-2018-04-03
常用的选择器函数-2018-04-03
- Lucifer的博客原创转载
- 2018年04月04日 00:53:25687浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
