js选择器

 

基本选择器

<div id="div1" class="box">div1(class="box")</div>

<div id="div2" class="box">div2(class="box")</div>

<div id="div3">div3</div>

<span class="box">span(class="box")</span>

<br>

<ul>

  <li>AAAAA</li>

  <li title="hello">BBBBB(title="hello")</li>

  <li class="box">CCCCC(class="box")</li>

  <li title="hello">DDDDDD(title="hello")</li>

</ul>

 1. 选择id为div1的元素

   2. 选择所有的div元素

   3. 选择所有class属性为box的元素

   4. 选择所有的div和span元素

   5. 选择所有class属性为box的div元素

   */

  $(function () {

    // $('#div1').css('background','pink')

    // $('div').css('background','skyblue')

    // $('.box').css('background','purple')

      //  $('div,span').css('background','blue')

      $('div.box').css('background','blue')

  })

 

 

层次选择器

<ul>

  <li>AAAAA</li>

  <li class="box">CCCCC</li>

  <li title="hello"><span>BBBBB</span></li>

  <li title="hello"><span>DDDD</span></li>

  <span>EEEEE</span>

</ul>

  $(function () {

//      1. 选中ul下所有的的span 

      // $('ul span').css('background','pink')

//      2. 选中ul下所有的子元素span    直接子级选择器    “>” 

      //  $('ul>span').css('background','pink')

//      3. 选中class为box的下一个li 

        // $('.box + li').css('background','pink')

//      4. 选中ul下的class为box的元素后面的所有兄弟元素 

        // $('.box ~').css('background','pink')

  })

 

过滤选择器

<div id="div1" class="box">class为box的div1</div>

<div id="div2" class="box">class为box的div2</div>

<div id="div3">div3</div>

<span class="box">class为box的span</span>

<br/>

<ul>

  <li>AAAAA</li>

  <li title="hello">BBBBB</li>

  <li class="box">CCCCC</li>

  <li title="hello">DDDDDD</li>

  <li title="two">BBBBB</li>

  <li style="display:none">我本来是隐藏的</li>

</ul>

 

/*

   需求:

   1. 选择第一个div

   2. 选择最后一个class为box的元素

   3. 选择所有class属性不为box的div

   4. 选择第二个和第三个li元素

   5. 选择内容为BBBBB的li

   6. 选择隐藏的li

   7. 选择有title属性的li元素

   8. 选择所有属性title为hello的li元素

   */

  $(function () {

//      1. 选择第一个div 

    // $('div:first').css('background','red')

    // 选择最后一个div 

    // $('div:last').css('background','red')

//      2. 选择最后一个class为box的元素 

    // $('.box:last ').css('background','red')

//      3. 选择所有class属性不为box的div 

        // $('div:not(.box)').css('background','red')

//      4. 选择第二个和第三个li元素 (小于3大于0) 

        // $('li:lt(3):gt(0)').css('background','red') 

//        过滤选择器  会拿前边执行后的新集合 操作后边的选择器 

//      5. 选择内容为BBBBB的li

        // $('li:contains(BBBBB)').css('background','red') 

//      6. 选择隐藏的li 

      // $('li:hidden').show(1000)

//      7. 选择有title属性的li元素 

          // $('li[title]').css('background','red') 

//      8. 选择所有属性title为hello的li元素

      //  $('li[title=hello]').css('background','red') 

//      9. 选择所有有title属性且title属性不为hello的li 

        // $('li[title!=hello]').css('background','red')

  })

 

 

表单选择器

<form>

  用户名: <input type="text"/><br>

  密 码: <input type="password"/><br>

  爱 好:

  <input type="checkbox" checked="checked"/>篮球

  <input type="checkbox" checked="checked"/>足球

  <input type="checkbox" />羽毛球 <br>

  性 别:

  <input type="radio" name="sex" value='male'/>男

  <input type="radio" name="sex" value='female'/>女<br>

  邮 箱: <input type="text" name="email" disabled="disabled"/><br>

  所在地:

  <select>

    <option value="1">北京</option>

    <option value="2" selected="selected">天津</option>

    <option value="3">河北</option>

  </select><br>

  <input type="submit" value="提交"/>

</form>

 

 1. 选择不可用的文本输入框

   2. 显示选择爱好 的个数

   3. 显示选择的城市名称

   */

  $(function () {

//      1. 选择不可用的文本输入框 

// $(':input:text:disabled').css('background','pink');

//      2. 显示选择爱好 的个数 

// console.log($(':input:checkbox:checked').length) 

//      3. 显示选择的城市名称 

// console.log($('select option:selected').html());

  })