4.1-jQuery 选择器

jQ 选择器是用来获取元素对象或者元素集合

I 基本选择器

• id选择器 #ID
• class类名选择 .className
• 标签名选择器 p ul li div

let idEg = $('#tabBox');
let classEg = $('.tabBox');
let tagNameEg = $('ul');

II 层级选择器：根据 html 层级关系获取元素

• 2.1 后代选择器 #tabBox div（获取 id 为 tabBox 后代中所有的 div）
• 2.2 子级选择器 #tabBox > div （获取 id 为 tabBox 所有子级 div）
• 2.3 兄弟选择器 #tabBox + div 获取 id 为 tabBox【紧邻】的下一个兄弟 div
• 2.4 获取所有的弟弟 #tabBox ~

console.log($('#tabBox li'));
console.log($('#tabBox > div'));
console.log($('#tabBox + p'));
console.log($('#tabBox ~ p'));

III 过滤选择器

• 3.1 :first 获取第一个
• 3.2 :last 获取最后一个
• 3.3 :odd 获取索引为奇数的
• 3.4 :even 获取索引为偶数的
• 3.5 :not() 除了xxx的都获取，:not(first) 除了第一个
• 3.6 :eq(index) 获取索引为 index 的
• 3.7 :gt(index) 获取比指定索引大的
• 3.8 :lt(index) 获取比指定索引小的

console.log($('.header li:first'));
console.log($('.header li:last'));
console.log($('.header li:odd'));
console.log($('.header li:even'));
console.log($('.header li:not(odd)'));
console.log($('.header li:eq(1)'));
console.log($('.header li:gt(1)'));
console.log($('.header li:lt(2)'));

jQuery 对象

我们通过 $() 方法获取都是 jQuery 对象，都是 jQuery 的一个实例
每个 jQ 对象是一个类数组对象，其中有索引的表示获取的元素对象（原生对象），属性 length 表示本次获取到的元素个数

[
  0: p
  context: document
  length: 1
  prevObject: m.fn.init [document, context: document]
  selector: "#contextFilter p:contains("钱")"
  __proto__: Object(0)
]

• 用 jQ 获取元素对象或者元素集合，不管能不能获取到都会返回一个对象，而原生 js 方法如果获取不到会返回 null。如果想判断 jQ 是否获取到元素了，应该判断 jQ 对象的 length 属性，如果为 0，表示没有获取到。