jquery event object notes

    jQuery element operation

         Set or get the element's inherent attributes

          　　  Obtain

      　　   　　   prop (property name)

         　　   modify

           　　 　　prop (property name, value)

            Get custom properties

            　　　　attr (attribute name)

        　　    Modify custom properties

            　　　　attr (attribute name, value)

<a href="#" index='2'>2</a>

        $(function () {
            $('a').prop('href', 'www.baidu.com')
            console.log($('a').prop('href'));
            console.log($('a').attr('index'));
        })

 

jQuery loop method

    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>

$ ( function () {
             var sum = 0
             var arr = ['red', 'blue', 'green' ] 
            $ ( ".item"). each ( function (i, domEle) {
                 // Callback function first The parameter must be the index number. The index number can specify 
                console.log (i);
                 // The second parameter of the callback function must be the DOM element object 
                // The dom object has no css method 
                $ (domEle) .css ('color' , arr [ i]) 
                console.log (domEle); 
                sum + = parseInt ($ (domEle) .text ()) 
                console.log (sum); 
            }) 
            // loop method 2 
            //Can traverse data, object 
            $ .each ($ (". Item"), function (i, ele) { 
                console.log (i); 

            }) 
        })

 

 

   　　 Create element

    　　Syntax $ ("")

    < ul > 
        < li > </ li > 
    </ ul > 
    < div > I am the first one </ div >

        $ ( function () {
             // Create element 
            var li = $ ("<li> OK </ li>" )
             // Internally add 
            $ ("ul"). append (li) // Internally add and put it at the end of the content面 
            $ ("ul"). Prepend (li) // Add internally and put it at the front of the content 
            // Add externally 
            var div = $ ("<div> I added it later </ div>" ) 
            $ ( "div ") .after (div) // Place it behind the target element 
            $ (" div "). before (div) // Place it in front of the target element 

            // Remove the element 
            // $ (" ul "). remove () // Delete the matching element itself 
            // $ ("ul").empty () // Delete child nodes of matching elements
            $ ("ul"). html ("") // Delete the child nodes of matching elements 
        })

 

 

    jQuery event registration

    　　Event processing on () method

    　　The on () method binds the event handler function of one or more events to the matched element

    <div class="box"></div>

        $(function () {
            // 方法1
            $(".box").on({
                mouseenter: function () {
                    $(this).css("background", 'red')
                },
                click: function () {
                    $(this).css("background", "green")
                }
            })
            // 方法2 
            $(".box").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current")
            })
        })

 

 

    on () method advantage 2

    　　Event delegation can be operated: event delegation is to bind the event originally assigned to the child element to the parent element, that is, delegate the event to the parent element

    <ul>
        <li>1</li>
        <li>2</li>
    </ul>

        $(function () {
            $("ul").on("click", "li", function () {
                alert("ok")
            })
        })

    on () method advantage 3

      　Can bind events to dynamically created elements

    <ol>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>

        $("ol").on("click", "li", function () {
            alert("ok")
        })
        var li = $("<li>我是后来添加的</li>")
        $("ol").append(li)

    Event untied

   　　 off () can remove the event handler added by on ()

        $ ("ol"). off () // This is to remove all events on ol 
        $ (". box"). off ("mouseenter") // This is to remove the mouse passing events on box 
        $ (" .box "). off (" ul "," li ") // Remove event delegation

   

　 jQuery automatic trigger event

        $ ( function () { 
            $ ( ".box"). on ("click", function () { 
                alert ( "ok" ) 
            }) 
            // Automatic trigger 
            // 1, element. Event 
            $ (". box" ) .click ();
             // 2, element. Trigger ("event") 
            $ (". box"). trigger ("click" )
             // 3. $ (". box"). triggerHabdler ("event") is 
            Does not trigger the default behavior of the element $ (". Box"). TriggerHabdler ("click" ) 
        })