<!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>
来源：https://www.cnblogs.com/startl/p/12284366.html