返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery过滤和查找元素的使用

2020-04-09 文章标签: jquery 前端 培训 浏览次数:

jquery过滤和查找元素的使用

这节我们介绍jquery查找元素和过滤使用

1.jquery类过滤

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("div").click(function(){//为所有div元素绑定单击事件
    if ( $(this).hasClass("red") )//只有类名为red的div元素才绑定系列动画
        $(this)
          .animate({ left: 120 })
          .animate({ left: 240 })
          .animate({ left: 0 })
          .animate({ left: 240 })
          .animate({ left: 120 });
  }); 
})
</script>
<style type="text/css">
div{
    position:absolute;
    width:100px;
    height:100px;
}
.blue { background:blue; left:0px;}
.red { background:red; left:120px; z-index:2;}
.green { background:green; left:240px;}
.pos { top:120px;}
</style>
<title></title>
</head>
<body>
<div class="blue"></div>
<div class="red"> </div>
<div class="green"></div>
<div class="red pos"> </div>
</body>
</html>

2.jquery下标过滤

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("div").eq(1).click(function(){//为第2个div元素绑定系列动画
        $(this)
          .animate({ left: 120 })
          .animate({ left: 240 })
          .animate({ left: 0 })
          .animate({ left: 240 })
          .animate({ left: 120 });
  }); 
})
</script>
<style type="text/css">
div{
    position:absolute;
    width:100px;
    height:100px;
}
.blue { background:blue; left:0px;}
.red { background:red; left:120px; z-index:2;}
.green { background:green; left:240px;}
.pos { top:120px;}
</style>
<title></title>
</head>
<body>
<div class="blue"></div>
<div class="red"> </div>
<div class="green"></div>
<div class="red pos"> </div>
</body>
</html>

3.jquery表达式过滤

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
    $("div").filter(".red").css("background-color","red");
})
</script>
<style type="text/css">
div{ height:20px;}
</style>
<title></title>
</head>
<body>
<div class="blue">class="blue"</div>
<div class="red">class="red"</div>
<div class="green">ass="green"</div>
<div class="red pos">class="red pos"</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
    $("p").filter(function(index) {
        return $("span", this).length == 2;
    }).css("background-color","red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<p><span class="red">床前明月光,疑是地上霜。</span></p>
<p><span>举头望明月,</span><span>低头思故乡。</span></p>
<p>独在异乡为异客,每逢佳节倍思亲。</p>
<p>遥知兄弟登高处,遍插茱萸少一人。</p>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("p").has("span.red").css("background-color","red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<p><span class="red">床前明月光,疑是地上霜。</span></p>
<p><span>举头望明月,</span><span>低头思故乡。</span></p>
<p>独在异乡为异客,每逢佳节倍思亲。</p>
<p>遥知兄弟登高处,遍插茱萸少一人。</p>
</body>
</html>

4.jquery判断是否含有span标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
    if($("p").has("span"))
        alert("当前jQuery对象中包含有span子元素");
})
</script>
<title></title>
</head>
<body>
<p><span class="red">床前明月光,疑是地上霜。</span></p>
<p><span>举头望明月,</span><span>低头思故乡。</span></p>
<p>独在异乡为异客,每逢佳节倍思亲。</p>
<p>遥知兄弟登高处,遍插茱萸少一人。</p>
</body>
</html>

5.jquery映射

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
$("p").html("<h2>提交信息<h2>").append( $("input").map(function(){
return $(this).val();
}).get().join("、 ") ); 
return false;
})
})
</script>
<title></title>
</head>
<body>
<form action="#">
    用户名<input type="text" name="name" value="zhangsan"/><br><br>
    密码<input type="password" name="password" value="12345678"/><br><br>
    网址<input type="text" name="url" value="http://www.baidu.com/"/><br><br>
    <button id="submit">提交</button>
</form> 
<p></p>
</body>
</html>

6.jquery清除

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#menu li").not(".home").css("color","red"); //清除home类菜单项
})
</script>
<title></title>
</head>
<body>
<ul id="menu">
    <li class="home">首页</li>
    <li>论坛</li>
    <li>微博</li>
    <li>团购</li>
    <li>博客</li> 
</ul>
</body>
</html>

7.jquery截取

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#menu li").slice(2,4).css("color","red"); //截取第3、4个菜单项
})
</script>
<title></title>
</head>
<body>
<ul id="menu">
    <li class="home">首页</li>
    <li>论坛</li>
    <li>微博</li>
    <li>团购</li>
    <li>博客</li> 
</ul>
</body>
</html>

8.jquery向下查找

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#menu").children().css("text-decoration","underline"); 
})
</script>
<title></title>
</head>
<body>
<ul id="menu">
    <li class="home">首页</li>
    <li>论坛</li>
    <li>微博</li>
    <li>团购</li>
    <li>博客</li> 
</ul>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#menu").children(".home").css("text-decoration","underline"); 
})
</script>
<title></title>
</head>
<body>
<ul id="menu">
    <li class="home">首页</li>
    <li>论坛</li>
    <li>微博</li>
    <li>团购</li>
    <li>博客</li> 
</ul>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   var j = $("body > div");
   alert(j.children("div").length);//返回3个div元素
   alert(j.find("div").length); //返回5个div元素
   alert(j.contents().length); //返回7个元素,包括5个div元素,2个文本节点(空格)
})
</script>
<title></title>
</head>
<body>
<div>
    <div>
        <div></div>
        <div>  </div>
    </div>
    <div></div>
    <div></div>
</div>
</body>
</html>

9.jquery向上查找

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("img").parents().css({"border":"solid 1px red","margin":"10px"}) ;
    alert($("img").parents().length);//返回4,分别是span、div、body和html
})
</script>
<style type="text/css">
img {height:200px;}
</style>
<title></title>
</head>
<body>
<div>
    <span>
        <img src="images/bg.jpg" />
    </span>
    <img src="images/bg.jpg" />
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
    $('li.l31').closest("ul").css({"border":"solid 1px red","margin":"10px"});
})
</script>
<title></title>
</head>
<body>
<ul class="u1">一级菜单
    <li class="l1">1</li>
    <li class="l2">2
        <ul class="u2">二级菜单
            <li class="l21">21</li>
            <li class="l22">22
                <ul class="u3">三级菜单
                    <li class="l31">31</li>
                    <li class="l32">32</li>
                    <li class="l33">33</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="l3">3</li>
</ul>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('li.l31').parentsUntil('.u1').css({"border":"solid 1px red","margin":"10px"}) ;
})
</script>
<title></title>
</head>
<body>
<ul class="u1">一级菜单
    <li class="l1">1</li>
    <li class="l2">2
        <ul class="u2">二级菜单
            <li class="l21">21</li>
            <li class="l22">22
                <ul class="u3">三级菜单
                    <li class="l31">31</li>
                    <li class="l32">32</li>
                    <li class="l33">33</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="l3">3</li>
</ul>
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("img").parent().css({"border":"solid 1px red","margin":"10px"}) ;
    $("img").parent().each(function(){alert(this.nodeName)});//提示SPAN和DIV元素
})
</script>
<style type="text/css">
img {height:200px;}
</style>
<title></title>
</head>
<body>
<div>
    <span>
        <img src="http://freemuban.com/img/bg20200409.jpg" />
    </span>
    <img src="http://freemuban.com/img/bg20200409.jpg" />
</div>
</body>
</html>

10.jquery向前查找

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".red").prev().css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".red").prevAll("p").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".red").prevUntil("h1").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

11.jquery向后查找

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".blue").nextUntil(".red").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".blue").nextAll("p").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".red").next("p").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

12.jquery查找同辈元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".red").siblings("p").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>

13.jquery添加查找

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(".red").siblings("p").add("h1,h2").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
<title></title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章 </h2>
<p class="blue">少小离家老大回,</p>
<p>乡音无改鬓毛衰。</p>
<p class="red">儿童相见不相识,</p>
<p>笑问客从何处来。</p>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。