首页 前端知识 jQuery过滤器和Filter

jQuery过滤器和Filter

2024-09-12 23:09:45 前端知识 前端哥 576 413 我要收藏

jQuery

一、jQuery 介绍

  • 什么是 jQuery?

jQuery,顾名思义,就是 JavaScript 和查询(query),它就是辅助 JS 开发的 JS 库。

  • jQuery 核心思想它的核心思想是 write less,do more(写的更少,做的更多),而且它解决了很多浏览器的兼容性问题。
  • jQuery 流行程度

jQuery 现在已经称为最流行的 JS 库,在世界前10000个访问最多的网站中,有超过55%在使用 jQuery。

  • jQuery 的好处

jQuery 是免费的,开源的,jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。

二、jQuery 入门案例

1. 案例

需求:点击按钮,弹出一句话。

步骤:

  1. 在项目中导入 jQuery 的文件
  2. 在项目中引入 jQuery 的文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入jQuery文件 -->
    <script src="js/jquery-1.7.2.js"></script>

    <script>
        // 使用原生的js代码
        // window.onload = function(){
        //     var btnObj = document.getElementById('btn');
        //     btnObj.onclick = function(){
        //         alert('使用原生的js实现的效果.....');
        //     }
        // }

        // 使用jQuery代码
        $(function(){ // 相当于原生js中的 onload事件
            var $btnObj = $('#btn'); // 相当于document.getElementById("btnId");
            $btnObj.click(function(){
                alert('使用jQuery实现的效果.....');
            });
        })

    </script>
</head>
<body>

<button id="btn">点我</button>
</body>
</html>

2. 入门案例总结

  • 使用 jQuery 一定要引入 jQuery 库到页面中
  • jQuery 中的 $ 是一个函数
  • 怎样为按钮添加点击事件?
    • 使用 jQuery 获取到标签对象
    • 使用标签对象.click(function(){ })

三、jQuery 的核心函数介绍

1. 介绍

$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。$() 就是调用这个函数。

  • 传入参数为函数时:

表示页面加载完成之后。相当于: window.onload = function(){ }

  • 传入参数为HTML字符串时:

会为我们创建这个 HTML 字符串对应的标签对象

  • 传入参数为选择器字符串时:
$(“#id属性值”);        id选择器,根据id获取到标签对象
$(“标签名”);           标签选择器,根据标签名获取到标签对象
$(“.class属性值”)      类选择器,根据class属性值获取到标签对象
  • 传入参数为DOM对象时:

会把这个 dom 对象转换为 jQuery 对象。

2. 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.7.2.js"></script>

    <script>
        $(function(){ // 相当于 window.onload = function(){}
            $('<h3>我是一个标题</h3>').appendTo('body');

            // id选择器
            alert($('#btn1').text());

            // class选择器
            alert($('.btn').length);

            var btnObj = document.getElementById('btn1')
            alert(btnObj); // [object HTMLButtonElement]
            // 将 DOM 对象传给 $() 函数,会将 DOM 对象转为 jQuery 对象
            alert($(btnObj)); // [object Object]
        })
    </script>
</head>
<body>

    <button id="btn1">按钮1</button>

    <button class="btn">按钮2</button>
    <button class="btn">按钮3</button>
</body>
</html>

四、DOM 对象和 jQuery 对象

1. 概述

  • DOM 对象
    • 通过 getElementById() 查询出来的标签对象是 DOM 对象
    • 通过 getElementsByName() 查询出来的标签对象是 DOM 对象
    • 通过 getElementsByTagName() 查询出来的标签对象是 DOM 对象
    • 通过 createElement() 方法创建的对象,是 DOM 对象
    • DOM 对象 alert 出来的效果是:[object HTML标签名Element]
  • jQuery 对象
    • 通过 jQuery 提供的 API 创建的对象,是 jQuery对象 $(“<h1></h1>”)
    • 通过 jQuery 包装的 DOM 对象,也是 jQuery 对象
    • 通过 jQuery 提供的 API 查询到的对象,是 jQuery 对象
    • jQuery 对象 alert 出来的效果是:[object Object]

2. jQuery 对象的本质

  • jQuery 对象是 DOM 对象的数组 + jQuery 提供的一系列的功能函数。(可以在浏览器打印查看 jQuery 对象的内容)

3. jQuery 对象和 DOM 对象使用上的区别

  • jQuery 对象不能使用 DOM 对象的属性和方法
  • DOM 对象也不能使用 jQuery 对象的属性和方法

4. DOM 对象和 jQuery 对象互转

  • DOM 对象转换为 jQuery 对象
    1. 先有 DOM 对象
    2. $(DOM对象) 就可以转换成为 jQuery 对象
  • jQuery 对象转换为 DOM 对象
    1. 先有 jQuery 对象
    2. jQuery 对象[下标]取出相应的 DOM 对象

五、jQuery 选择器

1. 基础选择器

就是 id 选择器,标签选择器,类选择器,组合选择器。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.选择 id 为 one 的元素 "background-color","#bbffaa"
            $('#btn1').click(function () {
                //css()方法可以设置和获取样式
                $('#one').css('background-color', '#cfa');
            });

            //2.选择 class 为 mini 的所有元素
            $('#btn2').click(function () {
                $('.mini').css('background-color', 'red');
            });

            //3.选择 元素名是 div 的所有元素
            $('#btn3').click(function () {
                $('div').css('background-color', 'yellow');
            });

            //4.选择所有的元素
            $('#btn4').click(function () {
                $('*').css('background-color', 'green');
            });

            //5.选择所有的 span 元素和id为two的元素
            $('#btn5').click(function () {
                $('span, #two').css('background-color', 'blue');
            });
        });

    </script>
</head>
<body>

<input type="button" value="选择 id 为 one 的元素" id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3"/>
<input type="button" value="选择 所有的元素" id="btn4"/>
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5"/>

<br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>

2. 层级选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }           
        </style>
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //1.选择 body 内的所有 div 元素 
                $("#btn1").click(function(){
                    $("body div").css("background", "#bbffaa");
                });

                //2.在 body 内, 选择div子元素  
                $("#btn2").click(function(){
                    $("body > div").css("background", "#bbffaa");
                });

                //3.选择 id 为 one 的下一个 div 元素 
                $("#btn3").click(function(){
                    $("#one+div").css("background", "#bbffaa");
                });

                //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
                $("#btn4").click(function(){
                    $("#two~div").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>  
    
<!--    <div>
        <h1>层级选择器:根据元素的层级关系选择元素</h1>
        ancestor descendant  :
        parent > child         :
        prev + next            :
        prev ~ siblings        :
    </div>   -->
        <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
        <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
        <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
        <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
    </body>
</html>

3. 基本过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }           
        </style>
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
                anmateIt();
            });
            
            $(document).ready(function(){
                //1.选择第一个 div 元素  
                $("#btn1").click(function(){
                    $('div:first').css("background", "#bbffaa");
                });

                //2.选择最后一个 div 元素
                $("#btn2").click(function(){
                    $('div:last').css("background", "#bbffaa");
                });

                //3.选择class不为 one 的所有 div 元素
                $("#btn3").click(function(){
                    $('div:not(".one")').css("background", "#bbffaa");
                });

                //4.选择索引值为偶数的 div 元素
                $("#btn4").click(function(){
                    $('div:even').css("background", "#bbffaa");
                });

                //5.选择索引值为奇数的 div 元素
                $("#btn5").click(function(){
                    $('div:odd').css("background", "#bbffaa");
                });

                //6.选择索引值为大于 3 的 div 元素
                $("#btn6").click(function(){
                    $('div:gt(3)').css("background", "#bbffaa");
                });

                //7.选择索引值为等于 3 的 div 元素
                $("#btn7").click(function(){
                    $('div:eq(3)').css("background", "#bbffaa");
                });

                //8.选择索引值为小于 3 的 div 元素
                $("#btn8").click(function(){
                    $('div:lt(3)').css("background", "#bbffaa");
                });

                //9.选择所有的标题元素
                $("#btn9").click(function(){
                    $(':header').css("background", "#bbffaa");
                });

                //10.选择当前正在执行动画的所有元素
                $("#btn10").click(function(){
                    $(':animated').css("background", "#bbffaa");
                });

                //11.选择没有执行动画的最后一个div
                $("#btn11").click(function(){
                    $('div:not(:animated):last').css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>      
<!--    <div>
    :first          
    :last           
    :not(selector)  
    :even           
    :odd            
    :eq(index)       
    :gt(index)      
    :lt(index)      
    :header         
    :animated       
    </div> -->
        <input type="button" value="选择第一个 div 元素" id="btn1" />
        <input type="button" value="选择最后一个 div 元素" id="btn2" />
        <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
        <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
        <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
        <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
        <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
        <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
        <input type="button" value="选择所有的标题元素" id="btn9" />
        <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />        
        <input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
        
        <h3>基本选择器.</h3>
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

4. 内容过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            function anmateIt(){
                $("#mover").slideToggle("slow", anmateIt);
            }

            anmateIt();
        });

        /**
         :contains(text)
         :empty
         :has(selector)
         :parent
         */
        $(document).ready(function(){
            //1.选择 含有文本 'di' 的 div 元素
            $("#btn1").click(function(){
                $('div:contains("di")').css("background", "#bbffaa");
            });

            //2.选择不包含子元素(或者文本元素) 的 div 空元素
            $("#btn2").click(function(){
                $('div:empty').css("background", "#bbffaa");
            });

            //3.选择含有 class 为 mini 元素的 div 元素
            $("#btn3").click(function(){
                $('div:has(.mini)').css("background", "#bbffaa");
            });

            //4.选择含有子元素(或者文本元素)的div元素
            $("#btn4").click(function(){
                $('div:parent').css("background", "#bbffaa");
            });
        });
    </script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />

<br><br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

5. 属性过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div,span,p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        /**
         [attribute]
         [attribute=value]
         [attribute!=value]
         [attribute^=value]
         [attribute$=value]
         [attribute*=value]
         [attrSel1][attrSel2][attrSelN]


         */
        $(function() {
            //1.选取含有 属性title 的div元素
            $("#btn1").click(function() {
                $('div[title]').css("background", "#bbffaa");
            });
            //2.选取 属性title值等于'test'的div元素
            $("#btn2").click(function() {
                $('div[title="test"]').css("background", "#bbffaa");
            });
            //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
            $("#btn3").click(function() {
                $('div[title!="test"]').css("background", "#bbffaa");
            });
            //4.选取 属性title值 以'te'开始 的div元素
            $("#btn4").click(function() {
                $('div[title^="te"]').css("background", "#bbffaa");
            });
            //5.选取 属性title值 以'est'结束 的div元素
            $("#btn5").click(function() {
                $('div[title$="est"]').css("background", "#bbffaa");
            });
            //6.选取 属性title值 含有'es'的div元素
            $("#btn6").click(function() {
                $('div[title*="es"]').css("background", "#bbffaa");
            });

            //7.首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素
            $("#btn7").click(function() {
                $('div[id][title*="es"]').css("background", "#bbffaa");
            });
            //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
            $("#btn8").click(function() {
                $('div[title][title!="test"]').css("background", "#bbffaa");
            });
        });
    </script>
</head>
<body>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
<input type="button"
       value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
<input type="button"
       value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素."
       id="btn7" />
<input type="button"
       value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />

<br>
<br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" value="123456789"
                                    size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

6. 表单过滤器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){


            /**
             :input
             :text
             :password
             :radio
             :checkbox
             :submit
             :image
             :reset
             :button
             :file
             :hidden

             表单对象的属性
             :enabled
             :disabled
             :checked
             :selected
             */


            //1.对表单内 可用input 赋值操作
            $("#btn1").click(function(){
                $(':text:enabled').val("大家好");
            });
            //2.对表单内 不可用input 赋值操作
            $("#btn2").click(function(){
                $(':text:disabled').val("大家早上好!");
            });
            //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
            $("#btn3").click(function(){
                alert($(':checkbox:checked').length);
            });
            //4.获取多选框,每个选中的value值
            $("#btn4").click(function(){

                var $checkboies = $(':checkbox:checked');
                // alert($checkboies);

                //老方法遍历
                // for(var i = 0; i < $checkboies.length; i++){
                //  alert($checkboies[i].value);
                // }

                //each方法是jQuery对象提供的用来遍历元素的方法
                //在遍历的function函数中,有一个this对象,这个this对象就是当前遍历到的dom对象
                $checkboies.each(function () {
                    alert(this.value);
                });
            });
            //5.获取下拉框选中的内容
            $("#btn5").click(function(){
                //获取选中的option标签
                var $optons = $('select option:selected');
                //遍历,获取option标签中的文本内容
                $optons.each(function(){
                    alert(this.innerHTML);
                });

            });
        })
    </script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />

<form id="form1" action="#">
    可用元素: <input name="add" value="可用文本框1"/><br>
    不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
    可用元素: <input name="che" value="可用文本框2"/><br>
    不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
    <br>

    多选框: <br>
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsletter" value="test2" />test2
    <input type="checkbox" name="newsletter" value="test3" />test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    <input type="checkbox" name="newsletter" value="test5" />test5

    <br><br>
    下拉列表1: <br>
    <select name="test" multiple="multiple" style="height: 100px" id="sele1">
        <option>浙江</option>
        <option selected="selected">辽宁</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>

    <br><br>
    下拉列表2: <br>
    <select name="test2">
        <option>浙江</option>
        <option>辽宁</option>
        <option selected="selected">北京</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
</form>
</body>
</html>

7. 元素的筛选

  • eq() 获取给定索引的元素 功能跟:eq() 一样
  • first() 获取第一个元素 功能跟:first 一样
  • last() 获取最后一个元素 功能跟:last 一样
  • filter(exp) 留下匹配的元素
  • is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回,true
  • has(exp) 返回包含有匹配选择器的元素的元素 功能跟:has 一样
  • not(exp) 删除匹配选择器的元素功能跟:not 一样
  • children(exp) 返回匹配给定选择器的子元素 功能跟parent>child 一样
  • find(exp) 返回匹配给定选择器的后代元素 功能跟ancestor descendant 一样
  • next() 返回当前元素的下一个兄弟元素 功能跟prev + next 功能一样
  • nextAll() 返回当前元素后面所有的兄弟元素 功能跟prev ~ siblings 功能一样
  • nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
  • parent() 返回父元素
  • prev(exp) 返回当前元素的上一个兄弟元素
  • prevAll() 返回当前元素前面所有的兄弟元素
  • prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
  • siblings(exp) 返回所有兄弟元素
  • add() 把add 匹配的选择器的元素添加到当前jquery 对象中

六、jQuery 常用方法

1. html()、text()、val() 方法

  • html() 它可以设置和获取起始标签和结束标签之间的内容,跟 dom 属性 innerHTML 一样
  • text() 它可以设置和获取起始标签和结束标签之间的文本,跟 dom 属性 innerText 一样
  • val() 它可以设置和获取表单项的 value 属性值,跟 dom 属性 value 一样
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {
            //不传参数是获取,传了参数是设置

            // alert($('div').html());//获取内容
            // $('div').html('<h1>我是标题!</h1>'); //设置内容

            // alert($('div').text()); //获取文本
            // $('div').text('我是内容'); //设置文本

            $('button').click(function () {
                // alert($('#username').val()); //获取
                $('#username').val("我是程序员!");//设置
            });
        });


    </script>

</head>

<body>

<div>
    我是div中的内容。
    <span>我是div中的span。</span>

</div>

<input type="text" name="username" id="username"><br>
<button>操作输入框</button>

</body>

</html>

2. 案例:单选、复选、下拉列表的选中操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {

            //操作单选按钮
            $(':radio').val(["radio2"]); //选中 value=radio2的按钮

            //操作复选框
            $(':checkbox').val(["checkbox1", "checkbox3"]); //选中value=checkbox1 和 value=checkbox3的复选框

            //操作多选下拉框
            $('#multiple').val(["mul2","mul3","mul4"]); //选中value=mul2 value=mul3 和 value=mul4的选项

            //操作单选下拉列表
            $('#single').val(["sin2"]); //选中value=sin2的选项

            //一次性选中所有要选的 单选按钮 下拉列表 复选框 等
            $(':radio, :checkbox, #multiple, #single').val(["radio2", "checkbox2", "checkbox3", "mul2", "mul3", "sin3"]);
        });

    </script>

</head>

<body>
单选:
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选:
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>

下拉多选 :
<select id="multiple" multiple="multiple" size="4">
    <option value="mul1">mul1</option>

    <option value="mul2">mul2</option>

    <option value="mul3">mul3</option>

    <option value="mul4">mul4</option>

</select>

<br/>

下拉单选 :
<select id="single">
    <option value="sin1">sin1</option>

    <option value="sin2">sin2</option>

    <option value="sin3">sin3</option>

</select>

</body>

</html>

3. attr() 和 prop() 方法

  • attr() 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等
  • prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {

            // alert($(':checkbox:first').attr("name")); //获取name属性的值

            // $(':checkbox:first').attr("name", "abc"); //设置name属性的值

            // alert($(":checkbox:first").attr("checked"));
            // alert($(":checkbox:first").prop("checked"));


            $(':checkbox:first').prop("checked",true);
        });
    </script>

</head>

<body>
多选:
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>

</body>

</html>

4. dom 的增删改操作

  • 内部插入:
    • appendTo() a.appendTo(b) 把a插入到b中子元素的末尾,成为b中最后一个子元素
    • prependTo() a.prependTo(b) 把a插入到b中子元素的前面,成为b中第一个子元素
  • 外部插入:
    • insertAfter() a.insertAfter(b) 得到ba
    • insertBefore() a.insertBefore(b) 得到ab
  • 替换:
    • replaceWith() a.replaceWith(b) 用b替换掉所有a
    • replaceAll() a.replaceAll(b) 用a替换掉所有b
  • 删除:
    • remove() a.remove() 删除a标签
    • empty() a.empty() 清空a标签里的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {
            // $("<span>我是插入的span.</span>").appendTo("div"); //这里的参数div可以自己写$(选择器)去查
            // $("<span>我是插入的span2.</span>").prependTo("div");
            //
            // $("<span>我是后面插入的span.</span>").insertAfter("div");
            // $("<span>我是前面插入的span.</span>").insertBefore("div");

            // $("p").replaceWith($("<span>我是span。</span>"));

            // $("<h1>我是标题!</h1>").replaceAll($('p'));


            // $("p").remove();
            $("p").empty();
        });

    </script>

</head>

<body>

<div>
    <span>我是span1.</span>

</div>

<p>我是段落1</p>

<p>我是段落2</p>

</body>

</html>

5. 案例:动态添加和删除表格行记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" type="text/css" href="css.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {
            //创建的可以复用的删除函数
            var deleteFun = function (this_) {
                // alert(111);

                //this对象就表示当前正在响应事件的dom对象
                var $tr = $(this_).parent().parent();

                //获取要删除行的姓名
                var name = $tr.find("td:first").text();

                if(confirm("你确定要删除【"+name+"】吗?")){
                    $tr.remove();
                }

                return false; //阻止默认行为,超链接的默认行为就是跳转
            }

            //给【submit】按钮绑定事件
            $('#addEmpButton').click(function () {

                //获取输入的内容
                var empName = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                var $trObj = $("<tr>\n" +
                    "\t\t\t<td>"+empName+"</td>\n" +
                    "\t\t\t<td>"+email+"</td>\n" +
                    "\t\t\t<td>"+salary+"</td>\n" +
                    "\t\t\t<td><a href=\"deleteEmp?id=003\">Delete</a></td>\n" +
                    "\t\t</tr>");

                $trObj.appendTo($("#employeeTable"));

                $trObj.find("a").click(function () {
                    return deleteFun(this); //阻止默认行为,超链接的默认行为就是跳转
                });
            });

            //给删除链接绑定事件
            $("a").click(function () {
                return deleteFun(this);
            });
        });
    </script>

</head>

<body>

<table id="employeeTable">
    <tr>
        <th>Name</th>

        <th>Email</th>

        <th>Salary</th>

        <th>&nbsp;</th>

    </tr>

    <tr>
        <td>Tom</td>

        <td>tom@tom.com</td>

        <td>5000</td>

        <td><a href="deleteEmp?id=001">Delete</a></td>

    </tr>

    <tr>
        <td>Jerry</td>

        <td>jerry@sohu.com</td>

        <td>8000</td>

        <td><a href="deleteEmp?id=002">Delete</a></td>

    </tr>

    <tr>
        <td>Bob</td>

        <td>bob@tom.com</td>

        <td>10000</td>

        <td><a href="deleteEmp?id=003">Delete</a></td>

    </tr>

</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name: </td>

            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>

        </tr>

        <tr>
            <td class="word">email: </td>

            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>

        </tr>

        <tr>
            <td class="word">salary: </td>

            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>

        </tr>

        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>

            </td>

        </tr>

    </table>

</div>

</body>

</html>

七、jQuery 中常用的事件

  • click() 鼠标单击事件
  • change() 内容改变事件
  • mouseover() 鼠标移入事件
  • mouseout() 鼠标移出事件
  • bind() 可以给元素一次性绑定一个或多个事件
  • one() 使用上跟bind一样,但是one方法绑定的事件只会响应一次
  • unbind() 使用上跟bind相反,用来移除一个或多个事件
  • live() 也是用来绑定事件,它可以用来绑定选择器匹配的所有元素的事件,哪怕这个元素是后面动态创建出来的也有效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {
            // $("button").click(function () {
            //     console.log("鼠标单击。。。");
            // });
            //
            // $("button").mouseover(function () {
            //     console.log("鼠标移入。。。");
            // });
            //
            // $("button").mouseout(function () {
            //     console.log("鼠标移出。。。");
            // });

            // $("button").bind("mouseover mouseout click", function () {
            //     console.log("事件被触发。。。");
            // });
            // $("button").one("mouseover mouseout click", function () {
            //     console.log("事件被触发。。。");
            // })
            // $("button").unbind("mouseover click");

            $("button").live("mouseover mouseout click", function () {
                console.log("事件被触发。。。");
            });

            $("<button>我是后创建的按钮</button>").appendTo("body");
        })

    </script>

</head>

<body>

<button>按钮</button>

</body>

</html>

八、jQuery 应用案例

1. 购物车案例

与上面案例:动态添加和删除表格行记录一样,使用 jQuery 实现对于表格内容的增、删操作,我们就不再做了。

2. 商品数量 ++,-- 案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" type="text/css" href="css.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {
            $('#reduce').click(function(){
                var newNum = $('#num').val() - 1;
                if(newNum <= 0){
                    $('#num').val(1);
                }else{
                    $('#num').val(newNum);
                }
            });

            $('#plus').click(function(){
                var newNum = parseInt($('#num').val()) + 1;
                if(newNum > 10){
                    $('#num').val(10);
                }else{
                    $('#num').val(newNum);
                }
            });
        });
    </script>

</head>

<body>

<button id="reduce">-</button>

<input type="text" id="num" value="1">
<button id="plus">+</button>

</body>

</html>

3. 省市县地址三级联动

动态的吗?写死的数组?

九、作业

  1. 完整的写一套关于学生的列表展示+分页、登录,要求:使用 BaseServlet、Filter,涉及到:学生表和专业表
  2. 在上面案例的基础上,加上 添加学生功能、修改学生功能、删除学生功能、退出功能

十. Filter 过滤器

1.模拟 Filter 过滤器

需求:在你的 web 工程下,有一个 admin 目录,这个 admin 目录下的所有资源(HTML 页面、jpg 图片、jsp 文件等等)都必须是用户登录之后才能访问。

思考:根据之前我们学过的内容,我们知道,用户登录之后都会把用户登录的信息保存到 Session 域中,所以要检查用户是否登录,可以判断 Session 中是否包含有用户登录的信息即可!

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%
        Object user = request.getSession().getAttribute("user");

        if(user == null){
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }
    %>

    我是a.jsp页面。
</body>
</html>

但是这种做法有局限性,这种代码只能写在 jsp 中,不能在 HTML 中、jpg 中编写呀!

2. 什么是 Filter 过滤器

  • Filter 过滤器它是 JavaWeb 的三大组件之一。三大组件分别是:Servlet 程序、Listenter 监听器、Filter 过滤器
  • Filter 过滤器它是 JavaEE 的规范,也就是接口
  • Filter 过滤器它的作用是:拦截请求进行过滤
  • 拦截请求常见的应用场景有:
    • 权限检查
    • 日志操作
    • 事务管理
    • 等等

3. Filter 过滤器的编写步骤

  1. 创建一个类,实现过滤器接口(Filter)
  2. 实现方法,编写自己的代码
  3. 在 web.xml 中配置过滤器(或者使用注解配置)

4. Filter 过滤器的使用(字符编码过滤器)

自定义的字符编码过滤器类

package com.xszx.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter(urlPatterns = {"/*"}) // /* 表示拦截所有的请求
public class CharacterFilter implements Filter {

    public CharacterFilter() {
        System.out.println("过滤器构造方法被执行。。。");
    }

    /**
     * 初始化方法,执行一些初始化的操作,一般不用
     * @param filterConfig
     * @throws ServletException
     */
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("过滤器的初始化方法被执行。。。");
    }

    /**
     * 过滤器的核心方法,过滤器拦截到请求后,就是在该方法中对请求进行判断,
     * 看是否让该请求继续访问我们的资源
     * @param servletRequest    封装请求的信息
     * @param servletResponse   封装响应的信息
     * @param filterChain       过滤器练,可以用来放行
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("过滤器doFilter方法被执行,开始对请求进行判断处理");
        servletRequest.setCharacterEncoding("utf-8");
        servletResponse.setContentType("text/html;charset=utf-8");

        // 放行请求
        filterChain.doFilter(servletRequest, servletResponse);
    }

    /**
     * 销毁方法,用来做一些释放资源的操作,一般不用
     */
    @Override
    public void destroy() {
        System.out.println("过滤器销毁方法被执行。。。。。");
    }
}

自定义的Servlet

package com.xszx.controller;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
        resp.getWriter().write("你好!");
    }
}

测试:

  1. 启动服务器,观察控制台的打印情况
  2. 访问 HelloServlet,观察控制台的打印情况

5. 过滤器案例(登录过滤器)

5.1 需求

之前我们写过登录功能,但登录功能貌似就是一个摆设,如果用户没有登录,直接通过地址栏输入登录成功后的页面地址也可以访问!!!

这时候我们就可以编写登录的过滤器,通过该过滤器拦截所有的请求,然后判断该用户是否登录,登录之后放行请求,未登录则重定向到登录页面!

在之前的登录案例中编写即可。

5.2 编写登录的过滤器

package com.xszx;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebFilter("/*")
public class LoginFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest)servletRequest;
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        HttpSession session = request.getSession();
        Object user = session.getAttribute("user");
        String requestURI = request.getRequestURI(); // 获取到 /项目路径/资源名称

        if(user == null){ // 未登录

            if(requestURI.indexOf("login") != -1){ // 用户是去登录的,点击了登录按钮
                // 放行
                filterChain.doFilter(servletRequest, servletResponse);
            }else if(requestURI.indexOf("index.jsp") != -1){ // 用户是访问登录页面的
                // 放行
                filterChain.doFilter(servletRequest, servletResponse);
            }else{
                // 重定向到登录页面
                response.sendRedirect(request.getContextPath() + "/index.jsp");
            }
        }else{ // 登录了
            // 放行
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

    @Override
    public void destroy() {

    }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18208.html
标签
评论
发布的文章

3.1 requests与JSON基础

2024-10-15 23:10:08

React 安装(NPM)

2024-10-15 23:10:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!