jq基础4——选择器

骑猪看日落 2022-10-01 12:59 237阅读 0赞

<table>  jquery selector  
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>描述</th> 
   <th>实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$("tagname")</td> 
   <td>元素</td> 
   <td>$("div")</td> 
  </tr> 
  <tr> 
   <td>$("#id")</td> 
   <td>id</td> 
   <td>$("#d")</td> 
  </tr> 
  <tr> 
   <td>$(".classname")</td> 
   <td>根据class选择元素</td> 
   <td>$(".d")</td> 
  </tr> 
  <tr> 
   <td>$("selector1 selector2")</td> 
   <td>层级选择</td> 
   <td>$("div#d1 span")</td> 
  </tr> 
  <tr> 
   <td>$("selector:first")</td> 
   <td>满足条件的第一个元素</td> 
   <td>$("div:first")</td> 
  </tr> 
  <tr> 
   <td>$("selector:last")</td> 
   <td>满足条件的最后一个元素</td> 
   <td>$("div:last")</td> 
  </tr> 
  <tr> 
   <td>$("selector:odd")</td> 
   <td>满足条件的奇数</td> 
   <td>$("div:odd")</td> 
  </tr> 
  <tr> 
   <td>$("selector:even")</td> 
   <td>满足条件的偶数</td> 
   <td>$("div:even")</td> 
  </tr> 
  <tr> 
   <td>$("selector:hidden")</td> 
   <td>满足条件的不可见元素</td> 
   <td>$("div:hidden")</td> 
  </tr> 
  <tr> 
   <td>$("selector:visible")</td> 
   <td>满足条件的可见元素（表示选中可见的div）</td> 
   <td>$("div:visible")</td> 
  </tr> 
  <tr> 
   <td>$("selector :visible")</td> 
   <td>有空格，表示选中元素下的可见元素</td> 
   <td>$("div :visible")</td> 
  </tr> 
  <tr> 
   <td>$(selector[attribute])</td> 
   <td>满足条件的有某属性的元素</td> 
   <td>$("div[id]")</td> 
  </tr> 
  <tr> 
   <td>$(selector[attribute=value])</td> 
   <td>满足选择条件的属性等于value的元素</td> 
   <td>$("div[id='d1']")</td> 
  </tr> 
  <tr> 
   <td>$(selector[attribute!=value])</td> 
   <td>满足选择条件的属性不等于value的元素</td> 
   <td>$("div[id!='d1']")</td> 
  </tr> 
  <tr> 
   <td>$(selector[attribute^=value])</td> 
   <td>满足选择条件的属性以value开头的元素</td> 
   <td>$("div[id^='d']")</td> 
  </tr> 
  <tr> 
   <td>$(selector[attribute$=value])</td> 
   <td>满足选择条件的属性以value结尾的元素</td> 
   <td>$("div[id$='1']")</td> 
  </tr> 
  <tr> 
   <td>$(selector[attribute*=value])</td> 
   <td>满足选择条件的属性包含value的元素</td> 
   <td>$(div[id*='d'])</td> 
  </tr> 
  <tr> 
   <td>:input</td> 
   <td>选择所有的输入元素，包括textarea,select,button</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:button</td> 
   <td>选择type=button的input和button元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:radio</td> 
   <td>选择单选框</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:checkbox</td> 
   <td>选择复选框</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:text</td> 
   <td>选择文本框，不会选择文本域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:submit</td> 
   <td>选择提交按钮</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:image</td> 
   <td>选择图片型提交按钮</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:reset</td> 
   <td>选择重置按钮</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>可用的输入元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>不可用的输入元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:selected</td> 
   <td>被选中的option元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>被选中的单选框和复选框</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>$(this)</td> 
   <td>当前元素</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>