获取元素
-
通过id获取元素
document.getElementById('logo').style.border = "" $('#logo').css('border','solid 2px red'); -
通过标签名获取元素
$('li').css('background','orange');//将页面中所有的li背景变成橙色 -
通过class获取元素
$('.w').css('background','red'); -
逗号
$('#logo,#menu').css('border','solid 2px red'); -
空格
document.getElementById('images').getElementsByTagName('li'); $('#images li').css('background','pink');
过滤获取元素
-
获取第一个和最后一个元素
$('li:first').css('border','dashed 2px red'); $('li:last').css('border','dashed 5px black'); -
获取指定索引的元素 eq equal等于
$('li:eq(7)').css('background','red'); -
获取包含指定文本的元素
$('li:contains(国)').css('background','#987'); -
获取包含指定属性的元素
$('li[name=y]').css('background','black');
父子关系获取节点
-
获取所有的标签子节点
$('#images').children().css('border',"solid 2px #333"); -
获取第一个子元素
$('ul li:first-child').css('background','red'); -
获取最后一个子元素
$('ul li:last-child').css('background','black'); -
获取指定索引的子元素 数字索引是从1开始的
$('ul li:nth-child(3)').css('background','orange'); -
获取元素下一个同级元素
$('#f').next().css('background','red'); -
获取元素上一个同级元素
$('#f').prev().css('background','orange'); -
获取父级元素
$('#f').parent().css('background','red'); -
获取元素的先辈元素
$('#f').parents('#section').css('border','solid 10px red'); -
获取元素的同辈元素 (同辈元素是不包含自己的)
$('#f').siblings().css('background','black'); -
在i父级元素中查找指定的元素
$('#images').find('.w').css('background','red');
