jQuery入门笔记之（一）选择器引擎

$('div.box'); //限定.box获取到的元素标签名必须是div  $('p#box div.side'); //同上

.box.pox { //双 class 选择器获取页面中class同时有.box.pox的元素      color:red;  }  $('.box.pox').css('color', 'red'); //用多个class进行精准确定

注意要点：

（三）高级选择器

在前面学习了六种最常规的选择器，一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等并不好获取，下面就来说说这些高级选择器：

其实后代选择器我们在进阶选择器里面已经有过使用，这里为什么要再提起呢?

因为它属于层次选择器，在高级选择器中，jQuery为这样的选择器都提供了一个相对应的方法。

1. jQuery为后代选择器提供了一个等价的find(）方法:

   $('#box p').css('color', 'red'); //后代选择器  $('#box').find('p').css('color','red');//和后代选择器等价

2. jQuery为子选择器提供了一个等价的children()方法

   $('#box > p').css('color','red');//子选择器，孙子失明  $('#box').children('p').css('color','red');//和子选择器等价

3. jQuery为next选择器提供了一个等价的next()方法：

   $('#box+p').css('color','red');//下一个同级节点  $('#box').next('p').css('color','red');//和next选择器等价

4. jQuery为nextAll选择器提供了一个等价的方法nextAll()：

   $('#box ~ p').css('color','red');//后面所有同级节点  $('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价

需要注意的是：

1. 层次选择器对节点的层次都是有要求的，比如子选择器，有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
2. 在 find() 、 children() 、 next() 和 nextAll() 和这四个方法中，如果不传递参数，就相当于传递了“ ”，选择所有符合条件的元素， *建议尽量保持参数的传递

jQuery独有补充方法。CSS未含有

$('#box').prev('p').css('color','red');//同级上一个元素  $('#box').prevAll('p').css('color','red');//同级上面所有的元素    $('#box').prevUntil('p').css('color','red');//同级上非指定元素选定，遇到则停止  $('#box').nextUntil('p').css('color','red');//同级下非指定元素选定，遇到则停止    $('#box').siblings('p').css('color','red');//siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素进行选定：

$('p', '#box');//jQuery会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。    $('p', $('#parent'));//jQuery内部会也将这条语句转成$('#box').find('p')

$('input').get(0).focus(); //先初始化激活一个元素焦点  $(':focus').css('background', 'red'); //被焦点的元素

$('li').eq(2).css('background','#ccc');//元素li的第三个元素，负数从后开始  $('li').first().css('background','#ccc');//元素li的第一个元素  $('li').last().css('background','#ccc');//元素li的最后一个元素  $('li').not('.red').css('background','#ccc');//元素li不含class为red的元素

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素

$('li').parent().css('background','#ccc');//选择当前元素的父元素  $('li').parents().css('background','#ccc');//选择当前元素的父元素及祖先元素（追溯到html）  $('li').parentsUntil('html').css('background','#ccc');//选择当前元素遇到html父元素停止（会在body上加）

$('.red').is('li'); //选择器，检测class为是否为 red  $('.red').is($('li')); //jQuery 对象集合，同上  $('.red').is($('li').eq(2)); //jQuery 对象单个，同上  $('.red').is($('li').get(1)); //DOM 对象，同上

<ul>    <li>list <strong>item 1</strong></li>    <li><span>list item 2</span></li>    <li>list item 3</li>  </ul>  <script>  $("ul").click(function(event) {    var $target = $(event.target);    if ( $target.is("li") ) {      $target.css("background-color", "red");    }  });  </script>

$('li').slice(0,2).css('color', 'red'); //前三个变成红色

$('li').filter('.red').css('background','#ccc');//选择li的class为red的元素  $('li').filter('.red,:first,:last').css('background','#ccc');//增加了首尾选择  //特殊要求函数返回  $('li').filter(function(){      return $(this).attr('class')=='red' && $(this).attr('title')=='列表3';  }).css('background', '#ccc');

//val()是jQuery用来获取表单元素文本内容的一个方法  $('input').val(); //元素名定位，默认获取第一个  $('input').eq(1).val(); //同上，获取第二个  $('input[type=password]').val();//选择type为password的字段  $('input[name=user]').val(); //选择 name 为 user 的字段