AIDE技术官网
AIDEZY.COM

JQuery的5种过滤器实例

JQuery的5种过滤器实例

JQuery的5种过滤器实例

JQuery的5种过滤器实例:

 

 

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

JQuery的5种过滤器实例 jQuery教程 第2张

 

代码实例:

<!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="显示隐藏内容" onclick="xx();">
<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>

搜一下

海报生成 赞(0) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册