anglejsでのjqliteの理解と操作
Understanding Operation Jqlite Angularjs
私がangularjsについて最初に知ったとき、それが組み込みの軽量jquery：jqLiteを持っていることを知っていました。当時、私はjQueryに戸惑うことがよくありましたが、実際には異なっていました。 jqLiteでは、角度要素はangular.element（param）を介して取得されます。その関数はjqueryの$（）に似ていますが、特定の違いがあります。 $（）では、要素はさまざまなセレクターを介して選択されますが、angular.elementメソッドには2つのパラメーターしかありません。1つはDom要素で、もう1つは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’))
角度element（）メソッドの使用について詳しく説明します。
jqLiteAPIリファレンス
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がページに表示されることを検出すると、jqLiteの代わりにこのjQueryを使用します。
参照栗を使用する
- シンプルな太字フォント
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 - Kobe Bryant
- Tim Duncan
- Tracy McGrady
- 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) }