第八节特效、选择器、过滤器

作者: 最美下雨天 | 来源:发表于2018-06-13 10:02 被阅读5次

第八节特效、选择器、过滤器
jQuery中的选择器
前端组件
玩转jQuery 1day
2019-08-01jQuery基础
kibana 基本使用手册
javascript开发商城网站必备购物车抛物线效果
JQuery模糊查询
jQuery笔记（三）-- 使用过滤器
CSS滤镜（filter）

1、特效

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <style type="text/css">
            div{
                border: 1px solid #000000;
                height: 200px;
                width: 200px;
                text-align: center;
            }
            
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        
        <script type="text/javascript">
            $(function(){
                $("#showId").click(function(){
                    $("#divtag").show();
                });
                
                $("#hideId").click(function(){
                    $("#divtag").hide();
                });
                
                $("#toggleId").click(function(){
                    $("#divtag").toggle();
                });
                
                
            })
        </script>
        
    </head>
    <body>
    
    <div id="divtag">div标签</div>
    
    </br>
    
    <input type="button" value="hide" id="hideId"/>
    <input type="button" value="show" id="showId"/>
    <input type="button" value="toggle" id="toggleId"/>
    
    </body>
</html>

网页显示：

image.png

2 、基本选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
        <div id="div1">DIV</div>
        <span class="span1">SPAN</span>
        <p class="span1">P <button>Button</button></p>
        
        <script type="text/javascript">
            
            //全局选择器
            //选取body下面所有的标签
            var arr=$("body *");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
            
            //类选择器
            var arr1=$(".span1");
            for (var i = 0; i < arr1.length; i++) {
                console.log(arr1[i]);
            }
            
            //标签选择器
            var arr2=$("span");
            for (var i = 0; i < arr2.length; i++) {
                console.log(arr2[i]);
            }
            
            //id选择器
            var arr3=$("#div1");
            for (var i = 0; i < arr3.length; i++) {
                console.log(arr3[i]);
            }
            
            //群组选择器
            $("#div1,.span1").css("color","red");
            
        </script>
        
    
    </body>
</html>

3、层级选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
        <ul class="topnav">
            <li>Item 1</li>
            <li>Item 2
                <ul>
                    <li>Nested item 1</li>
                    <li>Nested item 2</li>
                    <li>Nested item 3</li>
                </ul>
            </li>
            <li>Item 3</li>
        </ul>
        
        <li>Item 4</li>
        <li>Item 5</li>
        
        <script type="text/javascript">
            
            //层级选择器
            //查找<ul class="topnav">下面所有的li
            var arr1=$(".topnav li");
            for (var i = 0; i < arr1.length; i++) {
                console.log(arr1[i]);
            }
            console.log("---------------分割线----------------");
            
            //查找ul下面所有的li，不包括孙子节点
            var arr2=$(".topnav> li");
            for (var i = 0; i < arr2.length; i++) {
                console.log(arr2[i]);
            }
            console.log("---------------分割线----------------");
            
            
            //查找ul后的第一个li元素
            var arr3=$(".topnav+ li");
            for (var i = 0; i < arr3.length; i++) {
                console.log(arr3[i]);
            }
            console.log("---------------分割线----------------");
            
            
            //查找ul下的所有的li元素
            var arr4=$(".topnav~ li");
            for (var i = 0; i < arr4.length; i++) {
                console.log(arr4[i]);
            }
            console.log("---------------分割线----------------");
            
            
            
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

4、筛选器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
       <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>东莞</li>
        </ul>
        
        <script type="text/javascript">
            //筛选器
            //获取第一个li元素
            var arr1=$("li:first");
            for (var i = 0; i < arr1.length; i++) {
                console.log(arr1[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            //获取最后一个li元素
            var arr2=$("li:last");
            for (var i = 0; i < arr2.length; i++) {
                console.log(arr2[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            //获取下标为奇数的li元素
            var arr3=$("li:odd");
            for (var i = 0; i < arr3.length; i++) {
                console.log(arr3[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            //获取下标为偶数的li元素
            var arr4=$("li:even");
            for (var i = 0; i < arr4.length; i++) {
                console.log(arr4[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            //获取下标为2的li元素
            var arr5=$("li:eq(2)");
            for (var i = 0; i < arr5.length; i++) {
                console.log(arr5[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            //获取下标大于2的li元素
            var arr6=$("li:gt(2)");
            for (var i = 0; i < arr6.length; i++) {
                console.log(arr6[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            //获取下标小于2的li元素
            var arr7=$("li:lt(2)");
            for (var i = 0; i < arr7.length; i++) {
                console.log(arr7[i].innerHTML);
            }
            console.log("---------分割线----------");
            
            
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

5、筛选器（contains、has）

网页显示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
       <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>东莞<span>小城市</span></li>
        </ul>
        
        
        
        <script type="text/javascript">
            //筛选器
            //获取li中文本是“上海”的元素
            var arr1=$("li:contains('上海')");
            for (var i = 0; i < arr1.length; i++) {
                console.log(arr1[i]);
            }
            
            console.log("-----------分割线-----------");
            
            //获取li中包含span标签的元素
            var arr2=$("li").has("span");
            for (var i = 0; i < arr2.length; i++) {
                console.log(arr2[i]);
            }
            
            
        </script>
        
    
    </body>
</html>

image.png

6、筛选器(hidden、visible)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
       <div style="display:none;">Hider!</div>

        <div>Hider!</div>

        <form>
            <input type="hidden" />

            <input type="hidden" />
            <input type="hidden" />
        </form>
        
        <input type="hidden" value="隐藏域" />
        
        
        <script type="text/javascript">
            // :hidden 主要用来过滤隐藏域和display设置为none的元素
            //:visible 过滤页面上可见的元素
            
            var arr=$("body *:visible");
            
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
            console.log("--------分割线-------");
            
            var arr=$("body *:hidden");
            
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
            console.log("--------分割线-------");
            
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

第八节特效、选择器、过滤器
1、特效网页显示： 2 、基本选择器 3、层级选择器网页显示： 4、筛选器网页显示： 5、筛选器（conta...
jQuery中的选择器
css选择器层级选择器表单选择器基本过滤器内容过滤器属性过滤器子元素过滤器可见性过滤选择器表单属性...
前端组件
特效 datedropper日期选择器 timedropper时间选择器 slideout侧滑框架 CSS3 Po...
玩转jQuery 1day
选择器 1.元素选择 2层级选择 4.伪类选择器过滤器 $().parent()父级元素 filter() 方法...
2019-08-01jQuery基础
语法常用选择器属性选择器基本过滤器书写要规范样式设计追加行内样式和移除切换样式常用推荐on方法
kibana 基本使用手册
时间选择器默认的时间过滤器设置为最近 15 分钟。你可以用页面顶部的时间选择器(Time Picker)来修改时...
javascript开发商城网站必备购物车抛物线效果
知识点：静态布局技巧，定位，浮动，背景设置，CSS样式选择器javascript特效，jquery库调用，插件调用...
JQuery模糊查询
☞☞ 个人主页欢迎访问 ☜☜ 通过JQuery中的过滤器filter配合选择器:contains来实现一个模糊查询...
jQuery笔记（三）-- 使用过滤器
jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单，实...
CSS滤镜（filter）
CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染 f...