Pochopenie a fungovanie jqlite v angularjs

Understanding Operation Jqlite Angularjs



Keď som sa prvýkrát dozvedel o angularjs, vedel som, že má zabudovaný ľahký jquery: jqLite. V tom čase som bol z jQuery často zmätený, ale v skutočnosti boli iní. V jqLite sa uhlový prvok získa pomocou angular.element (param). Jeho funkcia je podobná ako $ () v jQuery, existujú však určité rozdiely. V $ () sa prvky vyberajú pomocou rôznych selektorov, ale metóda angular.element má iba dva parametre, jeden je prvok Dom a druhý je Je reťazec podobný html prvkom. (Podrobnosti nájdete v spodnej časti gaštanu - operácia 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’))

    Podrobne vysvetlite použitie metódy uhlového prvku ():

    874326-20170703153820190-1139743507.png



    874326-20170703153846894-708904818.png



    referencia API jqLite

    jqLite nie je jQuery, je to iba odľahčená implementácia jQuery, ktorá obsahuje väčšinu bežných funkcií. Spravidla sa v projekte nie je potrebné spoliehať na jQuery a stačí implementovať všeobecné funkcie prostredníctvom 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

    V skutočnosti sa Angular nespolieha na jQuery. Keď Angular zistí, že sa na vašej stránke zobrazuje jQuery, použije tento jQuery namiesto jqLite.

    Použite referenčné gaštany

    1. Jednoduché tučné písmo
    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. Manipulácia s 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

    ### Nakoniec je tu veľkonočné vajíčko:

    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(' ')

    Pri vývoji projektu, obvykle bez použitia jquery, je angular.element () všeobecne jednoducho globálne zapuzdrený

    Napríklad toto:

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