הבנה ותפעול של jqlite ב- angularjs

Understanding Operation Jqlite Angularjs



כשנודע לי לראשונה על angularjs, ידעתי שיש בו jquery מובנה קל משקל: jqLite. באותה תקופה התבלבלתי לעתים קרובות מ- jQuery, אך הם היו שונים באמת. ב- jqLite, האלמנט הזוויתי מתקבל באמצעות angular.element (param). הפונקציה שלה דומה ל- $ () ב- jquery, אך ישנם הבדלים מסוימים. ב- $ (), נבחרים אלמנטים באמצעות סלקטורים שונים אך לשיטת angular.element יש רק שני פרמטרים, האחד הוא אלמנט Dom והשני הוא האם מחרוזת הדומה לאלמנטים ב- html. (לפרטים עיין בערמון התחתון - פעולת DOM)

For example angular.element(‘
    ’) The following will not work: var email = angular.element(‘myId’) //Invalid If you want to get the element by id, you need to use this method var email=angular.element(document.getElementById(‘myId’))

    הסבר את השימוש בשיטת אלמנט זוויתי () בפירוט:

    874326-20170703153820190-1139743507.png



    874326-20170703153846894-708904818.png



    הפניה ל- API של jqLite

    jqLite אינו jQuery, אלא פשוט יישום קל של jQuery המכיל את רוב הפונקציות הנפוצות. באופן כללי, בפרויקט, אין צורך להסתמך על jQuery, וזה מספיק כדי ליישם פונקציות כלליות באמצעות jqLite.



    addClass() //Add the specified style class name for each matched element after() inserts the content specified by the parameter after each element in the set of matched elements as its sibling node append() //Insert the parameter content at the end of each matched element attr() //Get the attribute value of the first element in the set of matched elements bind() // Bind an event handler to an element children() //Get the child elements of each element in the set of matched elements, and the selector selectively filters clone() //Create a deep copy of the set of matched elements contents() //Get the child elements of each element in the set of matched elements, including text and comment nodes css() //Get the value of the style attribute of the first element in the set of matched elements data() //Store any relevant data on the matched element detach() //Remove all matched elements from the DOM empty() //Remove all child nodes of matching elements in the collection from the DOM eq() // Reduce the set of matched elements to which element of the specified index find() // Filter through a selector, jQuery object, or element to get the descendants of each element in the set of currently matched elements hasClass() //Determine whether any matching element has a given (style) class html() //Get the HTML content of the first matching element in the collection next() //Get the element set of the next sibling element of each element in the set of matched elements. If a selector is provided, this element will only be returned if the sibling element that follows satisfies the selector on() // Bind one or more event handlers to the selected element off() //Remove an event handler one() //Add a processing function for the event of the element. The processing function is executed at most once for each event type on each element parent() //Get the parent element of each element in the set of matched elements, and an optional selector can be provided prepend() //Insert the parameter content in front of each matched element (inside the element) prop() //Get the property value of the first element in the set of matched elements ready() //When the DOM is ready, specify a function to execute remove() //Remove the set of matched elements from the DOM. (Also remove the event and jQuery data on the element.) removeAttr() //Remove an attribute from each element in the set of matched elements (attribute) removeClass() //Remove one, multiple or all styles of each matched element in the collection removeData() //Remove the bound data on the element replaceWith() //Replace all matched elements in the collection with the provided content and return the collection of deleted elements text() //Get the combined text of each element in the set of matched elements, including their descendants toggleClass() //Add or delete one or more style classes on each element in the set of matched elements, depending on whether this style class exists or the value switch attribute. That is: if it exists (does not exist), delete (add) a class triggerHandler() //Execute all handlers attached to the element for an event unbind() //Remove a previously attached event handler from the element val() //Get the current value of the first element in the set of matched elements wrap() //Wrap an html element outside each matched element

    למעשה, Angular אינה מסתמכת על jQuery. כאשר Angular מזהה כי jQuery מופיע בדף שלך, הוא ישתמש ב- jQuery זה במקום ב- jqLite.

    השתמש בערמוני התייחסות

    1. גופן פשוט מודגש
    jqLite test angular.module('app', []) .directive('demoDirective',demoDirective) .controller('defaultCtrl',defaultCtrl) function demoDirective(){ return function (scope, element, attrs) { var items = element.children() for (var i = 0 i NBA stars
    1. Kobe Bryant
    2. Tim Duncan
    3. Tracy McGrady
    1. מניפולציה של DOM
    function button1(){ alert(angular.element(' test html element content as a parameter ').html()) } //Use DOM elements as parameters function button2(){ var a = document.getElementById('myId') alert(angular.element(a).html()) }
    Use html string as parameter
    Use DOM elements as parameters

    ### לבסוף, הנה ביצת פסחא:

    div1 div2

    Child elements



    Child element 1

    p1

    p2

    p3

    p4

    p5

    span1 //bind()-Bind an event handler to an element //data()-store any relevant data on the matched element //on()-bind one or more event handlers to the selected element //off()-remove an event handler //one()-Add a handler for the event of the element. The processing function is executed at most once for each event type on each element //ready()-When the DOM is ready, specify a function to execute //removeData()-Remove the bound data on the element //triggerHandler()-execute all handlers attached to the element for an event //unbind()-Remove a previously attached event handler from the element //addClass()-Add the specified style class name for each matched element angular.element(document.querySelectorAll('.test')).addClass('asd') //after()-insert the content specified by the parameter after each element in the set of matched elements as its sibling node angular.element(document.querySelector('.test')).after('

    I added it through after()

    ') //append()-insert the parameter content at the end of each matched element angular.element(document.querySelector('.test')).append('

    I added it through append()

    ') //attr()-Get the value of the attribute of the first element in the set of matched elements console.log(angular.element(document.querySelector('.test')).attr('class')) //children()-Get the child elements of each element in the set of matched elements, and the selector selectively filters console.log(angular.element(document.querySelector('.test1')).children()) //clone()-Create a deep copy of the set of matched elements angular.element(document.querySelector('.test')).append(angular.element(document.querySelector('.test1')).clone()) //contents()-Get the child elements of each element in the set of matched elements, including text and comment nodes console.log(angular.element(document.querySelector('.test2')).contents()) //css()-Get the value of the style attribute of the first element in the set of matched elements console.log(angular.element(document.querySelector('.test3')).css('color')) //detach()-remove all matched elements from the DOM angular.element(document.querySelector('.test1 p')).detach() //empty()-Remove all child nodes of matching elements in the collection from the DOM angular.element(document.querySelector('.test2')).empty() //eq()-Reduce the set of matched elements to which element of the specified index console.log(angular.element(document.querySelectorAll('.test3 p')).eq(2)[0].innerHTML) //find()-Filter by a selector, jQuery object, or element to get the descendants of each element in the currently matched element set console.log(angular.element(document.querySelector('.test3')).find('span')[0].innerHTML) //hasClass()-Determine whether any matching element has a given (style) class console.log(angular.element(document.querySelector('.test3')).hasClass('test4')) //html()-Get the HTML content of the first matching element in the collection console.log(angular.element(document.querySelector('.test2')).html()) //next()-Get the element set of the next sibling element of each element in the set of matched elements. If a selector is provided, this element will only be returned if the sibling element that follows satisfies the selector console.log(angular.element(document.querySelector('.test3 .p2')).next()[0].innerHTML) //parent()-Get the parent element of each element in the set of matched elements, and an optional selector can be provided console.log(angular.element(document.querySelector('span')).parent()) //prepend()- insert the parameter content in front of each matched element (inside the element) angular.element(document.querySelector('.test')).prepend('

    I added it through prepend()

    ') //prop()-Get the property value of the first element in the set of matched elements angular.element(document.querySelector('.input')).prop('checked', true) //remove()-Remove the set of matched elements from the DOM. (Also remove the event and jQuery data on the element.) angular.element(document.querySelector('.test2')).remove() //removeAttr()-Remove an attribute from each element in the set of matched elements (attribute) angular.element(document.querySelector('.test2')).removeAttr('data-value') //removeClass()-Remove one, multiple or all styles on each matched element in the collection angular.element(document.querySelector('.test3')).removeClass('test4') //replaceWith()-Replace all matched elements in the collection with the provided content and return the collection of deleted elements angular.element(document.querySelector('.test1')).replaceWith('

    replaceWith()Replaced content

    ') //text()-Get the combined text of each element in the set of matched elements, including their descendants console.log(angular.element(document.querySelector('.test')).text()) //toggleClass()-Add or delete one or more style classes on each element in the set of matched elements, depending on whether this style class exists or the value switch attribute. That is: delete (add) a class if it exists (does not exist) angular.element(document.querySelector('.test1')).toggleClass('test1') angular.element(document.querySelector('.test2')).toggleClass('test1') //val()-Get the current value of the first element in the set of matched elements console.log(angular.element(document.querySelector('.input1')).val()) //wrap()-wrap an html element outside each matched element angular.element(document.querySelector('.test1')).wrap(' ')

    בפיתוח פרויקטים, בדרך כלל ללא שימוש ב- jquery, angular.element () בדרך כלל נעטף ברחבי העולם

    לדוגמה, זה:

    var $ = function(ele){ if(typeof ele == 'string'){ ele = document.querySelectorAll(ele) } return angular.element(ele) }