网站首页 > 知识剖析正文

jQuery 选择器语法 jquery选择器语法

nixiaole 2024-11-10 12:33:15 知识剖析 26 ℃

在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(id选择器),而jQuery中的"#34;作为选择器,同样是某一类或某一元素,只不过

jQuery提供了更多更全面的选择方式,并且为用户处理了浏览器的兼容问题。

例如:在CSS样式中 h2 a{ /* */}

而在jQuery则可以使用$("h2 a")

实例:

<html>
<head>
<title>$选择器</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
window.onload = function(){
    var oElements = $("h2 a"); //选择匹配元素
    for(var i=0;i<oElements.length;i++)
    oElements[i].innerHTML = i.toString();
}
</script>
</head>
<body>
<h2><a href="#">正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
</body>
</html>

我们可以看到jQuery很轻松地轻松地实现了元素的选择;

ID选择器：查找 ID 为"myDiv"的元素。

$("#myDiv");

注意：如果文档中包含多个相同 ID 值的元素，那么 ID 选择器只返回第一个元素

标签选择器：查找所有 DIV 元素。

$("div");

类别选择器：查找类为"myclass"元素

$(".myClass");
<div className="myClass">jQuery</div>

类别选择器奇偶性选择(从0开始计数)

$("p:odd");
$("p:even");

选择第一个元素（从第1开始计数）

$("td:nth-child(1)");

$("li a")

后代选择器, 返回<li>标记的所有子元素<a>, 包括孙标记(不考虑层次);

$("li > a")

子选择器, 返回<li>标记的所有子元素<a>, 不包括孙标记;

$("p + ul") 紧邻

所有ul标记, 并且该标记前面紧跟着ul标记;

匹配p元素之后紧邻的ul元素(p元素与ul是同辈)

$("p ~ ul") ~ 键盘左上角的非紧邻

所有ul标记,并且该标记前面有一个ul标记;

匹配p元素之后的所有ul元素(p元素与ul是同辈)

$("p.myClass");

所有名称为p的标记,属性类别为myClass的标记;

$("p#myDiv");

所有名称为p的标记,ID选择符为myDiv的标记;

$(document.body)

$(document.body)和$("body")两种写法代表的是同一个对象

$("body")是一个选择器, jQuery 会从 DOM 顶端开始搜索, 直到找到标签为 body 的元素。

而 $(document.body) 中的 document.body 已经是一个 DOM 对象, jQuery 可以直接使用此元素。

所以它们的区别在于效率, $(document.body) 高于 $("body");

找到匹配任意一个类的元素。

$("div,span,p.myClass");

符号"," 选择多个元素

使用属性选择器

$("a[title]");

$("a[title='isaac']")

$("a[href^='pdf']") 以pdf开头

$("a[href$='pdf']") 以pdf结尾

$("a[href*='pdf']") 包含字符串pdf

$("a[title=isaac]")

$("a[href^=pdf]") 以pdf开头,单引号可以不要

$("a[href$=pdf]") 以pdf结尾,单引号可以不要

$("a[href*=pdf]") 包含字符串pdf,单引号可以不要

$("a[title][href$=pdf]") 并且选择器, 需要满足多个条件时使用

属性选择器可以是自定义属性, 如: <li dataIndex='1'></li>

$("a[href$='pdf']")

选择所有超链接,并且这些超链接的href属性是以pdf结尾的；

$("input[name^='news']")

查找所有 name 以 'news' 开始的 input 元素

实例:

jQuery代码:

$(function(){
$("a[title^='制作中']").addClass("myClass");
/* $("a[title^=制作中]").addClass("myClass"); 这里的单引号(包括汉字)可以不要,程序仍可正常运行; */
});

HTML代码:

<ul>
<li><a href="http://picasaweb.google.com/isaacshun">isaac photo</a>
<ul>
<li>10-6.html</li>
<li><a href="10-7.html">10-7.html</a></li>
<li><a href="10-8.html" title="圆角矩形">10-8.html</a></li>
<li><a href="10-9.html">10-9.html</a></li>
<li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
</ul>
</li>
</ul>

使用位置选择符

:first $("tr:first")

:last

必须要有父元素(HTML代码中)

:first-child $("ul li:first-child") $("li:first-child") 都可以

:last-child

:only-child 唯一的子元素

如：li:only-child匹配[ <li>独生子女</li> ]

<ol>
<li>独生子女</li>
</ol>

:first与:first-child区别:

':first' 只匹配一个元素(整个页面), 而:first-child选择符将为每个父元素匹配一个子元素

jQuery代码：

$(function(){
$("#btn").click(function(){
$("li:first-child").html("比阿奴方"); //匹配到[ <li>刘备</li>, <li>PHP</li> ]
$("li:first").html("程序员"); //匹配到[ <li>刘备</li>]
})
})

HTML代码：

<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
<ul>
<li>PHP</li>
<li>javascript</li>
<li>CSS</li>
</ul>
<button id="btn">确定</button>

从1开始计数(对于其父标记内)

:nth-child(n) $("ul li:nth-child(2)") $("li:nth-child(2)") 都可以

:nth-child(odd|even)

:nth-child(nX+y)

如:nth-child(5n+1) (1,6,11,16.......)

从0开始计数(对于整个页面)

:odd $("tr:odd")

:even

:eq(n) equal

:gt(n) 页面中第n个元素之后的所有元素(不包括第n个本身) less than(lt)

:lt(n) 页面中第n个元素之前的所有元素(不包括第n个本身) greate than(gt)

使用包含选择器

:has(selector) 括号内可以不用双引号 $("div:has(a)");

给所有包含 p 元素的 div 元素添加一个 text 类

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

HTML 代码:

<div><p>Hello</p></div>
<div>Hello again!</div>

[ <div class="test"><p>Hello</p></div> ]

使用过滤选择器可以单独使用

:animated 所有处于动画中的元素指的是执行了animate函数的元素

:button 所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>标记

:checkbox 所有的复选框, 等同于input[type=checkbox]

:contains(text) 选择所有包含了文本"text"的元素括号内(text)必须加单引号

:disabled 页面中被禁用了的元素

:enabled 页面中没有被禁用的元素

:file 上传文件的元素，等同于input[type=file]

:header 选中所有的标题元素，例如<h1><h2>...<h6>

:hidden 匹配所有不可见元素，或者type为hidden的元素,如<tr style="display:none"><td>Value 1</td></tr>也算是不可见元素

如果需要匹配<input type="hidden" value="1000" /> 则需要使用$("input:hidden")才能匹配

:image 图片提交按钮，等同于input[type=image]

:input 表单元素，包括<input>、<select>、<textarea>、<button>

:not(filter) 反向选择,参数filter必须是过滤选择器错误的写法:div:not(p:hidden) 正确写法格式：div p:not(:hidden)

:parent 选择所有拥有子元素(包括文本)的元素，空元素被排除

:password 密码文本框，等同于input[type=password]

:radio 单选按钮，等同于input[type=radio]

:reset 重置按钮，包括input[type=reset]和button[type=reset]

:checked 匹配所有选中的被选中元素(复选框、单选框等, 不包括select中的option)

:selected 下拉菜单中被选中的项

:submit 提交按钮, 包括input[type=submit]和button[type=submit]

:text 文本输入框, 等同于input[type=text]

:visible 页面中的所有可见元素

:animated 匹配所有正在执行动画效果的元素

HTML 代码:

<button id="run">Run</button><div></div>

jQuery 代码:

$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

:contains(text) 匹配包含给定文本的元素

查找所有包含 "John" 的 div 元素

HTML 代码:

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

$("div:contains('John')")

注意括号内必须加单引号

:hidden 页面中被隐藏了的元素

实例1:查找隐藏的 tr

HTML 代码:

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

jQuery 代码:

$("tr:hidden")

如何判断一个元素是否隐藏

$("#delayTrain").is(":hidden")

实例2:匹配type为hidden的元素

HTML 代码:

<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>

jQuery 代码:

$("input:hidden")

:visible 匹配所有的可见元素

查找所有可见的 tr 元素

HTML 代码:

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

jQuery 代码:

$("tr:visible")

结果:

[ <tr><td>Value 2</td></tr> ]

:disabled 匹配所有不可用元素

查找所有不可用的input元素

HTML 代码:

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

jQuery 代码:

$("input:disabled")

:enabled 页面中没有被禁用的元素

查找所有可用的input元素

HTML 代码:

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

jQuery 代码:

$("input:enabled")

结果:

[ <input name="id" /> ]

:empty 用法: $("td:empty")

返回值集合元素

说明: 匹配所有不包含子元素或者文本的空元素

注意:这里是":empty",可不是".empty"哦!

查找所有不包含子元素或者文本的空元素

HTML 代码:

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:empty")

结果:

[ <td></td>, <td></td> ]

:parent 匹配含有子元素或者文本的元素

查找所有含有子元素或者文本的 td 元素

HTML 代码:

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:parent")

结果:

[ <td>Value 1</td>, <td>Value 2</td> ]

迭代使用

$(":checkbox:checked:enabled")

表示<input type="checkbox">中所有被用户选中而且没有被禁用的

实现反向过滤

$(":input:not(:radio)")

如

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//迭代使用选择器
$(":input:not(:checkbox):not(:radio)").addClass("myClass");
});
</script>

$(":input:not(:checkbox):not(:radio)").addClass("myClass");

表示所有<input>、<select>、<textarea>、<button>中非checkbox和非radio的元素,

注意input 和 :input的区别?

$("input")只选择input标签。如：<input id="" type="" name="" />

而$(":input")是伪类选择, 不单单是input, 还包括textarea和select;

如: <input />, <textarea></textarea>, <select></select>

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

children([expr]) parents()将查找所有祖辈元素, 而children()只考虑子元素而不考虑所有后代元素。

查找DIV中的每个子元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

如何获取单选框的值

$("input[type='radio']:checked").val();

上一篇： jquery选择器 jquery选择器类名长
下一篇：基于 Spring Boot 的权限管理系统

网站首页 > 知识剖析 正文

jQuery 选择器语法 jquery选择器语法

猜你喜欢

网站首页 > 知识剖析正文