JQuery的5种过滤器实例

JQuery的5种过滤器实例:

juqery的5种过滤器，包括基础过滤器，内容过滤器，表单类型过滤器，可见性过滤器和子元素过滤器。

代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<!-- 基础过滤器 -->
<h1>基础过滤器:</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="ul2">
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
<br>
<br>
<br>
<!-- 内容过滤器 -->
<h1>内容过滤器:</h1>
<h1>11</h1>
<h1>22</h1>
<h1></h1>
<h1><span>11</span></h1>
<br>
<p>a</p>
<p><br></p>
<p></p>
<br>
<br>
<br>
<br>
<!-- 表单类型过滤器 -->
<h1>表单类型过滤器:</h1>

<form action="">
<input type="text" name="">
<input type="password" name="">
<input type="email" name="">
<input type="radio" name="">

</form>

<br>
<br>
<br>
<br>


<h1>可见性过滤器</h1>

<input type="button" name="xianshi" value="显示隐藏内容" >
<div>我是可见内容</div>
<div id="kejian" style="display: none">我是不可见内容</div>

<!-- 子元素过滤器 -->
<br>
<br>
<br>
<br>

<h1>子元素过滤器:</h1>

<div class="zi">
<p>a</p>
<p>b</p>
</div>

<div class="zi">
<p>c</p>
<p>d</p>
</div>

<ul id="zi2">
<li><a href="">aa</a></li>
<li><span></span><a href="">bb</a></li>
</ul>

</body>
<script type="text/javascript">
//基础过滤器
//找第一个li，用first

$('li:first').css('background' , 'red');

//找最后一个li，用last
$('li:last').css('background' , 'pink');

//找索引为偶数的li找出来 odd(偶数)
$('#ul2 li:odd').css('background' , '#666');


//找出索引为基数的li，even(基数)
$('#ul2 li:even').css('background' , 'blue')

//精准的找出某一个li eq(等于)
$('li:eq(3)').css('background' , 'purple');


</script>


<script type="text/javascript">
//内容过滤器
//内容过滤器
$('p:contains(a)').css('background' , 'red');

//找内容为空的
$('p:empty').css('background' , 'blue');


//找内容不为空的，这里的parent不是指找父级，而是指有资格当父级的，也就是说有子级的元素。
$('h1:parent').css('color' , 'pink');

//找含有某个节点的
$('h1:has(span)').css('color', 'black');

</script>

<script type="text/javascript">

//表单类型过滤器
$('input:password').css('background' , 'red');

</script>


<script type="text/javascript">
//可见性过滤器


function xx(){
$('#kejian').css('display' , 'block');
}


</script>


<script type="text/javascript">

//子元素过滤器
//过滤p标签下同一层次下最后一个p标签
$('.zi p:last-of-type').css('background' , 'purple');


//过滤ul下的li里面没有其他元素的标签
$('#zi2 a:only-child').css('background' , 'yellow');

</script>

</html>

资源均来自第三方，谨慎下载，前往第三方网站下载解压密码：www.xkwo.com 解压密码：www.xkwo.com 解压密码：www.xkwo.com 解压密码：www.xkwo.com 解压密码：www.xkwo.com 解压密码：www.xkwo.com 解压密码：www.xkwo.com 解压密码：www.xkwo.com