jQuery的思想，实际上很简单，八个字可以概括：选取元素，对其操作。

jQuery 如何获取元素

使用jQuery的第一步，往往是将一个选择表达式，放进构造函数jQuery()，简写为$()，然后得到被选择的对象。

基本选择器：

  1. let div = $('#abc'); // 按ID查找，查找<div id="abc">
  2. let p = $('p'); // 按标签查找，返回所有<p>节点
  3. let a = $('.red'); //按class查找，所有节点包含`class="red"`都将返回
  4. let inputl = $('input[name=first]'); //按属性查找，选择name属性等于first的input元素
  5. let n = $('p,div'); //多项选择器， 把<p>和<div>都选出来

层级选择器：

如果两个DOM元素具有层级关系，就可以用$(‘ancestor descendant’)来选择，层级之间用空格隔开。

  1. let el = $('form.test p input'); // 在form表单选择被<p>包含的<input>

子选择器：

子选择器$(‘parent>child’)类似层级选择器，但是限定了层级关系必须是父子关系。

  1. let el = $('ul.n1>li.n2'); // 可以选出[<li class="n2"></li>]

过滤器:

过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。

  1. let el1 = $('ul li:first-child'); // 仅选出ul第一个li子元素
  2. let ell = $('ul li:last-child'); // 仅选出ul最后一个li子元素
  3. let el2 = $('ul li:nth-child(2)'); // 选出ul的第N个子元素li，N从1开始
  4. let el3 = $('tr:odd') //选择表格的奇数行
  5. let el4 = $('div:visible') //选择可见的div元素
  6. let el5 = $('div:gt(2)') // 选择所有的div元素，除了前三个

表单相关：

针对表单元素，jQuery还有一组特殊的选择器参考：

  • :input：可以选择，