jQuery

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

基本选择器

选择器

实例

选取

 元素选择器

$("p") 

在页面中选取所有 <p> 元素

#id 选择器

$("#test")

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器

.class 选择器

$(".test")

通过指定的 class 查找元素

层次选择器

选择器

实例

选取

parent > child

$("div > p")

<div> 元素的直接子元素的所有 <p> 元素，只选择子元素的

parent descendant

$("div p")

<div> 元素的后代的所有 <p> 元素，包含子元素、孙子元素

element + next

$("div + p")

每个 <div> 元素相邻的同级的下一个 <p> 元素

element ~ siblings

$("div ~ p")

<div> 元素同级的所有 <p> 元素

 

$("#two").siblings("div")

选择 id 为 two 的元素所有 div 兄弟元素

 

$("#one").nextAll("span:first")

选择 id 为 one 的下一个 span 元素

 

$("#two").prevAll("div")

选择 id 为 two 的元素前边的所有的 div 兄弟元素

基本过滤选择器

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

:odd

$("tr:odd")

所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素（index 值从 0 开始）

:gt(no)

$("ul li:gt(3)")

列举 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列举 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的输入元素

:header

$(":header")

所有标题元素 <h1>, <h2> ...

:animated

$(":animated")

所有动画元素

 内容过滤选择器

:contains(text)

$(":contains("Hello")")

所有包含文本 "Hello" 的元素

:has(selector)

$("div:has(p)")

所有包含有 <p> 元素在其内的 <div> 元素

:empty

$(":empty")

所有空元素

:parent

$(":parent")

匹配所有含有子元素或者文本的父元素。

可见性过滤选择器

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

:visible

$("table:visible")

所有可见的表格

 属性过滤选择器

[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href="default.htm"]")

所有带有 href 属性且值等于 "default.htm" 的元素

[attribute!=value]

$("[href!="default.htm"]")

所有带有 href 属性且值不等于 "default.htm" 的元素

[attribute$=value]

$("[href$=".jpg"]")

所有带有 href 属性且值以 ".jpg" 结尾的元素

[attribute|=value]

$("[title|="Tomorrow"]")

所有带有 title 属性且值等于 "Tomorrow" 或者以 "Tomorrow" 后跟连接符作为开头的字符串

[attribute^=value]

$("[title^="Tom"]")

所有带有 title 属性且值以 "Tom" 开头的元素

[attribute~=value]

$("[title~="hello"]")

所有带有 title 属性且值包含单词 "hello" 的元素

[attribute*=value]

$("[title*="hello"]")

所有带有 title 属性且值包含字符串 "hello" 的元素

[name=value][name2=value2]

$( "input[id][name$="man"]" )

带有 id 属性，并且 name 属性以 man 结尾的输入框

 子元素过滤选择器

:first-child

$("p:first-child")

属于其父元素的第一个子元素的所有 <p> 元素

:first-of-type

$("p:first-of-type")

属于其父元素的第一个 <p> 元素的所有 <p> 元素

:last-child

$("p:last-child")

属于其父元素的最后一个子元素的所有 <p> 元素

:last-of-type

$("p:last-of-type")

属于其父元素的最后一个 <p> 元素的所有 <p> 元素

:nth-child(n)

$("p:nth-child(2)")

属于其父元素的第二个子元素的所有 <p> 元素

:nth-last-child(n)

$("p:nth-last-child(2)")

属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数

:nth-of-type(n)

$("p:nth-of-type(2)")

属于其父元素的第二个 <p> 元素的所有 <p> 元素

:nth-last-of-type(n)

$("p:nth-last-of-type(2)")

属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数

:only-child

$("p:only-child")

属于其父元素的唯一子元素的所有 <p> 元素

:only-of-type

$("p:only-of-type")

属于其父元素的特定类型的唯一子元素的所有 <p> 元素

 表单元素过滤选择器

:enabled

$(":enabled")

所有启用的元素

:disabled

$(":disabled")

所有禁用的元素

:selected

$(":selected")

所有选定的下拉列表元素

:checked

$(":checked")

所有选中的复选框选项 

<html>
<head>
<script type="text/javascript">
	$(function(){
		$("#btn5").click(function(){
			//实际被选择的不是 select, 而是 select 的 option 子节点
			//所以要加一个 空格. 
			//var len = $("select :selected").length
			//alert(len);
			//因为 $("select :selected") 选择的是一个数组
			//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. 
			//alert($("select :selected").val());
			//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
			//得到的 DOM 对象, 而不是一个 jQuery 对象
			$("select :selected").each(function(){
				alert(this.value);
			});
		});
		$("#btn4").click(function(){
			$(":checkbox[name="newsletter"]:checked").each(function(){
				alert(this.value);
			});
		});
	})
</script>
</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		<button id="btn4">获取多选框选中的内容.</button><br /><br />
        <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		<form id="form1" action="#">		
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			<br><br>
			下拉列表1: <br>
			<select name="test" multiple="multiple" style="height: 100px">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>

 

以上是 jQuery 的全部内容， 来源链接： utcz.com/z/511989.html

回到顶部