15-Javaweb学习-jQuery-选择器

15-Javaweb学习-jQuery-选择器

1.常规选择器

选择器	CSS****模式	jQuery****模式	描述
标签选择器	div{}	$(‘div’)	获取所有 div 元素的 DOM 对象
ID选择器	#box{}	$(‘#box’)	获取一个 ID 为 box 元素的 DOM 对象
类选择器(class)	.box{}	$(‘.box’)	获取所有 class 为 box 的所有 DOM 对象

$('div').css('color', 'red'); //元素选择器，返回多个元素
$('#box').css('color', 'red'); //ID 选择器，返回单个元素
$('.box').css('color', 'red'); //类(class)选择器，返回多个元素
为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
alert($('div').size());
alert($('#box').length);

判断元素对象是否存在

原生方法可以这么判断解决这个问题：
if (document.getElementById(‘pox’)) { //先判断是否存在这个对象
document.getElementById(‘pox’).style.color = ‘red’;
}
那么对于缺失不存在的元素，我们使用 jQuery 调用的话，怎么去判断是否存在呢？因为本身返回的是 jQuery 对象，可能会导致不存在元素存在与否，都会返回 true。
if ($(’#pox’).length > 0) { //判断元素包含数量即可
$(’#pox’).css(‘color’, ‘red’);
}

2.进阶选择器

选择器	CSS****模式	jQuery****模式	描述