jQuery选择器

jQuery选择器

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、一:基本选择器

  // Id选择器
  console.log($('#box'));
  // 类选择器
  console.log($('.box'));
  // 或者
  console.log(jQuery('.box'));
  // 标签选择器
  console.log($('div'));
  // 并集选择器
  console.log($('.box,p'));
  // 交集选择器
  console.log($('p.box'));

二.层级选择器

1.引入库

代码如下（示例）：

  // 1.子代选择器
  console.log($('#list>li'));
  // 2.后代选择器
  console.log($('#list li'));

三.过滤选择器

代码如下（示例）：

  // 三.过滤选择器
  // :eq(index) 作用为通过索引获取元素
  console.log($('li:eq(4)'));
  // :odd() 获取到的元素中,索引号为奇数的元素
  console.log($('li:odd'));
  // : even选取索引号为偶数的元素
  console.log($('li:even'));

该处使用的url网络请求的数据。

---

四.筛选选择器

 // 1.children(selector) 获取的为子元素，selector为参数，若没有参数，获取的是全部的子元素，
 // 有参数，获取的为当前的子元素
 console.log($('#list_2').children());
 console.log($('#list_2').children('li'));
 console.log($('#list').children('div'));
 // 2.find(selector) 必须加selector, 作用相当于后代选择器
 console.log($('#list').find('li'));
 // 3.siblings(selector) 查找兄弟节点，但不包括本身
 console.log($('#list').siblings());
 // 4.parent() 获取的为父元素
 console.log($('#list').parent());
 console.log($('#list').parents());
 // 5.parents()获取的为祖先元素
 console.log($('#list_1').parents());
 // 6.eq(index) 通过索引获取元素
 console.log($('li').eq(2));
 console.log($('li').eq(6));
 // 7.next() 找下一个兄弟
 console.log($('#list').next());
 console.log($('#list_1').nextAll());
 // 8.prev() 找上一个兄弟 
 console.log($('#list_2').prev());
 console.log($('#list_3').prevAll());
 // 9.Index() 获取索引
 console.log($('#list').index());
 // 10.not()
 console.log($('li').not('.div'));

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了jQuery选择器的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。