why's blog

<前端技术>JQuery——寻找元素

时间：Aug. 22, 2017 分类：前端

JQuery是对JavaScript和DOM进行了封装，并没有创建新的功能，做的是简化实现代码，并解决浏览器之间兼容的问题。

我们通过JQuery也是为了实现寻找元素和操作元素。

本文代码更多来自http://jquery.cuishifeng.cn/

寻找元素

JQuery的格式都是通过$("寻找方式")来实现

选择器

通过标签

根据指定的标签寻找元素

html代码

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

JQuery代码

$("div");

获取结果

[<div>DIV1</div>, <div>DIV2</div>]

通过id

根据指定的id进行寻找元素

html代码

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

JQuery代码

$("#myDiv");

获取结果

[<div id="myDiv">id="myDiv"</div>]

特殊情况下包含特殊字符

html代码

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

JQuery代码

$(#foo\\[bar\\]);

获取结果

[<span id="foo[bar]"></span>]

通过class

根据指定的class进行元素寻找

html代码

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

JQuery代码

$(".myClass");

获取结果

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

匹配所有

匹配所有元素，经常用于结合上下文来进行搜索

html代码

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

JQuery

$("*")

获取代码

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

层级

通过或关系匹配

将每个选择器匹配到元素合并变为一个集合进行返回，可以指定多个选择器

html代码

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

JQuery代码

$("div,span,p.myClass")

获取代码

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

匹配给定祖先元素下所有后代元素

html代码

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery代码(获取form元素下所有的input元素)

$("form input")

获取结果

[ <input name="name" />, <input name="newsletter" /> ]

匹配给定父元素下所有子元素

html代码

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery代码(获取form元素下input子元素)

$("form > input")

获取结果

[ <input name="name" /> ]

匹配指定元素的下一个符合选择器的同辈元素

html代码

<form>
  <label>Name:</label>
  <a>why</a>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery代码

$("label + input")

获取结果

[ <input name="newsletter" /> ]

匹配指定元素后的所有符合选择器的同辈元素

html代码

<form>
  <label>Name:</label>
  <a>why</a>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery代码

$("label ~ input")

获取结果

[ <input name="name" />, <input name="newsletter" /> ]

筛选器

获取匹配到第一个元素

html代码

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

JQuery代码

$('li:first');

获取结果

[ <li>list item 1</li> ]

获取匹配到最后一个元素

html代码

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

JQuery代码

$('li:last');

获取结果

[ <li>list item 5</li> ]

获取匹配不到的元素

html代码

<input name="apple" />
<input name="flower" checked="checked" />

JQuery代码

$("input:not(:checked)")

获取结果

[ <input name="apple" /> ]

根据索引进行匹配

匹配索引值为偶数的元素，从0开始计数

html代码

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:even")

获取结果

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

匹配索引值为奇数的元素，从0开始计数

html代码

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:odd")

获取结果

[ <tr><td>Value 1</td></tr> ]

直接指定索引

索引也是从0开始计数

html代码

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:eq(1)")

结果

[ <tr><td>Value 1</td></tr> ]

指定大于给定索引值的元素

html代码

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:gt(0)")

结果

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

指定小于给定索引值的元素

html代码

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:lt(2)")

获取结果

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

获取所有标题元素

html代码

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

JQuery代码

$(":header").css("background", "#EEE");

获取结果

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

获取包含文本内容的元素

注意是区分大小写的

html代码

    <div>why</div>
    <div>wanghongyu</div>
    <div>wwwhyyyyy</div>
    <div>WHY</div>

JQuery代码

$("div:contains('why')")

获取结果

[ <div>why</div>, <div>wwwhyyyyy</div> ]

查看不包含子元素或文本的空元素

html代码

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

JQuery代码

$("td:empty")

获取结果

[ <td></td>, <td></td> ]

查找包含匹配元素的元素

html代码

<div><p>Hello</p></div>
<div>Hello again!</div>

JQuery代码（寻找包含p元素的div元素）

$("div:has(p)")

获取结果

[ <div class="test"><p>Hello</p></div> ]

查找有子元素或者文本的元素

html代码

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

JQuery代码

$("td:parent")

获取结果

[ <td>Value 1</td>, <td>Value 2</td> ]

匹配隐藏元素

匹配隐藏的元素

html代码

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:hidden")

获取结果

[ <tr style="display:none"><td>Value 1</td></tr> ]

匹配type为hidden的元素

html代码

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

JQuery代码

$("input:hidden")

获取结果

[ <input type="hidden" name="id" /> ]

匹配可见元素

html代码

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JQuery代码

$("tr:visible")

获取结果

[ <tr><td>Value 2</td></tr> ]

匹配包含给定属性的元素

html代码

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

JQuery代码

$("div[id]")

获取结果

[ <div id="test2"></div> ]

匹配属性为某个特定值的元素

html代码

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

JQuery代码(获取所有name属性是newsletter的input元素)

$("input[name='newsletter']")

获取结果

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" /> , <input type="checkbox" name="newsletter" value="Cold Fusion" /> ]

匹配属性不为某个特定值的元素

html代码

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

JQuery代码(获取所有name属性是newsletter的input元素)

$("input[name='newsletter']")

也等价于

$("input :not([name='newsletter'])")

获取结果

[ <input type="checkbox" name="accept" value="Evil Plans" /> ]

匹配属性以某些字符开始的元素

html代码

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

JQuery代码

$("input[name^='news']")

获取结果

[ <input name="newsletter" />, <input name="newsboy" /> ]

匹配属性以某些字符结尾的元素

html代码

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

JQuery代码

$("input[name$='letter']")

获取结果

[ <input name="newsletter" />, <input name="jobletter" /> ]

匹配属性包含某些字符的元素

html代码

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

JQuery代码

$("input[name*='man']")

获取结果

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

符合选择

html代码

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

JQuery代码(找到所有含有id属性，并且它的name属性是以man结尾的)

$("input[id][name$='man']")

获取结果

[ <input id="letterman" name="new-letterman" /> ]

表单

获取所有input标签

html代码

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

JQuery代码

$(":input")

获取结果

[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,
    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,
    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,
    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,
    <textarea></textarea>,
    <button>Button</button>,
 ]

匹配文本框

html代码

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

JQuery代码

$(":text")

获取结果

[ <input type="text" /> ]

同理还有

:password 获取密码框
:radio 获取单选按钮
:checkbox 获取复选框
:submit 获取提交按钮
:image 获取图像域
:reset 获取重置按钮
:button 获取按钮
:file 获取文件域

表单属性

匹配可用元素

html代码

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

JQuery代码

$("input:enabled")

获取结果

[ <input name="id" /> ]

匹配所有不可用元素

html代码

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

JQuery代码

$("input:disabled")

获取结果

[ <input name="email" disabled="disabled" /> ]

查找所有选中的复选框元素

html代码

<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

JQuery代码

$("input:checked")

获取结果

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

查找所有选中的选项元素

html代码

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

JQuery代码

$("select option:selected")

获取结果

[ <option value="2" selected="selected">Gardens</option> ]

筛选器

过滤

根据索引进行操作

索引可以用第一个算起也可以从最后一个算起

正向索引

正向索引的第一个元素索引为0

html代码

<p> This is just a test.</p>
<p> So is this</p>

JQuery代码

$("p").eq(1)

获取结果

[ <p> So is this</p> ]

反向索引

反向索引的第一个元素索引为-1

html代码

<p> This is just a test.</p>
<p> So is this</p>

JQuery代码

$("p").eq(-2)

获取结果

[ <p> This is just a test.</p> ]

获取第一个元素

html代码

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

JQuery代码

$("li").first()

获取结果

<li>list item 1</li>

获取最后一个元素

同理，方法为last()

检查元素中是否有这个类

html代码

<div class="protected">
</div>
<div>
</div>

JQuery代码

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

选择与指定表达式匹配的元素集合

html代码

<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>

JQuery代码（获取带有select类的元素）

$("p").filter("selected")

获取结果

[ <p class="selected">And Again</p> ]

也可以通过或关系进行匹配

JQuery代码

$("p").filter(".selected, :first")

获取结果

[ <p>Hello</p>, <p class="selected">And Again</p> ]

根据元素表达式判断是否为真

html代码

<form><input type="checkbox" /></form>

JQuery代码（判断input的父级元素是否为form）

$("input[type='checkbox']").parent().is("form")

获取结果

true

查找

获取子元素合集

html代码

<p>Hello</p>
<div>
    <span>Hello Again</span>
    <span>Hello Again</span>
</div>
<p>And Again</p>

JQuery代码

$("div").children()

获取结果

[ <span>Hello Again</span>, <span>Hello Again</span> ]

可以直接指定子元素的选择器

例如寻找子元素为selected类的元素

$("div").children(".selected")

全文档搜索

html代码

<p><span>Hello</span>, how are you?</p>

JQuery代码

$("p").find("span")

获取结果

[ <span>Hello</span> ]

获取匹配元素的下一个同辈的相邻元素

html代码

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

JQuery代码

$("p").next()

获取结果

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

获取匹配元素的所有同辈的相邻元素

html代码

<div></div><div></div><div></div><div></div>

JQuery代码(给第一个div之后的所有元素加个类)

$("div:first").nextAll()

获取结果

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

获取匹配元素的之后到某一元素之间的同辈元素

html代码

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

JQuery代码

$('#term-2').nextUntil('dt')

获取结果

[ <dd>definition 2-a</dd>, <dd>definition 2-b</dd>, <dd>definition 2-c</dd> ]

获取匹配元素之前的方式

同理方法prev，prevAll和prevUntil

获取先祖(position为relative或者absolute的标签)

html代码

<div style="width:70%;position:absolute;left:100px;top:100px">
  <div style="margin:50px;background-color:yellow">
     <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
   <div>
</div>
<button>点击这里</button>

JQuery代码

$("p").offsetParent()

获取结果

<div style="width:70%;position:absolute;left:100px;top:100px"></div>

获取元素的父元素

html代码

<div><p>Hello</p><p>Hello</p></div>

JQuery代码

$("p").parent()

获取结果

[ <div><p>Hello</p><p>Hello</p></div>]

可以直接指定父元素的选择器

例如寻找父元素为selected类的元素

$("p").parent(".selected")

获取元素的祖先元素

html代码

<html>
<body>
    <div>
        <p><span>Hello</span></p>
        <span>Hello Again</span>
    </div>
</body>
</html>

JQuery代码

$("span").parents()

获取结果

[ <p><span>Hello</span></p>, <div></div>, <body></body>, <html></html> ]

同理也有以下的操作

$("span").parents("p")

获取元素的祖先元素直到每个元素（不包含该元素）

JQuery代码

$("span").parentsUntil("")

获取元素的同辈元素

html代码

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

JQuery代码

$("div").siblings()

获取结果

[ <p>Hello</p>, <p>And Again</p> ]

同理也有以下的操作

$("div").siblings(".selected")

火眼征信大数据工程师闫大佬