JQuery获取元素的方法总结
zmfi4928
8年前
<p><strong>一、说明</strong></p> <p> 获取元素的方法分为两种：jQuery选择器、jQuery遍历函数。</p> <p> 做个总结，巩固下知识。</p> <p><strong>二、获取本身</strong></p> <p> 1、只需要一种jQuery选择器</p> <table align="left" border="2" cellpadding="2" cellspacing="2"> <caption> </caption> <tbody> <tr> <td><strong>选择器</strong></td> <td><strong>实例</strong></td> <td><strong>说明</strong></td> </tr> <tr> <td>#Id</td> <td>$('#myId')</td> <td>ID选择器： 可以获取到ID为“myId”的元素，区分大小写</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p> 2、多种jQuery选择器组合</p> <p> 分为两部分：前半部分获取到的是一个元素集合，后半部分可以精确为一个元素，两者相结合，可以获取到想要的元素。</p> <p> 1）前半部分选择器</p> <table align="left" border="2"> <caption> </caption> <tbody> <tr> <td><strong>选择器</strong></td> <td><strong>实例</strong></td> <td><strong>说明</strong></td> </tr> <tr> <td>.class</td> <td>$('.myClass')</td> <td>类选择器：可以获取到class为‘myClass’的所有元素</td> </tr> <tr> <td>element</td> <td>$('p')</td> <td>获取所有的<p>元素</td> </tr> <tr> <td>:header</td> <td>$(':header')</td> <td>获取所有的标题元素：<h1> ~ <h6></td> </tr> <tr> <td>:animated</td> <td>$(':animated')</td> <td>获取所有的动画元素</td> </tr> <tr> <td>:contains(text)</td> <td>$('p:contains(Hello)')</td> <td>获取所有包含文本为Hello的<p>元素，中间的文本区分大小写</td> </tr> <tr> <td>:hidden</td> <td>$(':hidden')</td> <td>获取所有的隐藏元素：width和height为0、display:none、type=hidden、</td> </tr> <tr> <td>[attribute]</td> <td>$('[href]')</td> <td>属性选择器：获取所有含有属性为href的元素</td> </tr> <tr> <td>[attribute=value]</td> <td>$('[href=a.html]')</td> <td> <p>= 获取所有带有属性href，并且值为a.html的元素</p> <p>!= 获取所有带有属性href，并且值不等于为a.html的元素</p> <p>$= 获取所有带有属性href，并且值以a.html结尾的元素</p> <p>^= 获取所有带有属性href，并且值以a.html开头的元素</p> <p>~= 获取所有带有属性href，并且值包含单词”a.html“的元素</p> <p>*= 获取所有带有属性href，并且值包含文本”a.html“的元素</p> </td> </tr> <tr> <td>:input</td> <td>$(':input')</td> <td>获取所有input元素</td> </tr> <tr> <td>:radio</td> <td>$(':radio')</td> <td> <p>所有带有 type="radio" 的 input 元素</p> <p>相似的有：</p> <p>:text、:chexbox、:password、:submit、:reset、:button、:file</p> </td> </tr> <tr> <td>:enabled</td> <td>$(':enabled')</td> <td>所有启用的input元素。 :disabled 则相反</td> </tr> <tr> <td>:checked</td> <td>$(':checked')</td> <td>所有选中的input选择（单选框、复选框）</td> </tr> <tr> <td>:gt(index)</td> <td>$('p:gt(2)')</td> <td>index从0开始，获取index大于（不包含）2的所有<p>元素</td> </tr> <tr> <td>:lt(index)</td> <td>$('p:lt(2)')</td> <td>index从0开始，获取index小于（不包含）2的所有<p>元素</td> </tr> <tr> <td>:even</td> <td>$('tr:even')</td> <td>所有偶数<tr>元素</td> </tr> <tr> <td>:odd</td> <td>$('tr:odd')</td> <td>所有奇数<tr>元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>2）后半部分选择器：可以精确到某一个元素</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong>选择器</strong></td> <td><strong>实例</strong></td> <td><strong>说明</strong></td> </tr> <tr> <td>:first</td> <td>$('p:first')</td> <td>第一个<p>元素</td> </tr> <tr> <td>:last</td> <td>$('p:last')</td> <td>最后一个<p>元素</td> </tr> <tr> <td>:eq(index)</td> <td>$("p:eq(1)")</td> <td>第二个<p>元素，index从0开始</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <p> 3、jQuery选择器+遍历函数</p> <p> 也是分为两部分：前半部分用选择器获取到一个元素集合，后半部分用遍历函数精确为某个元素</p> <p> 1）前半部分同上</p> <p> 2）后半部分：遍历函数</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong> 方法</strong></td> <td><strong> 描述</strong></td> </tr> <tr> <td> eq()</td> <td> 返回带有被选元素的指定索引号的元素</td> </tr> <tr> <td> first()</td> <td> 返回被选元素的第一个元素</td> </tr> <tr> <td> last()</td> <td> 返回被选元素的最后一个元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <p><strong>三、获取同级元素</strong></p> <p> 顾名思义：获取<strong>选中元素</strong>的<strong>同级</strong>元素。首先需要定位到该元素（<em>上面已有总结，不再重复</em>），然后获取它的同级元素。</p> <p> 1）选择器</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong>选择器</strong></td> <td><strong>实例</strong></td> <td><strong>说明</strong></td> </tr> <tr> <td>element + next</td> <td>$('div + p')</td> <td>每个div相邻的下一个<p>元素</td> </tr> <tr> <td>element ~ siblings</td> <td>$('div ~ p')</td> <td>获取跟div同级的所有的<p>元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> 2）遍历函数</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong>方法</strong></td> <td><strong>描述</strong></td> </tr> <tr> <td>next()</td> <td>返回被选元素的后一个同级元素</td> </tr> <tr> <td>nextAll()</td> <td>返回被选元素之后的所有同级元素</td> </tr> <tr> <td>prev()</td> <td>返回被选元素的前一个同级元素</td> </tr> <tr> <td>prevAll()</td> <td>返回被选元素之前的所有同级元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p><strong>四、获取父级元素</strong></p> <p> 获取<strong>选中元素</strong>的<strong>父级</strong>元素</p> <p> 1）选择器</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong>选择器</strong></td> <td><strong>实例</strong></td> <td><strong>说明</strong></td> </tr> <tr> <td>:parent</td> <td>$('p:parent')</td> <td>获取所有p元素的父级元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> 2）遍历函数</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td>方法</td> <td>描述</td> </tr> <tr> <td>parent()</td> <td>获取被选元素的父级元素</td> </tr> <tr> <td>parents()</td> <td>获取被选元素的所有祖先元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p><strong>五、获取子级元素</strong></p> <p> 获取<strong>选中元素</strong>的<strong>子级</strong>元素</p> <p> 1）选择器</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong>选择器</strong></td> <td><strong>实例</strong></td> <td><strong>说明</strong></td> </tr> <tr> <td>parent > child</td> <td> $('div > p')</td> <td> 获取div直接子元素的所有<p>元素</td> </tr> <tr> <td>parent descendant</td> <td> $('div p')</td> <td> 获取div所有后代的<p>元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> 2）遍历函数</p> <table align="left" border="2" cellpadding="1" cellspacing="1"> <tbody> <tr> <td><strong>方法</strong></td> <td><strong>描述</strong></td> </tr> <tr> <td>children()</td> <td>返回被选元素的所有直接子元素</td> </tr> <tr> <td>contents()</td> <td>返回被选元素的所有直接子元素(包含文本和注释节点)</td> </tr> <tr> <td>find()</td> <td>返回被选元素的后代元素</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p>来自：http://www.cnblogs.com/wenJiaQi/p/6136050.html</p>