jQuery选择器

最新推荐文章于 2024-03-22 11:11:58 发布
最新推荐文章于 2024-03-22 11:11:58 发布
阅读量2.4k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/open-yang/p/10841508.html
版权

jQuery选择器

1. 基本选择器

通配选择器：$('')
HTML 代码:
    <divDIV</div  >    
    <spanSPAN</span>   
     <pP</p>  

jQuery 代码:      $("");

结果:  [ <div>DIV</div>, <spanSPAN</span>, <p>P</p>   ]
标签选择器:$(element)
HTML 代码:
     <divDIV1</div>  
     <divDIV2</div>  
     <spanSPAN</span>  

jQuery 代码:  $("div");

结果:  [ <divDIV1</div>, <divDIV2</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"</di>v ]
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 > ]
分组选择器：$(selector1,selector2...)
HTML 代码:
    <divdiv</div>
    <p class="myClass"><p> class="myClass"</p>
    <spanspan</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> ]

2. 层级选择器

后代选择器:$('div p')
 HTML 代码:
  
<form>
<labelName:</label>  
<input name="name" />  
<fieldset>
  <labelNewsletter:</label>  
  <input name="newsletter" />  
</fieldset>
</for>
<input name="none" />  


 jQuery 代码:  
    $("form input")
  结果:
[ <input name="name" />, <input> name="newsletter" /> ]
子代选择器：$('divp')
 HTML 代码:

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

 jQuery 代码:  
    $("form  input")
  结果:
[ <input name="name" / > ]
毗邻选择器：$('div+p')
 HTML 代码:

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

 jQuery 代码:  
    $("label + input")；
  结果:
[ <input name="name" />, <input name="newsletter" /> ]
后置兄弟选择器：$('div~p')
 HTML 代码:
<form>  
  <labelName:</label>  
  <input name="name" />  
  <fieldset>  
      <labelNewsletter:</label>  
      <input name="newsletter" />  
 </fieldset>  
</form>  
<input name="none" />  
 jQuery 代码:  
    $("form ~ input")；
  结果:
[ <input name="none" /> ]

3. 基本筛选器

第一个：$('p:first')
 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> ]
最后一个：$('p:last')
 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> ]
索引偶数:$('li:even')
 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><tdValue 2</td></tr >  ]
索引奇数$('li:odd')
 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> ]
索引大于:$('li:lt(index)')
 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>   ]
指定索引：:$('li:ep(index)')
 HTML 代码:

<table>  
  <tr<tdHeader 1</td</tr>  
  <tr<tdValue 1</td</tr>  
  <tr<tdValue 2</td</tr>  
</table>  

 jQuery 代码:  
    $("tr:eq(1)")；
  结果:
[ <tr<tdValue 1</td</tr >  ]
索引小于:$('li:gt(index)')
 HTML 代码:

    <table
      <tr<tdHeader 1</td</tr
      <tr<tdValue 1</td</tr
      <tr<tdValue 2</td</tr
    </table
    
 jQuery 代码:  
    $("tr:lt(2)")；
  结果:
[ <tr<tdHeader 1</td</tr, <tr<tdValue 1</td</tr>   ]
移除:$('div:not(span)')
 HTML 代码:

<input name="apple" />  
<input name="flower" checked="checked" /> jQuery 代码: $("input:not(:checked)")； 结果: [ <input name="apple" / > ]
后代具有某个选择器的父元素：$('div:has(p)')
 HTML 代码:

    <div<pHello</p</div>  
    <divHello again!</div>  

 jQuery 代码:  
    $("div:has(p)").addClass("test");
  结果:
[ <div class="test"<pHello</p</div>   ]

4. 属性选择器

属性选择器:$('[属性]')
 HTML 代码:

<div>  
  <pHello!</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 代码: $("input[name='newsletter']").attr("checked", true); 结果: [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" /> , <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" / > ]

5. 表单筛选器

表单标签：$(':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<optionOption</option</select> <textarea</textarea <buttonButton</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" /> , <selectoptionOption</option> </select> , <textarea> </textarea> , <buttonButton</button> , ]

文本：$(':text')
 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')
 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 代码: $(":password")； 结果: [ <input type="password" /> ]
单选：$(':radio')
 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 代码: $(":radio")； 结果: [ <input type="radio" / > ]
多选：$(':checkbox')
 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 代码: $(":checkbox")； 结果: [ <input type="checkbox" / > ]
文件：$(':file')
 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 代码: $(":file")；> 结果: [ <input type="file" / ]
隐藏：$(':hidden')
 HTML 代码:查找隐藏的 tr


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

 jQuery 代码:  
    $("tr:hidden")；
  结果:
[ <tr style="display:none"<tdValue 1</td</tr>   ]
  HTML 代码:匹配type为hidden的元素

<form
  <input type="text" name="email" /> <input type="hidden" name="id" /> </form> jQuery 代码: $("input:hidden")； 结果: [ <input type="hidden" name="id" /> ]
提交：$(':submit')
 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 代码: $(":submit")； 结果: [ <input type="submit" /> ]
重置:$(':reset')
 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 代码: $(":reset")； 结果: [ <input type="reset" / ]
按钮:$(':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 代码: $(":button")； 结果: [ <input type="button" /,<button</button> ]

6. 表单对象属性选择器

可用:$(':enabled')
 HTML 代码:

<form>  
  <input name="email" disabled="disabled" /> <input name="id" /> </form> jQuery 代码: $("input:enabled")； 结果: [ <input name="id" / ]
禁用:$(':disabled')
 HTML 代码:

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

 jQuery 代码:  
    $("input:disabled")；
  结果:
    [ <input name="email" disabled="disabled" / > ]
选定:$(':checked')
 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" / > ]
下拉选定:$(':selected')
 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> ]

7. 筛选器方法

祖先
父级:$(selector).parent(selector)
 HTML 代码:查找每个段落的父元素   
    <div<pHello</p<pHello</p</div>  

 jQuery 代码:  $("p").parent()

结果: [ <div<pHello</p<pHello</p</div>  ]

HTML 代码:查找段落的父元素中每个类名为selected的父元素
    <div<pHello</p</div<div class="selected"<p>HelloAgain</p</div> jQuery 代码: $("p").parent(".selected") 结果: [ <div class="selected"<pHello Again</p</div > ]
祖宗:$(selector).parents(selector)
arents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>  )。
      
返回所有 <span 元素的所有祖先：
    $(document).ready(function(){  $("span").parents(); }); 返回所有 <span> 元素的所有祖先，并且它是 <ul > 元素： $(document).ready(function(){ $("span").parents("ul");});
祖宗范围:$(selector).parentsUntil(selector)
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
      
返回介于 <span >  与 <div >  元素之间的所有祖先元素：
   $(document).ready(function(){ $("span").parentsUntil("div");});
后代
子代：$(selector).children(selector)
  children() 方法返回被选元素的所有直接子元素
      
返回每个 <div 元素的所有直接子元素：
  $(document).ready(function(){ $("div").children();}); 返回类名为 "1" 的所有 <p > 元素，并且它们是 <div > 的直接子元素： $(document).ready(function(){ $("div").children("p.1");});
后代：$(selector).find(selector)
 cfind() 方法返回被选元素的后代元素，一路向下直到最后一个后代

返回属于 <div >  后代的所有 <span>   元素：
  $(document).ready(function(){ $("div").find("span");});
同胞
同胞：$(selector).siblings(selector)
 siblings() 方法返回被选元素的所有同胞元素
  
 jQuery 代码:  

返回 <h2 的所有同胞元素：
$(document).ready(function(){ $("h2").siblings(); }); 返回属于 <h2 的同胞元素的所有 <p 元素： $(document).ready(function(){ $("h2").siblings("p"); });
前边
前一个:$(selector).prev(selector)
前所有：$(selector).prevAll(selector)
前范围：$(selector).prevUntil(selector)
后边
后一个:$(selector).next(selector)
next() 方法返回被选元素的下一个同胞元素。
      
返回 <h2 的下一个同胞元素：
        $(document).ready(function(){ $("h2").next(); });
后所有：$(selector).nextAll(selector)
  nextAll() 方法返回被选元素的所有跟随的同胞元素
      
 返回 <h2 的所有跟随的同胞元素：
       $(document).ready(function(){ $("h2").nextAll();});
后范围：$(selector).nextUntil(selector)
  nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素      

 返回介于 <h2 >  与 <h6 >  元素之间的所有同胞元素：
   $(document).ready(function(){ $("h2").nextUntil("h6");});
过滤
第一个：$(selector).first(selector)
 first() 方法返回被选元素的首个元素
      
选取首个 <div 元素内部的第一个 <p 元素：
   $(document).ready(function(){ $("div p").first();});
最后一个：$(selector).last(selector)
last() 方法返回被选元素的最后一个元素      

选择最后一个 <div >  元素中的最后一个 <p >  元素：
      $(document).ready(function(){ $("div p").last();});
指定索引：$(selector).eq(index)
 eq() 方法返回被选元素中带有指定索引号的元素
      
 选取第二个 <p 元素（索引号 1）：
  (document).ready(function(){ $("p").eq(1);});
移除：$(selector).not(selector)
not() 方法返回不匹配标准的所有元素
      
返回不带有类名 "url" 的所有 <p >  元素：
  $(document).ready(function(){ $("p").not(".url");});
特定有某个值后代元素：$(selector).has(selector)
筛选：$(selector).filter(selector)
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
     
返回带有类名 "url" 的所有 <p >  元素：
  $(document).ready(function(){ $("p").filter(".url");});

转载于:https://www.cnblogs.com/open-yang/p/10841508.html

diaolouan9546
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web综合题（1）
KuoChingYang的博客
03-23 6527
一、 单选题 1.用来在网页中显示图形的标记为（ ） A：<image src=“文件名” …> B：<img src=“文件名” … > C：<center src=“文件名” … > D：<picture src=“文件名” … > 参考答案：B 2.要使单选框默认状态为被选中，下列正确的是 A： <input type="radio"...
HTML----表单中隐藏域小结
weixin_34005042的博客
07-23 1869
基本语法： <input type="hidden" name="field＿name" value="value"> 作用：1 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。 2 有些时候我们要给用户一信息，...
html（隐藏域）＜input type=“hidden“ id=““/＞用法
rngigskt的博客
07-20 5038
解决一个前端页面查询的方法： 问题介绍： （1）中描述不添加查询条件，那就查询所有，之后点击查询。 （2）查询结果数据库中一共有10条记录，每页分两条共五页。 （1）这个在名称出输入 2。 （2）但是不点击查询。 （3）点击下一页或者第2...3页等等。 （4）看查询结果发生改变，它自己会查询名称带“2”的信息。 总结：其实我们没有点击查询，只是在查询栏的名称处输入了“2”，但是当我们想查看下一页的时候它会自动查询名称带“2”的信息。 那么怎么解决这类问题呢？ 很简单：就是加.
处理 input type=‘hidden‘ 的事件触发
最新发布
u013948083的专栏
03-22 771
html 前端 input type='hidden' 元素绑定 change 触发的完整示例。
隐藏input的三种方法和区别
热门推荐
那么多的人，你要去哪里
06-19 8万+
一、&lt;input type="hidden" /&gt;二、&lt;input type="text" style="display:none" /&gt;以上两种方法可以实现不留痕迹的隐藏。三、&lt;input type="text" style="visibility: hidden;" /&gt;第三种方法可以实现占位隐藏（会留下空白而不显示）..
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房，得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。 jquery选择器大方向可以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
常用jQuery选择器汇总
12-08
学习【js DOM 编程艺术】，最后面有许多jQuery的选择器，每个都动手敲了一遍。 jQuery 提供了高级选择器的方法。 j s获取元素的三个基本方法分别是通过标签名，类名和id，即(getElementsByTagName, ...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
详解jQuery选择器
10-20
本文主要对jQuery选择器进行一一举例介绍，有助于学习、理解和记忆。具有很好的参考价值，下面就跟着小编一起来看下吧
jQuery 选择器详解
10-24
主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下
html表单元素input type=”hidden”的作用
weixin_43862596的博客
05-17 1594
隐藏域在页面中对于用户是不可见的，在表单插入隐藏域的目的在于收集和发送信息，以利于被处理表单的程序所使用 注：隐藏只是在网页页面上不显示输入框，但是虽然隐藏了，还是具有form传值功能。一般用来传值，而不必让用户看到。 基本语法： <input type="hidden" name="field_name" value="value" /> 作用 1、隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者点击发送按钮发送表单的时候，隐
input type=“hidden“”类型的作用详解
明天的你会感谢今天的自己
08-20 2万+
我们先来看一下代码 &lt;td align="center"&gt; ${pgProjectInfoList.projectName} &lt;input hidden value="${pgProjectInfoList.projectName}" name="projectName"/&gt; &lt;input hidden value="${pgProjectInfo.
jQuery学习笔记总结
早安，朝气蓬勃的你
05-13 1609
jQuery 1、jQuery下载：https://www.jq22.com/jquery-info122#google_vignette 基本使用：下载解压jar包（备用），IDEA或eclipse构建一个工程，把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnAZpDhU-1652445213644)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220
jquery选择器
06-01
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值