基本选择器、层级选择器、过滤选择器、筛选选择器
html代码:
//html
<div id="box">我是id盒子</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<p class="box_1">5</p>
<div class="box_1">6</div>
<ul id="list">
<li>1</li>
<li>2</li>
<li id="list_3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<p>我是p</p>
</ul>
console.log($('#box')
console.log($('.box')
$('.box').css('color','red')
console.log($('div'));
console.log($('.box,p'));
console.log($('div.box_1'));
console.log($('#list>li'));
console.log($('#list li'));
console.log($('li:eq(3)').css('color', 'green'));
console.log($('li:odd').css('font-size', '30px'));
console.log($('li:even').css('background-color', 'grey'));
console.log($('#list').children());
console.log($('#list').children('li'));
console.log($('#list').children('p'));
console.log($('#list').find('li'));
console.log($('#list_3').siblings());
console.log($('#list_3').siblings('li'));
console.log($('#list_3').siblings('ol'));
console.log($('#list_3').parent());
console.log($('#list_3').parents());
console.log($('li').eq(4));
console.log($('#list_3').next());
console.log($('#list_3').nextAll());
console.log($('#list_3').prev());
console.log($('#list_3').prevAll());
console.log($('#list_3').index());
console.log($('li').eq($('#list_3').index()));
console.log($('#list_3').siblings().not('li'));