jQuery选择器(二)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery第五节课</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jQuery选择器
// jQuery 中所有选择器都以美元符号开头：$(),它基于已经存在的 CSS 选择器;
$(function(){
//层级选择器（相当于父类和子类的元素关系）:
// $('父级元素 > 子级元素')给定的父级元素下匹配所有的子元素
//$('p>a').css('color','red')
// $('祖先元素 后代元素')给定的祖先元素下匹配所有的后代元素
$('p a').css('color','red')
//顺序选择器
//$(':first') 第一个元素
$('li:first').css('border','1px solid pink')
//$(':last') 最后一个元素
$('li:last').css('border','1px solid pink')
// 比较(x的顺序是从0开始)
// $(':gt(x)')表示大于值x的元素
$('li:gt(5)').css('background','blue')
//$(':lt(x)')表示小于值x的元素
$('li:lt(1)').css('background','red')
//$(':eq(x)')表示等于值x的元素
$('li:eq(4)').css('background','pink')
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
p,li{background: #f5f5f5;line-height: 40px;text-align: center;margin-top: 10px;}
</style>
</head>
<body>
<p><a href="#">第一层</a> <a href="#">第一层</a> <b><a href="#">第二层</a></b></p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
