jq入门选择器

来源：互联网发布：杭州proe软件速成班编辑：程序博客网时间：2024/05/19 13:21
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//抓元素名字//$('div').css({'color':'red'});//抓ID$('#p').css({'color':'purple'});//抓类名$('.p').css({'color':'yellow'});//群组选择器,可以填类名id名混合$('b,i').css({'color':'pink'});//*选择器//$('body *').css({'background':'grey'});//------------------------------------------------------------//后代选择器$('#CengCi p').css({'color':'red'});//子代选择器$('#CengCi>p').css({'background':'yellow'});//兄弟选择器,选择后面所有是p的兄弟  、、 兄弟$('#second ~p').css({'color':'green'});//相邻选择器$('#second + p').css({'color':'brown'});//-----------------------属性选择器---------------------------//这里可以填$('#lvye') == $('[id = "lvye"]'); 类也一样$('#list input[type="checkbox"]').attr('checked','true');})</script></head><body><div>绿叶学习网</div><p id="p">绿叶学习网</p><p class="p">绿叶学习网</p><span>绿叶学习网</span><div>绿叶学习网</div><b>绿叶学习网</b><i>绿叶学习网</i><hr /><h1>层次选择器</h1><div id="CengCi"><p>lvye的子元素</p>        <p>lvye的子元素</p>        <div id="second">            <p>lvye子元素的子元素</p>            <p>lvye子元素的子元素</p>        </div>        <p>lvye的子元素</p>        <p>lvye的子元素</p></div><hr /><h1>属性选择器</h1><h3>你喜欢的水果是：</h3>    <div id="list">        <label><input type="checkbox" />：苹果</label>        <label><input type="checkbox" />：西瓜</label>        <label><input type="checkbox" />：蜜桃</label>        <label><input type="checkbox" />：梨子</label>        <label><input type="checkbox" />：香蕉</label>    </div></body></html>
阅读全文
0 0