Home  >  Article  >  Web Front-end  >  常见的jQuery选择器汇总_jquery

常见的jQuery选择器汇总_jquery

WBOY
WBOYOriginal
2016-05-16 16:30:391112browse

基本元素选择器

复制代码 代码如下:

$("p")
$("p.ii")选取所有class=ii的 p元素
$("p#demo")选取id=demo的第一个p元素

分层选择器

复制代码 代码如下:

$("div input")div 下的所有input
$("div>input")

基本条件选择器

复制代码 代码如下:

$("p:first")
$("p:last")
$("tr:even")选择偶数行
$("tr:odd")奇数
$("input:not(:checked)")选择所有为本选中的元素
$("tr:eq(1)")索引值为1的表格
$("tr:gt(0)")大于0
$("tr:lt(0)")小于0
$(":header")选择所有标题元素
$(":animated")正在执行的动画

内容条件选择器

复制代码 代码如下:

$("div:constains('ddd')")选择包含ddd文本的层元素
$("td:empty")选择不包含文本或者子元素的表格单元
$("div:has(p)")选择包含段落元素的层元素
$("td:parent")选择包含子元素或者文本的表格单元

可见性条件选择器

复制代码 代码如下:

$("tr:hidden")  //选择所有隐藏的表格
$("tr:visible") 选择所有可见的表格

属性选择器

复制代码 代码如下:

$("div[id]")具有id属性的层
$("input[name='']") input属性name=''
$("input[name!='']")
$("input[name^='']")选择具有name属性并且值为‘'为起始内容的表单输入元素
$("input[name$='']")选择具有name属性并且值为‘'为结束内容的表单输入元素
$("input[name*='']")选择具有name属性并且值为‘'的表单输入元素
$("input[id][name$='']")选择具有id和name属性的值以‘'为结束内容的输入表单元素

子元素选择器

复制代码 代码如下:

$("ul li:nth-child(2)")选择第二个列表项
$("ul li:nth-child(even)")
$("ul li:nth-child(odd)")
$("ul li:nth-child(3n)")
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")选择列表出现且仅出现一个列表项

表单元素选择器

复制代码 代码如下:

$("input")选择所有 input textarea select button等元素
$(":text")文本行
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")

表单属性选择器

复制代码 代码如下:

$("input:enabled")  //选择所有可用
$("input:disabled")
$("input:checked")
$("select:option:selected")
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn