jQuery元素获取

获取元素

1. 通过id获取元素

   document.getElementById('logo').style.border = ""
   $('#logo').css('border','solid 2px red');
   

2. 通过标签名获取元素

   $('li').css('background','orange');//将页面中所有的li背景变成橙色
   

3. 通过class获取元素

   $('.w').css('background','red');
   

4. 逗号

   $('#logo,#menu').css('border','solid 2px red');
   

5. 空格

   document.getElementById('images').getElementsByTagName('li');
   $('#images li').css('background','pink');
   

过滤获取元素

1. 获取第一个和最后一个元素

   $('li:first').css('border','dashed 2px red');
   $('li:last').css('border','dashed 5px black');
   

2. 获取指定索引的元素 eq equal等于

   $('li:eq(7)').css('background','red');
   

3. 获取包含指定文本的元素

   $('li:contains(国)').css('background','#987');
   

4. 获取包含指定属性的元素

   $('li[name=y]').css('background','black');
   

父子关系获取节点

1. 获取所有的标签子节点

   $('#images').children().css('border',"solid 2px #333");
   

2. 获取第一个子元素

   $('ul li:first-child').css('background','red');
   

3. 获取最后一个子元素

   $('ul li:last-child').css('background','black');
   

4. 获取指定索引的子元素 数字索引是从1开始的

   $('ul li:nth-child(3)').css('background','orange');
   

5. 获取元素下一个同级元素

   $('#f').next().css('background','red');
   

6. 获取元素上一个同级元素

   $('#f').prev().css('background','orange');
   

7. 获取父级元素

   $('#f').parent().css('background','red');
   

8. 获取元素的先辈元素

   $('#f').parents('#section').css('border','solid 10px red');
   

9. 获取元素的同辈元素 (同辈元素是不包含自己的)

   $('#f').siblings().css('background','black');
   

10. 在i父级元素中查找指定的元素

    $('#images').find('.w').css('background','red');