jquery中有哪几种类型的选择器

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素\x0d\$("div") 选择所有的div标签元素，返回div元素数组\x0d\$("myClass") 选择使用myClass类的css的所有元素\x0d\$("") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,myclass")\x0d\ \x0d\层叠选择器：\x0d\$("form input") 选择所有的form元素中的input元素\x0d\$("#main > ") 选择id值为main的所有的子元素\x0d\$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素\x0d\$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签\x0d\ \x0d\基本过滤选择器：\x0d\$("tr:first") 选择所有tr元素的第一个\x0d\$("tr:last") 选择所有tr元素的最后一个\x0d\$("input:not(:checked) + span") \x0d\ \x0d\过滤掉：checked的选择器的所有的input元素\x0d\ \x0d\$("tr:even") 选择所有的tr元素的第0，2，4 个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）\x0d\ \x0d\$("tr:odd") 选择所有的tr元素的第1，3，5 个元素\x0d\$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素\x0d\$("td:gt(4)") 选择td元素中序号大于4的所有td元素\x0d\$("td:ll(4)") 选择td元素中序号小于4的所有的td元素\x0d\$(":header")\x0d\$("div:animated")\x0d\内容过滤选择器：\x0d\ \x0d\$("div:contains('John')") 选择所有div中含有John文本的元素\x0d\$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组\x0d\$("div:has(p)") 选择所有含有p标签的div元素\x0d\$("td:parent") 选择所有的以td为父节点的元素数组\x0d\可视化过滤选择器：\x0d\ \x0d\$("div:hidden") 选择所有的被hidden的div元素\x0d\$("div:visible") 选择所有的可视化的div元素\x0d\属性过滤选择器：\x0d\ \x0d\$("div[id]") 选择所有含有id属性的div元素\x0d\$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素\x0d\ \x0d\$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素\x0d\ \x0d\$("input[name^='news']") 选择所有的name属性以'news'开头的input元素\x0d\$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素\x0d\$("input[name='man']") 选择所有的name属性包含'news'的input元素\x0d\ \x0d\$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素\x0d\ \x0d\子元素过滤选择器：\x0d\ \x0d\$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")\x0d\ \x0d\$("div span:first-child") 返回所有的div元素的第一个子节点的数组\x0d\$("div span:last-child") 返回所有的div元素的最后一个节点的数组\x0d\$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组\x0d\ \x0d\表单元素选择器：\x0d\ \x0d\$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button\x0d\ \x0d\$(":text") 选择所有的text input元素\x0d\$(":password") 选择所有的password input元素\x0d\$(":radio") 选择所有的radio input元素\x0d\$(":checkbox") 选择所有的checkbox input元素\x0d\$(":submit") 选择所有的submit input元素\x0d\$(":image") 选择所有的image input元素\x0d\$(":reset") 选择所有的reset input元素\x0d\$(":button") 选择所有的button input元素\x0d\$(":file") 选择所有的file input元素\x0d\$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域\x0d\ \x0d\表单元素过滤选择器：\x0d\ \x0d\$(":enabled") 选择所有的可 *** 作的表单元素\x0d\$(":disabled") 选择所有的不可 *** 作的表单元素\x0d\$(":checked") 选择所有的被checked的表单元素\x0d\$("select option:selected") 选择所有的select 的子元素中被selected的元素\x0d\\x0d\选取一个 name 为”S_03_22″的input text框的上一个td的text值\x0d\$(”input[@ name =S_03_22]“)parent()prev()text()\x0d\ \x0d\名字以”S_”开始，并且不是以”_R”结尾的\x0d\$(”input[@ name ^='S_']“)not(”[@ name $='_R']“)\x0d\ \x0d\一个名为 radio_01的radio所选的值\x0d\$(”input[@ name =radio_01][@checked]“)val();\x0d\\x0d\$("A B") 查找A元素下面的所有子节点，包括非直接子节点\x0d\$("A>B") 查找A元素下面的直接子节点\x0d\$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点\x0d\$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

jQuery手册中这样写道：

$(expression, [context])

expression String 用来查找的字符串

context (可选) Element, jQuery 作为待查找的 DOM 元素集、文档或 jQuery 对象。

那么，你可以这样获取：

$('img:first-child', this)attr('src');

--------------------------------------

或者用原生js：

var a = documentgetElementById('my')getElementsByTagName('a');

var src = [];

for(var i=0;i<slength;i++){

srcpush(a[i]getElementsByTagName('img')[0]src);

}

给定一个HTML文档，如何使用jQuery按name属性选择元素？下面本篇文章就来给大家介绍一下使用jQuery按name属性选择元素的方法，希望对大家有所帮助。

在jQuery中，可以使用2个方法通过name属性选择元素；下面就来通过示例来介绍一下。

方法1：使用name属性选择器

name属性选择器可用于按name属性选择元素。此选择器选择值与指定值完全相等的元素。

语法：

示例：

输出：

方法2：使用javascript按名称获取元素并将其传递给jQuery

可以使用javascript getElementsByName()方法选择所需的元素，并将其传递给jQuery函数，以进一步用作jQuery对象。

语法：

示例：

输出：

更多 web开发 相关知识，请查阅 HTML中文网 ！！

jQuery 选择器简介

jQuery 选择器允许对 HTML 元素组或单个元素进行 *** 作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1 基本选择器

$("#test")                选择id值为test的元素，id值是唯一的所以返回单个元素。

$("div")                  选择所有的div标签元素，返回div元素数组

$("myclass")             选择使用myclass类的css的所有元素

$("")                    选取所有元素。

$("#test,div,myclass")      选取多个元素。

2层次选择器

$("div span")   选取<div>里的所有<span>元素

$("div >span")     选取<div>元素下元素名是<span>的子元素

$("#one +div")     选取id为one的元素的下一个<div>同辈元素    等同于$("#one")next("div")

$("#one~div")      选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one")nextAll("div")

$("#one")siblings("div")    获取id为one的元素的所有<div>同辈元素（不管前后）

$("#one")prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：

$("#one")siblings("div")>$("#one~div")>$("#one +div")

或是

$("#one")siblings("div")>$("#one")nextAll("div")>$("#one")next("div")

3基本过滤选择器

$("div:first")               选取所有<div>元素中第1个<div>元素

$("div:last")                   选取所有<div>元素中最后一个<div>元素

$("input:not(myClass)")        选取class不是myClass的<input>元素

$("input:even")                 选取索引是偶数的<input>元素(索引从0开始)

$("input:odd")                  选取索引是基数的<input>元素(索引从0开始)

$("input:eq(2)")                选取索引等于2的<input>元素

$("input:gt(4)")                选取索引大于4的<input>元素

$("input:lt(4)")                选取索引小于4的<input>元素

$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等

$("div:animated")               选取正在执行动画的<div>元素

$(":focus")                     选取当前获取焦点的元素

4内容过滤选择器

$("div:contains('Name')")       选取所有<div>中含有'Name'文本的元素

$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)")                 选取所有含有<p>元素的<div>元素

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5可见性过滤选择器

$("div:hidden")                 选取所有不可见的<div>元素

$("div:visible")                选取所有可见的<div>元素

6属性过滤选择器

$("div[id]")              选取所有拥有属性id的元素

$("input[name='test']")     选取所有的name属性等于'test'的<input>元素

$("input[name!='test']")  选取所有的name属性不等于'test'的<input>元素

$("input[name^='news']")        选取所有的name属性以'news'开头的<input>元素

$("input[name$='news']")        选取所有的name属性以'news'结尾的<input>元素

$("input[name='news']")        选取所有的name属性包含'news'的<input>元素

$("div[title|='en']")           选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素

$("div[title~='en']")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$='test']")     选取拥有属性id,并且属性title以'test'结束的<div>元素

7子元素过滤选择器

$("div one:nth-child(2)")       选取class为'one'的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素

$("div span:last-child")         选取每个<div>中的最后一个<span>元素

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8表单对象属性过滤选择器

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素

$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素

$("input :checked")              选取所有被选中的<input>元素

$("select option:selected")      选取所有的select 的子元素中被选中的元素

9表单选择器

$(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素

$(":text")                    选取所有的单行文本框

$(":password")                   选取所有的密码框

$(":radio")                      选取所有单的选框

$(":checkbox")                   选取所有的多选框

$(":submit")                     选取所有的提交按钮

$(":image")                      选取所有的图像按钮

$(":reset")                      选取所有的重置按钮

$(":button")                     选取所有的按钮

$(":file")                       选取所有的上传域

$(":hidden")                     选取所有不可见元素

1、首先我们打开jquery新建一个html文件。

2、然后我们创建一个form表单。

3、预览效果如图我们可以看到此时还未选取某个元素下面的所有的input元素。

4、然后我们引入jqueryjs。

5、jQuery:file选择器选取类型为 file 的input元素，设置其背景颜色。

6、预览效果如图此时我们可以选取某个元素下面的所有的input元素。

以上就是关于jquery中有哪几种类型的选择器全部的内容，包括:jquery中有哪几种类型的选择器、Jquery先获取自身内部的元素属性值，该如何获取、使用jQuery按name属性选择元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！