过滤器
类过滤器: hasClass(class)// 检查当前的元素是否含有某个特定的类, 如果有, 则返回 true
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
- <style type="text/CSS">
- p{
- position:absolute;
- width:100px;
- height:100px;
- }
- .one{
- background-color: goldenrod;
- }
- .tow{
- background-color: yellow;
- left:120px;
- }
- .three{
- background-color: gray;
- left:220px;
- }
- .four{
- background-color: green;
- left:320px;
- }
- .five{
- background-color: greenyellow;
- left:420px;
- }
- </style>
- <title></title>
- </head>
- <body>
- <p class="one"></p>
- <p class="tow"></p>
- <p class="three"></p>
- <p class="four"></p>
- <p class="five"></p>
- <script type="text/javascript">
- $(function()
- {
- $("p").click(function (){
- if($(this).hasClass("tow"))
- {
- $(this).animate({left:120})// 动画效果
- .animate({bottom:120})
- .animate({bottom:240})
- .animate({left:240})
- .animate({left:0})
- .animate({left:240})
- .animate({left:120})
- .animate({top:240})
- .animate({top:120})
- .animate({top:8});
- }
- });
- });
- </script>
- </body>
- </html>
- // 下标过滤:
- eq(index)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
- <style type="text/css">
- p{
- position:absolute;
- width:100px;
- height:100px;
- }
- .one{
- background-color: goldenrod;
- }
- .tow{
- background-color: yellow;
- left:120px;
- }
- .three{
- background-color: gray;
- left:220px;
- }
- .four{
- background-color: green;
- left:320px;
- }
- .five{
- background-color: greenyellow;
- left:420px;
- }
- </style>
- <title></title>
- </head>
- <body>
- <p class="one"></p>
- <p class="tow"></p>
- <p class="three"></p>
- <p class="four"></p>
- <p class="five"></p>
- <script type="text/javascript">
- $(function()
- {
- $("p").eq(2).click(function (){
- $(this).animate({left:120})
- .animate({bottom:120})
- .animate({bottom:240})
- .animate({left:240})
- .animate({left:0})
- .animate({left:240})
- .animate({left:120})
- .animate({top:240})
- .animate({top:120})
- .animate({top:8});
- });
- });
- </script>
- </body>
- </html>
表达式过滤:
- filter(expr)
- filter(fn)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="../js/jquery-3.2.1.js">
- </script>
- <style type="text/css">
- p{ position:absolute; width:100px; height:100px;
- } .one{ background-color: goldenrod; }
- .tow{ background-color: yellow; left:120px; }
- .three{ background-color: gray; left:220px;
- } .four{ background-color: green; left:320px;
- } .five{ background-color: greenyellow; left:420px;
- }
- </style>
- <title>
- </title>
- </head>
- <body>
- <p class="one">
- </p>
- <p class="tow">
- </p>
- <p class="three">
- </p>
- <p class="four">
- </p>
- <p class="five">
- </p>
- <script type="text/javascript">
- $(function() { $("p").filter(".five").css("background-color", "blanchedalmond")
- });
- </script>
- </body>
- </html>
- Is(expr)// 用一个表达式来检查当前的元素集合. 如果其中至少一个元素符合这个给定的表达式就返回为 true
- map(callback)// 将一组元素转换成其他数组
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
- <title></title>
- </head>
- <body>
- <p> 注册信息:</p>
- <form>
- <input type="text" name="name" value="用户名" />
- <input type="password" name="password" value="密码" />
- <input type="text" name="url" value="https://www.baidu.com"/>
- </form>
- <script type="text/javascript">
- $(function (){
- $("p").append($("input").map(function (){
- return $(this).val();
- }).get().join(","))
- });
- </script>
- </body>
- </html>
- has(expr)// 保留包含特定后代的元素, 去掉那些不含指定后代的元素
- not(expr)// 删除与指定表达式匹配的元素
- slice(start,[end])// 选取一个匹配的子集
来源: https://www.2cto.com/kf/201804/736414.html