层级选择器

1、ancestor descendant （后代选择器）

• 在给定的祖先元素下匹配所有的后代元素
  
• $(“form input”)
  
• $('.div span')选取<div>里的所有的<span>元素
  

2、parent child （子选择器）

• 在给定的父元素下匹配所有的子元素
  
• $(“form > input”)
  
• $('.div > span')选取<div>元素下元素名是<span>的子元素
  

3、prev next（临近选择器）

• 匹配所有紧接在 prev 元素后的 next 元素
  
• $(“label + input”)
  
• $('.one + div')选取class为one的下一个<div>元素
  

4、prev sibling

• 匹配 prev 元素之后的所有 siblings 元素
  
• $(“prev ~ input”)
  
• $('.one + div')选取class为one的下一个<div>元素
  
• $('#two ~ div')选取id为two的元素后面的所有的<div>兄弟元素

等价关系

1、同等关系

选择器：$(‘.one + div’)

方法：$(‘.one’).next(‘div’);

2、同等关系

选择器：$(‘#pre ~ div’)

方法：$(‘#pre’).nextAll(‘div’);

方法：$(‘#pre’).nextAll();

方法：$(‘#pre’).siblings();

3、同等关系

$(‘div’).is(':checked')

$(‘div’).attr('checked') == 'checked'