Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding jQLite or jQuery Lite

  Author : Shailendra Chauhan
Posted On : 26 Dec 2014
Total Views : 11,094   
Updated On : 26 Sep 2016
 

jQLite is a subset of jQuery that is built directly into AngularJS. jQLite provides you all the useful features of jQuery. In fact it provides you limited features or functions of jQuery.

By default AngularJS use jQLite which is the subset of jQuery. If you want to use jQuery then simply load the jQuery library before loading the AngularJS. By doing so, Angular will skip jQLite and will started to use jQuery library.

Here is a table of supported jQuery methods by jQLite.

jQuery Method
Limitation, if any
addClass()
after()
append()
attr()
bind()
Does not support namespace, selectors and eventData
children
Does not support selectors
clone()
contents()
css()
data()
detach()
empty()
eq()
find()
Limited to lookups by tag name
hasClass()
html()
text()
Does not support selectors
on()
Does not support namespace, selectors and eventData
off()
Does not support namespace, selectors
one()
Does not support namespace, selectors
parent()
Does not support selectors
prepend()
prop
ready()
remove
removeAttr()
removeClass()
removeData()
replaceWith()
toggleClass()
triggerHandler()
Passes a dummy event object to handlers
unbind()
Does not support namespace
val()
wrap()

Accessing jQLite or jQuery with AngularJS

jQuery lite or the full jQuery library if available, can be accessed via the AngularJS code by using the element() function in AngularJS. Basically, angular.element() is an alias for the jQuery function i.e.

angular.element() === jQuery() === $()
<html>
<head>
 <script src="lib/angular.js"></script>
 <script type="text/javascript">
 var app = angular.module('app', []);
 app.controller("mainCtrl", function ($scope, $element) {
 $scope.clickme = function () {
 var elem = angular.element(document.querySelector('#txtName'));
 console.log(elem.val())// console the value of textbox
 };
 });
 </script>
</head>
<body ng-app="app">
 <div ng-controller="mainCtrl">
 <input type="text" id="txtName" value="Shailendra Chauhan" />
 <button type="button" ng-click="clickme()">Click me</button>
 </div>
</body>
</html>
What do you think?

I hope you will enjoy the jQlite with AngularJS while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
3 AUG
ASP.NET Core with Angular4 Development (Online)

07:00 AM - 9:00 AM IST(+5:30 GMT)

Know More
29 JUL
Angular2 and Angular4 Development (Online)

08:00 AM - 10:00 AM IST(+5.30 GMT)

Know More
29 JUL
ASP.NET MVC with Angular4 Development (Classroom)

09:30 AM - 11:00 AM IST (+5:30GMT)

Know More
29 JUL
Xamarin Forms : Build Cross-platform Apps (Classroom)

09:00 AM - 11:00 AM IST(+5:30 GMT)

Know More
26 JUL
ASP.NET MVC with Angular4 Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

Know More
22 JUL
MEAN Stack 2 Development (Classroom)

04:00 PM - 05:30 PM IST(+5:30GMT)

20 JUL
Hadoop Development cum Administration (Online)

07:00 AM - 09:00 AM IST(+5:30 GMT)

17 JUL
NodeJS with Angular4 Development (Online)

08:00 PM - 09:30 PM IST(+5.30 GMT)

15 JUL
ASP.NET MVC with Angular4 Development (Online)

03:30 PM - 05:30 PM IST(+5.30 GMT)

1 JUL
ASP.NET MVC with Angular4 Development (Classroom)

08:00 AM - 09:30 AM IST

1 JUL
MEAN Stack 2 Development (Classroom)

11:00 AM - 12:30 PM IST(+5:30 GMT)

30 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

09:30 PM - 11:00PM IST(+5:30GMT)

6 JUN
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

20 MAY
NodeJS with Angular4 Development (Classroom)

05:00 PM - 07:00 PM

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+