jquery框架：选择器

最新推荐文章于 2024-03-18 04:00:16 发布

hahahafree

最新推荐文章于 2024-03-18 04:00:16 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery Web 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/96969395

Web 同时被 2 个专栏收录

80 篇文章

订阅专栏

jQuery

17 篇文章

订阅专栏

1、选择器:

1.基础
#id
ele
.class
*

标签选择器

<body>
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
</body>
<script>
$('h1').css({'background':'#aff'})

</script>

id选择器

<body>
	<h1 id="hid">aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
</body>
<script>
$('#hid').css({'background':'#aff'})

</script>

类选择器

<body>
	<h1 class="hcls">aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1 class="hcls">aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
</body>
<script>
$('.hcls').css({'background':'#aff'})

</script>

*代表所有的标签

<body>
	<h1 class="hcls">aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1 class="hcls">aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>
	<p>1233</p>	
	<span>66666666666666</span>
</body>
<script>
$('*').css({'background':'#aff'})

</script>

2.层级
a b
a>b
a+b
a~b

a b:a的所有后代

<body>
	<div class="div1">
		<h2>1111111111111111</h2>
		<div >
			<h2>33333333333333333333</h2>
			<div >
				<h2>444444444444444444</h2>

			</div>
		</div>
	</div>
</body>
<script>
$('.div1 h2').css({'background':'#aff'})

</script>

a>b ：a的所有儿子

<body>
	<div class="div1">
		<h2>1111111111111111</h2>
		<div >
			<h2>33333333333333333333</h2>
			<div >
				<h2>444444444444444444</h2>

			</div>
		</div>
	</div>
</body>
<script>
$('.div1>h2').css({'background':'#aff'})

</script>

a+b ：a的第一个兄弟

<div class="div1">
		<h2>1111111111111111</h2>
		<div >
			<h2>33333333333333333333</h2>
			<div >
				<h2>444444444444444444</h2>

			</div>
		</div>
	</div>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('.div1+h2').css({'background':'#aff'})

</script>

a~b ：a后面的所有的兄弟

<body>
	<div class="div1">
		<h2>1111111111111111</h2>
		<div >
			<h2>33333333333333333333</h2>
			<div >
				<h2>444444444444444444</h2>

			</div>
		</div>
	</div>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('.div1~h2').css({'background':'#aff'})

</script>

3.基本
:first
:last
:not
:even
:odd
:eq
:gt
:lt

:first第一个标签

<body>
	
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2:first').css({'background':'#0ff'});

</script>

:last最后一个

<body>
	
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2:last').css({'background':'#0ff'});

</script>

:eq()第几个

<body>
	
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2:eq(4)').css({'background':'#0ff'});

</script>

:lt() 小于几的

<body>
	
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2:lt(4)').css({'background':'#0ff'});

</script>

:gt()大于几

<body>
	
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2:gt(3)').css({'background':'#0ff'});

</script>

:not() 除了哪个

<body>
	
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2:not(:first)').css({'background':'#0ff'});

</script>

:even偶数

<script>
$('h2:even').css({'background':'#0ff'});

</script>

:odd奇数

<script>
$('h2:odd').css({'background':'#0ff'});

</script>

4.属性
[attr]
[attr=val]
[attr!=val]
[attr^=val]
[attr$=val]
[attr*=val]

拥有title属性的h2

<body>
	
	<h2 title="linux">2222222222222222222222</h2>
	<h2 title="php">2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2[title]').css({'background':'#0ff'});

</script>

拥有title属性并且值为php

<body>
	
	<h2 title="linux">2222222222222222222222</h2>
	<h2 title="php">2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2[title=php]').css({'background':'#0ff'});

</script>

title属性中含有php的

<body>
	
	<h2 title="linuxphp">2222222222222222222222</h2>
	<h2 title="php">2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2[title*=php]').css({'background':'#0ff'});

</script>

title属性中以php开头的

<body>
	
	<h2 title="linuxphp">2222222222222222222222</h2>
	<h2 title="php">2222222222222222222222</h2>
	<h2 title="php123">2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2[title^=php]').css({'background':'#0ff'});

</script>

title属性中以php结尾的

<body>
	
	<h2 title="linuxphp">2222222222222222222222</h2>
	<h2 title="php">2222222222222222222222</h2>
	<h2 title="php123">2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2[title$=php]').css({'background':'#0ff'});

</script>

title属性中不等于php的

<body>
	
	<h2 title="linuxphp">2222222222222222222222</h2>
	<h2 title="php">2222222222222222222222</h2>
	<h2 title="php123">2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
	<h2>2222222222222222222222</h2>
</body>
<script>
$('h2[title!=php]').css({'background':'#0ff'});

</script>

5.子元素
:nth-child
:first-child
:last-child
:only-child

:first-child 每一个div中的第一个H1

<body>
	<div>
		<h1>1111111111</h1>
		<h1>1111111111</h1>
		<h1>1111111111</h1>
	</div>
	<hr>
	<div>
			<h1>1111111111</h1>
			<h1>1111111111</h1>
			<h1>1111111111</h1>
		</div>

</body>
<script>
$('div h1:first-child').css({'background':'#0ff'});

</script>

:last-child 每一个div中的最后一个H1

<script>
$('div h1:last-child').css({'background':'#0ff'});

</script>

:nth-child 每一个DIV中的第几个h1，
nth-child(1)表示第一个h1，序号以1开始，不从0开始

<script>
$('div h1:nth-child(1)').css({'background':'#0ff'});

</script>

:only-child：div中只有一个h1

<body>
	<div>
		<h1>1111111111</h1>
		<h1>1111111111</h1>
		<h1>1111111111</h1>
	</div>
	<hr>
	<div>
			<h1>1111111111</h1>
			
		</div>

</body>
<script>
$('div h1:only-child').css({'background':'#0ff'});

</script>

6.表单
:input
:text
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden

当表单数据被清空时

<body>
	<h1>用户登录</h1>
	<form action="">
		<p>用户名：</p>
		<p><input type="text"></p>
		<p>密码：</p>
		<p><input type="text"></p>
		<p>
			<input type="submit" value="提交">
			<input type="reset" value="取消">
		</p>

	</form>

</body>
<script>
$(':reset').click(function(){
	cd=confirm('您确认清空吗？');
	if(!cf){
		return false;

	}
});

</script>

判断用户名密码

<body>
	<h1>用户表:</h1>
	<form action="get.php">
		<p>用户名:</p>
		<p><input type="text"></p>
		<p>密码:</p>
		<p><input type="password"></p>
		<p>
			<input type="submit" value="提交">
			<input type="reset" value="取消">
		</p>
	</form>
</body>
<script>

$('form').submit(function(){
	username=$(':text').val();
	password=$(':password').val();
	if(username!='admin' || password!='123'){
		alert('您输入的用户名或密码有误!');
		return false;
	}else{
		alert('您输入的用户名和密码完全正确!');
	}
});
</script>

全选、全不选、反选

<body>
	<h1>选择城市:</h1>
	<form action="">
		<p>
			<label>
				<input type="checkbox" class='chk'> 北京
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" class='chk'> 上海
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" class='chk'> 太原
			</label>
		</p>
		<p>
			<input type="button" value="全选">
			<input type="button" value="全不选">
			<input type="button" value="反选">
		</p>
	</form>
</body>
<script>
$(':button:eq(0)').click(function(){
	$('.chk').each(function(){
		this.checked=true;
	});
});

$(':button:eq(1)').click(function(){
	$('.chk').each(function(){
		this.checked=false;
	});
});

$(':button:eq(2)').click(function(){
	$('.chk').each(function(){
		this.checked=!this.checked;
	});
});
</script>

7.表单属性
:checked
:selected

全选、全不选和反选

<body>
	<h1>选择城市:</h1>
	<form action="">
		<p>
			<label>
				<input type="checkbox" class='chk'> 北京
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" class='chk'> 上海
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" class='chk'> 太原
			</label>
		</p>
		<p>
			<input type="button" value="全选">
			<input type="button" value="全不选">
			<input type="button" value="反选">
		</p>
	</form>
</body>
<script>
$(':button:eq(0)').click(function(){
	$('.chk').prop({'checked':true});
});

$(':button:eq(1)').click(function(){
	$('.chk').prop({'checked':false});
});

$(':button:eq(2)').click(function(){
	$('.chk').each(function(){
		// $(this).prop({'checked':!$(this).prop('checked')});
		this.checked=!this.checked;
	});
});
</script>

selected:水果选择

	<style>
		*{
			font-family: 微软雅黑;
		}

		select{
			height:150px;
			width:100px;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<h2>请选择你喜欢的水果:</h2>	
	<form action="">
		<select name="" id="s1" size='2'>
			<option value="">苹果</option>
			<option value="">南瓜</option>
			<option value="">冬瓜</option>
			<option value="">面包</option>
			<option value="">北瓜</option>
		</select>	
		<input type="button" value=">>" id='btn'>
		<select name="" id="s2" size='2'></select>
	</form>
</body>
<script>
$(':button').click(function(){
	$('#s2').append($('#s1 option:selected').clone());
});
</script>