jQuery 基本选择器和筛选选择器

最新推荐文章于 2020-04-28 02:21:53 发布

昂首下楼梯

最新推荐文章于 2020-04-28 02:21:53 发布

阅读量194

点赞数

文章标签： jQuery 基础开发

本文链接：https://blog.csdn.net/qq_42812036/article/details/103127638

版权

jQuery选择器

筛选选择器：
常用选择器
层级选择器
基本
内容选择器
属性
子元素
表单
表单属性

基本选择器

常用选择器
1. ）#id
2. ）element ：元素选择器
3. ）* ：全元素选择器
4. ）sel1,sel2 ：组合选择器
层级
1. ）ancestor descent
2. ）parent > child
3. ) prev + next
4. ) prev ~siblings
基本
1. ）：first
2. ）：last
3. ）：not
4. ）：even
5. ）：odd
6. ）：eq
7. ）：gt
8. ）：lt
内容
1. ）：has
2. ）：parent
属性
1. )[name]
2. )[name=user1]
3. )[name!=user1]
4. )[name*=er]
5. [name=user1] [name*=er]
子元素
1. nth-child
2. first-child
3. last-child
4. only-child
表单
1. :input
2. :text
3. :password
4. :radio
5. :checkbox
6. :submit
7. :file
8. :hidden
9. :reset
10. :button
表单属性
1. :checked
2. :selected

只要在选择器里面出现this的时候，只能使用筛选选择器；this里面不能用+连接字符串。

筛选选择器：

过滤
eq();
first();
last();
not();
slice();
查找
children();
find();
next();
netAll();
paret();
prev();
sillings();
串联
add();
andSelf();

常用选择器

<body>
<h1 id='hid'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="hcls">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<p id="hcls">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<h1 class="hcls">ddddddddddddddddddddddddddddddd</h1>
<script type="text/javascript">
	// $('#hcls').css({'color':'#f00'});
	// $('h1,p').css({'color':'#f00'});
	// $('.hcls').css({'color':'#f00'});
</script>
</body>

层级选择器

类比

$('div1>h1') 子元素h1
$('div1+h1') 后面的一个h1
$('div1~h1') 后面所有的h1

基本

基本选择器都有冒号，说明它是用来修饰冒号前的东西

	$('h1:first').css({'color':'#off'})
	$('h1:last').css({'color':'#off'})
	$('h1.not(:first)').css({'color':'#off'})
	$('h1.gt(2)').css({'color':'#off'})//大于
	$('h1.lt(2)').css({'color':'#off'})//小于
	$('h1.eq(2)').css({'color':'#off'})//等于
	$('h1.odd()').css({'color':'#off'})//奇数,从0开始
	$('h1:even()').css({'color':'#off'})//偶数，从0开始

内容选择器

<script type="text/javascript">
	$('div:has(h1)').css({'color':'#00f'});
	$('div:not(empty)').css({'color':'#00f'});
	$('div:empty').css({'color':'#00f'});
	$('div:parent).css({'color':'#00f'});
</script>

属性

<script type="text/javascript">
	// $('h1[name]').css({'color':'#00f'});
	// $('h1[name$=123]').css({'color':'#00f'});//以123结尾的
	// $('h1[name][age]').css({'color':'#00f'});//含有两个属性的
	// $('h1[name^=linux]').css({'color':'#00f'});//以Linux的开头的
</script>

子元素

<script type="text/javascript">
	$('div h1: only-child').css({'color':'#00f'});//找仅有一个h1的div
	$('div h1: last-child').css({'color':'#00f'});
	$('div h1:nth-child(1)').css({'color':'#00f'});//为数不多的以1开始计数的，
	$('div h1:first-child').css({'color':'#00f'});
</script>

表单

实例：表单验证：
1.给表单设置blur事件的验证条件
2.当表单提交可以触发所有表单元素的blur事件
3.把所有表单元素进行综合判断看是否有问题

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			font-size: 微软雅黑;
		}
		.error{
			color: #f00;
			font-weight: bold;
			display: none;
		}
	</style>
	<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
</head>
<body>
	<form action="">
		<p>用户名</p>
		<input type="text" name="username" class='auto'>
		<span class="error">用户名长度至少6位！</span>
		<p>密码：</p>
		<input type="password" name="password" class='auto'>
		<span class="error">密码长度至少8位！</span>
		<p>确认密码：</p>
		<input type="password" name="repassword" class='auto'>
		<span class="error">两次密码不一致！</span>
		<p>邮箱：</p>
		<input type="text" name="email" class="auto">
		<span class="error">邮箱格式不对</span><br><br>
		<input type="submit" name="" value="ok">
	</form>
<script type="text/javascript">
	$('input[name=username]').blur(function(){
		val=this.value;

		if(val.length<6){
			$(this).next().show();
		}else{
			$(this).next().hide();
		}
	});
	$('input[name=password]').blur(function(){
		val=this.value;

		if(val.length<8){
			$(this).next().show();
		}else{
			$(this).next().hide();
		}
	});
	$('input[name=repassword]').blur(function(){
		val1=this.value;
		val2=$('input[name=password]').val();
		if(val1!=val2){
			$(this).next().show();
		}else{
			$(this).next().hide();
		}
	});
		$('input[name=email]').blur(function(){
		val=this.value;

		if(!val.match(/^139{8}$/)){
			$(this).next().show();
		}else{
			$(this).next().hide();
		}
	});

	$('form').submit(function(){
		$('input.auto').blur();

		return false;
	})
</script>
</body>
</html>

表单属性

</div>
<script type="text/javascript">
	$('#all').click(function(){
			$('.checks').attr({'check':true});
	});
	$('#notall').click(function(){
			$('.check').attr({'check':false});
	});
	$('#unall').click(function(){
			$('input.check').each(function(){
				this.checked=!this.checked;
			});
</script>