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

刘已墨

于 2021-03-04 15:44:00 发布

阅读量183

点赞数

分类专栏： HTML 文章标签： jquery

本文链接：https://blog.csdn.net/kaihuayu/article/details/114370088

版权

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
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery简单选择器:属性过滤器

<!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".
复制链接

扫一扫

专栏目录