jquery所有的选择器

最新推荐文章于 2024-02-20 19:09:27 发布

ITEMN

最新推荐文章于 2024-02-20 19:09:27 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/ITEMN/article/details/102655368

版权

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js"></script>
	</head>
	<body>
		<p id="1">id选择器</p>
		<input type="button" value="隐藏" onclick="f()">
		<input type="button" value="显示" onclick="f1()">
		<br />

		<div>元素选择器</div>
		<input type="button" value="隐藏" onclick="f2()">
		<input type="button" value="显示" onclick="f3()">
		<br />

		<p class="a1">类</p>
		<p class="a1">选择器</p>
		<input type="button" value="隐藏" onclick="f4()">
		<input type="button" value="显示" onclick="f5()">
		<br />

		<form>
			<label>祖先选择器:</label>
			<input name="name" />
			<fieldset>
				<label>Newsletter:</label>
				<input name="newsletter" />
			</fieldset>
			<input type="button" value="隐藏" onclick="f6()">
			<input type="button" value="显示" onclick="f7()">
		</form>

		<form>
			<label>父类选择器:</label>
			<input name="name" />
			<fieldset>
				<label>Newsletter:</label>
				<input name="newsletter" />

				<input type="button" value="隐藏" onclick="f8()">
				<input type="button" value="显示" onclick="f9()">
			</fieldset>
		</form>
		
		<form>
		  <label>下一个</label>
		  <input name="name" />
		  <fieldset>
		      <label>Newsletter:</label>
		      <input name="newsletter" />
		 </fieldset>
		 <input type="button" value="隐藏" onclick="f10()">
		 <input type="button" value="显示" onclick="f11()">
		</form>
		<form>
		  <label>同辈所有</label>
		  <input name="name" />
		  <fieldset>
		      <label>Newsletter:</label>
		      <input name="newsletter" />
		 </fieldset>
		 <input type="button" value="隐藏" onclick="f12()">
		 <input type="button" value="显示" onclick="f13()">
		</form>

		<script type="text/javascript">
			function f() {
				$("#1").hide();
			}

			function f1() {
				$("#1").show();
			}

			function f2() {
				$("div").hide();
			}

			function f3() {
				$("div").show();
			}

			function f4() {
				$(".a1").hide();
			}

			function f5() {
				$(".a1").show();
			}

			function f6() {
				$("form input").hide();
			}

			function f7() {
				$("form input").show();
			}

			function f8() {
				$("form > input").hide();
			}

			function f9() {
				$("form > input").show();
			}
			function f10() {
				$("label + input").hide();
			}
			function f11() {
				$("label + input").show();
			}
			function f12() {
				$("form ~ input").hide();
			}function f13() {
				$("form ~ input").show();
			}
			
		</script>
	</body>
</html>

:first：获取第一个元素
$(‘li:first’);

:not(selector)：去除所有与给定选择器匹配的元素
$(“input:not(:checked)”)；

:even：匹配所有索引值为偶数的元素，从 0 开始计数
$(“tr:even”)；

:odd：匹配所有索引值为奇数的元素，从 0 开始计数
$(“tr:odd”)；

:eq(index) ：匹配一个给定索引值的元素
$(“tr:eq(1)”)；

:gt(index)：匹配所有大于给定索引值的元素
$(“tr:gt(0)”)；

:lang(language)：选择指定语言的所有元素。
$(“p:lang(it)”)

:last() ：获取最后个元素
$(‘li:last’)；

:lt(index)：匹配所有小于给定索引值的元素
$(“tr:lt(2)”)

:header ：匹配如 h1, h2, h3之类的标题元素
$(":header").css(“background”, “#EEE”);

:animated：匹配所有正在执行动画效果的元素
$("#run").click(function(){
$(“div:not(:animated)”).animate({ left: “+=20” }, 1000);
});

:focus ：匹配当前获取焦点的元素。
$( “#content” ).delegate( “*”, “focus blur”, function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( “focused”, elem.is( “:focus” ) );
}, 0);
});

:root：选择该文档的根元素。
$(":root").css(“background-color”,“yellow”);

:contains(text)：匹配包含给定文本的元素
$(“div:contains(‘John’)”)

:empty：匹配所有不包含子元素或者文本的空元素
$(“td:empty”)

:has(selector)：匹配含有选择器所匹配的元素的元素
$(“div:has§”).addClass(“test”);

:parent：匹配含有子元素或者文本的元素
$(“td:parent”)；

:hidden ：匹配所有不可见元素，或者type为hidden的元素
$(“tr:hidden”)；

:visible ：匹配所有的可见元素
$(“tr:visible”)

[attribute] ：匹配包含给定属性的元素
$(“div[id]”)

[attribute=value] ：匹配给定的属性是某个特定值的元素
$(“input[name=‘newsletter’]”).attr(“checked”, true);

:first-child ：匹配所给选择器( :之前的选择器)的第一个子元素
$(“ul li:first-child”)

:last-child：匹配最后一个子元素
$(“ul li:last-child”)

:only-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配
$(“ul li:only-child”)

:input：匹配所有 input, textarea, select 和 button 元素
$(":input")

:text：匹配所有的单行文本框
$(":text")

:password：匹配所有密码框
$(":password")

:image：匹配所有图像域
$(":image")

:checked ：匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

:selected ：匹配所有选中的option元素
$(“select option:selected”)

ITEMN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery所有的选择器

<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> </head> <body>...
复制链接

扫一扫