jquery简单选择器:属性过滤器

HTML 专栏收录该内容
2 篇文章 0 订阅
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
  //1.属性过滤
    $("[style]").css("background-color","#a175dd");  //找带有 sytle 属性的 修改背景
   //2.完全匹配属性值
    $("[title='网站名称'").css("background-color","#bce738");
    //3.指定属性值的起始字符串:'中'
    $("[title^='中']").css("background-color","#eee636");
    //4.指定属性值结束的字符串:网
    $("[title$='网'").css("background-color","#d60808");
    //5.属性中不等于某个字符的 完全匹配
   // $("[title!='啊']").css("background-color","#c80808");
    //6.模糊匹配 所有包含‘中’字的
    $("[title*='中']").css("background-color","#ffffff");
    //7匹配单词,字符串前或后有空格分隔的认为是单词
    $("[title~='pet']").css("background-color","#5fd69d")
    //8多个属性同时查询
    $("[title][class]").css("background-color","#ddd69d")

	})
	</script>

</head>
<body>
	<div id="box">
		<h class="title"></h>
		<ul class="list">
			<li title="中文" class="child1">我是第1个</li>
			<li title="网站名称" class="child2">我是第2个</li>
			<li title="大中文网" class="child3">我是第3个</li>
			<li class="child4">我是第4个</li>
			<li title="pet dog">我是第6个</li>
			<li  style="height:20px" class="child5">我是第5个</li>
		</ul>
	</div>
</body>
</html>

 表单过滤器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
  //1.选择所有文本域,加入边框
  $("input:text").css("border","1px solid blue");
  //2.修改密码输入框的说明文字
  $("input:password").attr("placeholder","密码最少8位");
  //3.选择所有复选框,加一个阴影
  $("input:checkbox").css("box-shadow","2px 2px 2px red");
  //4.给默认的复选框 设置一个 蓝色阴影
  $("input:checked").css("box-shadow","2px 2px 2px blue");
  //5.按钮背景修改
  $(":button").css("background-color","red");
  //6修改禁用元素的背景
  $(":disabled").css("background-color","#ccc")


  

	})
	</script>

</head>
<body>
	<div id="box">
		<h1 class="title">表单过滤器</h1>
		<from action="">
			用户名:<input type="text" name="" id="" placeholder="输入用户名"><br>
			密  码:<input type="password" placeholder="6到8位"></br>
			内容选择<input type="checkbox" name="boy" value="读书">
					<input type="checkbox" name="boy"  checked  value="游戏">
					<input type="checkbox" name="boy" value="编程">
					<input type="checkbox" name="boy" value="旅游">
				<button type="submit">提交</button>	
				<input type="text" disabled placeholder="禁用">
		</from>

	
	</div>
</body>
</html>

位置过滤

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
	//1相等eq(n)
	$("li:eq(0)").css("background-color","#ff5");
	//2大于gt(7),最后两个8,9
	$("li:gt(7)").css("background-color","#f55");
	//3小于lt(2),前两个 0 1
	$("li:lt(2)").css("background-color","#f75");
	//选择第一额first
	$("li:first").css("background-color","#7e48cc");
	//5选择最后一个last
	$("li:last").css("background-color","#2eab55");
	//6选择所有偶数行
	$("li:even").css("background-color","#3eebe3");
	//7选择所有奇数行
	$("li:odd").css("background-color","#e89a1e");
	//8通用过滤器:nth-child()匹配父节点的第n个元素,可以用first,odd等
	//8-1 全选:参数n n取值(1-max)注意N从1开始
	$("li:nth-child(3)").css("background-color","#ffffff");
    //选择偶数
    $("li:nth-child(2n)").css("background-color","#ffffff");
    $("li:nth-child(even)").css("background-color","#000000");
    //选择奇数
    $("li:nth-child(2n+1)").css("background-color","#feeff");
    $("li:nth-child(odd)").css("background-color","#000fff");

	})
	</script>

</head>
<body>
	<div id="box">
		<h1 class="title">位置过滤器</h1>
	
         <ul>
         	<li>位置过滤器1</li>
         	<li>位置过滤器2</li>
         	<li>位置过滤器3</li>
         	<li>位置过滤器4</li>
         	<li>位置过滤器5</li>
         	<li>位置过滤器6</li>
         	<li>位置过滤器7</li>
         	<li>位置过滤器8</li>
         	<li>位置过滤器9</li>
         	<li>位置过滤器10</li>
         </ul>
	
	</div>
</body>
</html>

 

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值