Due to JQuery has been removed from the project, several changes had been made to adapt JQuery methods to JQLite. Many of the JQuery methods like first(), not(), width(), height(), outerWidth(), outerHeight() are not longer supported, and others like .element(), .on(), find() don't allow to find elements by tag name / CSS selector. Below are listed the actions to be taken to use JQLite properly. The supported methods by JQLite are listed in the angular documentation: https://docs.angularjs.org/api/ng/function/angular.element#angular-s-jqlite

angular.element()

This method doesn't find elements by tag name / CSS selector anymore. So the properly way to use it is calling to standard method document.querySelector, to get one element or document.querySelectorAll, to get all elements that matches the query. Keep in mind that document.querySelector returns null if no element matches the query. Example:

BEFORE: var infscroll = angular.element('.eb-infinite-scroll');
        if (infscroll.length > 0) {
          infscroll.height('calc(100% - ' + infscroll.position().top + 'px)');

AFTER:  var infscroll = document.querySelector('.eb-infinite-scroll');
        if (infscroll) {
          infscroll.style.height = 'calc(100% - ' + infscroll.offsetTop + 'px)';
        }


BEFORE: var results = angular.element('#eb-results');

AFTER:  var results = angular.element(document.querySelectorAll('#eb-results'));

Important Note! : do not use 'nth-child' selector, because it doesn't work properly and is not supported by IE8.

.map()

This method is no longer supported. A new helper called ebJsExtensionsHelper was created to be used in these cases. It contains the method map(arr, fn).  Example:

BEFORE:   ebLinks.setDirect(angular.element.map(response.direct || [], function(item) {
AFTER:    ebLinks.setDirect(ebJsExtensionsHelper.map(response.direct || [], function(item) {
           return {url: item.trackable_url};
          }));

.find(), .not(), next()

.find() method is limited to lookups by tag name, .next() doesn't support selectors and .not() method is not available anymore. The correct way is to use  document.querySelector with angular.element method. Example:

BEFORE: var allDocs = angular.element('#eb-results').find('.eb-result').not('.ng-leave');

AFTER:  var allDocs = angular.element(document.querySelector('#eb-results .eb-result:not(.ng-leave)'));

.first(), .last()

This method is not available in JQLite. The correct way is to use  document.querySelector with angular.element method. Do not use 'nth-child' selector because it doesn't work properly and is not supported by IE8. Example:

BEFORE: var element = angular.element(container + ' .eb-motion-grid-item').first();

AFTER:  var element = angular.element(document.querySelectorAll(container + ' .eb-motion-grid-item')[0]);


BEFORE: var element = angular.element(container + ' .eb-motion-grid-item').last();

AFTER: var elements = document.querySelectorAll(container + ' .eb-motion-grid-item');
       var element = angular.element(elements[element.length-1]);

.outerWidth(), .outerHeight()

These methods are not available in JQLite. A new helper called ebJsExtensionsHelper was created to be used in these cases. It contains the methods outerWidth(element, withMargin) and outerHeight(element, withMargin).  Example:

BEFORE: var articleWidth = element.outerWidth(true);
        var articleHeight = element.outerHeight(true);

AFTER: var articleWidth = ebJsExtensionsHelper.outerWidth(element,true);
       var articleHeight = ebJsExtensionsHelper.outerHeight(element,true);

.width(), .height()

These methods are not available in JQLite. The correct way is to use  the standard html attributes clientWidth and clientHeight. Example:

BEFORE: var width = element.width();
        var height = element.height();

AFTER: var width = element.clientWidth;
       var height = element.clientHeight;

.width(value), .height(value)

These methods are not available in JQLite. Since these methods actually modifies the css with and height values, the correct way is to use  the standard html style attribute and width and height values. Example:

BEFORE:  infscroll.height('calc(100% - 100px)');
AFTER:   infscroll.style.height = 'calc(100% - 100px)';

.position()

This method is not available in JQLite. The html attributes .offsetParent, .offsetLeft and .offsetTop must be used instead. Example:

BEFORE: infscroll.height('calc(100% - ' + infscroll.position().top + 'px)');
AFTER:  infscroll.height('calc(100% - ' + infscroll[0].offsetTop + 'px)');

.scrollTop(), .scrollLeft()

These methods are not available in JQLite. The html attributes .scrollTop and .scrollLeft must be used instead. Example:

BEFORE:   if (ebState.getTop() > 0 && scrolledElement.scrollTop() === 0) {
AFTER:    if (ebState.getTop() > 0 && scrolledElement[0].scrollTop === 0) {

.offset()

This method is no longer supported. A new helper called ebJsExtensionsHelper was created to be used in these cases. It contains the method offset(element).  Example:

BEFORE:  var input = angular.element('#eb-searchField-input');
AFTER:   var input = angular.element(document.querySelector('#eb-searchField-input'));

.bind(), .unbind()

Unless these methods are supported by jQLite, they are deprecated. So the methods .on() and .off() must be used instead.

.click(), .blur(), focus()

To trigger events like click, blur, focus, ... jQLite offers the triggerHandler() method, which receives as parameter the name of the event. Example:

BEFORE:  angular.element(document.querySelectorAll('#eb-searchField-as li.eb-as-selected')).click();
AFTER:   angular.element(document.querySelectorAll('#eb-searchField-as li.eb-as-selected')).triggerHandler('click');

.show(), .hide()

These method are not available in JQlite, so is necessary to use the style.display attribute of the html element to achieve the effect. Example:

BEFORE:  angular.element('#eb-auto-suggest').show();
         angular.element('#eb-auto-suggest').hide();
AFTER:   angular.element('#eb-auto-suggest')[0].style.display = '';
         angular.element('#eb-auto-suggest')[0].style.display = 'none';