The python JQuery (j basic and simple example)

JQuery
     1 . Download JQuery
     2 . JQuery introduced (first use after introduction) 
    , such as: 
        Import: <Script the src = " xxx.js " > </ Script> 
        use: <Script> </ Script> 
    . 3 . Using
         a basic grammar: 
            JQuery 
            $
         . $ 2 ( "" ) method. 
        JQuery suo object based on the index value to get the specific label object     
using the JQuery: 
    Note: 
        JQuery DOM object into the object: $ ( " div " ) -> $ ( " div " ) [0] 
        the DOM objects into JQuery objects: the this         ->    $(this)    
    Find Tags: 
         1selector (if we take the index, it will become a DOM object, you need to pay attention!) 
            The above mentioned id selector: $ ( " #id " ) 
            tag selector: $ ( " Tagname " ) 
            class selector: $ ( " .className " ) 
            all: $ ( " * " ) 
            with the use of: $ ( " div.c1 " ) -> $ ( " div " ) .filter ( " .c1 " ) // find there is a div tag c1 class class 
            combined selector: $ ( " # the above mentioned id, Tagname,.className")
            
        2. level selector: $ ( " the XY " ) -> $ ( " the X- " ) .find ( " the p- " ) // All descendants of Y x 
                            $ ( " the X-> the y- " ) // the X-all son 
                            $ ( " x + Y " ) // find all immediately behind the x Y 
                            $ ( " x ~ Y " ) // after all brother x Y
         . 3 filter. 
            : first             // first 
            :            last             // last 
            : EQ (index)         // find the specified index element 
            : the even              // starts from 0 the value is an even index matching elements 
            : ODD             // from an index value of zero matches odd elements 
            : gt (index )         // match elements is greater than the specified index 
            : lt (index)         // matching element is smaller than the specified index 
            : not () // Yi is removed from the foregoing results not find that match the criteria 
            : has ()             // from offspring Looking specified element
            
         4 . operation style 
            attribute selector (form) 
                $ ( " INPUT [type = 'Submit'] ") Is equivalent to $ ( " : the Submit " ) 
                : text 
                : password 
                : File 
                : Radio 
                : the CheckBox 
                : the Submit 
                : the RESET 
                : the Button 
            form object properties 
                : Enabled 
                : Disabled             // such as input box is disabled 
                : the checked             // Note that if multiple species default selection box, only need to select the input type, it would look like this $ ( " input: the checked " ) 
                : the selected         
            operating class
                 1 . addClass ()
                 2. RemoveClass ()
                 3. HasClass ()
                 4 . ToggleClass () 
            Filter
                 1 . To find the next element 
                    $ ( " # L2 " ) .next () 
                    $ ( " # L2 " ) .nextAll () // remaining at the same level tag 
                    $ ( " l1 # " ) .nextUntil ( " # l3 " ) // from behind l1 start looking until l3 stop, but does not include l3
                 2 . Looking on an element 
                    $ ( " # l3 " ) .prev () 
                    $ ( " # L3 ) .prevAll ()" 
                    $ ( " # L3 " ) .prevUntil ( " # L3 " )
                 3 . Father elements 
                    $ ( " # L2 " ) .parent () 
                    $ ( " # L2 " ) .parents () // has been found HTML 
                    $ ( " L2 # " ) .parentsUntil ( " HTML " ) // always looking until html, do not include HTML
                 4 . the son and brother of elements 
                    $ ( " # L2 " ) .children ()
                    $ ( " # L2 " ) .siblings () 
                
problems arise JQuery: 
    $ IS  not defined: indicating the occurrence of the first import JQuery JQuery issue 
    
# left menu JQuery 
    <DOCTYPE HTML!> 
    <HTML lang = " EN " > 
    <head > 
        <Meta charset = " UTF-. 8 " > 
        <title> the title </ title> 
        <style> 
            .menu { 
                width: by 150px; 
                border: 1px Solid darkgrey; 
            } 
            .Item - title { 
                height:30px; 
                text - align = left: Center;
                line-height: 30px;
                background-color: green;
                color:darkblue;
                border-bottom:1px dotted black;
            }
            .item-body{
                background-color: greenyellow;
            }
            .hide{
                display:none;
            }
        </style>
    </head>
    <body>
    <div class="menu">
        <div class="item">
            <div class="item-title">菜单一</div>
            <div class="item-body hide">
                <div>内容一</div>
                <div>内容二</div>
                <div>内容三</div>
            </div>
        </div>
        <div class="item">
            <div class="item-title"class
            <div> Menu Two </ div>= " Item-body hide "> 
        </ div>
                <div> a contents </ div> 
                <div> Content of </ div> 
                <div> three contents </ div> 
            </ div> 
        </ div> 
        <div class = " Item " > 
            <div class = " item- title " > menu three </ div> 
            <div class = " Item-body hide " > 
                <div> SUMMARY a </ div> 
                <div> content of </ div> 
                <div> SUMMARY three </ div> 
            </ div >
    </div>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(".item-title").click(function () {
                $(this).next().toggleClass("hide").parents().siblings().find("item-body").addClass("hide");
        })

    </script>
    </script>
    </body>
    </html>
    
    
#弹出框JQuery
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta http-equiv="content-Type" charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <title>Title</title>
        <style>
            .cover {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0,0,0,0.4);
                z-index: 99;
            }
            .modal {
                width: 700px;
                height: 400px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -350px;
                margin-top: -200px;
                background-color: white;
                z-index: 100;
            }
            .close {
                float: right;
                margin-right: 15px;
                margin-top: 10px;
                font-size: 16px;
            }
            .hide {
                display: none;
            }
        </style>
    </head>
    <body>

    <button id="b1">点我弹出</button>
    <div class="cover hide"></div>
    <div class="modal hide">
        <span class="close" id="s1">x</span>
    </div>

    <script src="jquery-3.3.1.min.js"></script>
    <script>
        var b1Ele = $("#b1")[0];

        var $coverEle = $(".cover");
        var $modalEle = $(".modal");

        b1Ele.onclick=function (ev) {
            $coverEle.removeClass("hide");
           $modalEle.removeClass("hide");
        };

        var s1Ele = document.getElementById("s1");
         s1Ele.onclick=function (ev) {
           $coverEle.addClass("hide");
            $modalEle.addClass("hide");
        }
    </script>
    </body>
    </html>