<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery选择器</title>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div>1.基本</div>
<div class="div1">HELLO div</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<!--1.jquery基本语法: $(selector).action() -->
<div>2.层级</div>
<p>p1</p>
<div id="outer">
<div>
<p>hello div p layer</p>
</div>
<p>hello p layer</p>
</div>
<p>p2</p>
<a>456</a>
<p>111</p>
<div>3.基本</div>
<div class="div">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</div>
<div>4.属性</div>
<p firstname="stars">i am selfish and i have more satifacted</p>
<p firstname="star">if you accept my deficit,you will get my best</p>
<div>表单选择器</div>
<input type="text">
<input type="button">
<script>
//一：jquery选择器
// 1.基本选择器
// $('*').css('color','blue').css('background','yellow');
// $('div').css('color','red');
// $('#p1').css('color','red');
// $('.div1,#p1').css('color','purple');
//2.层级选择器
// $('#outer p').css('color','yellow');//后代选择器
// $('#outer>p').css('color','yellow');//子代选择器
// $('#outer+p').css('color','yellow');//找与其相邻的向下的元素，下面如果没有则不操作
// $('#outer~p').css('color','yellow');//找与其相邻的向下的元素，下面如果有则找到
//3.基本上筛选器
// $('.div li:first').css('color','red');
// $('.div li:last').css('color','red');
// $('.div li:eq(2)').css('color','red');//等于该索引值的变
// $('.div li:lt(4)').css('color','blue');//小于该索引值的变
// $('.div li:gt(2)').css('color','blue');//大于该索引值的变
// 4.属性选择器
// $('[firstname]').css('color','red');
// $("[firstname='star']").css('color','red');
//5.表单选择器
// $("[type='button']").css('width','250px');
// $(':button').css('width','250px');//只适用于input标签
</script>
</body>
</html>