What does JQuery mean?
It is simply a light weight javascript library through which we can perform actions like “DOM Elements” selection, Event handling, Animation effects, Ajax calls etc with minimal code. In short we can say ” write less,do more” with JQuery.
Why should we use JQuery?
- Makes it easy to use javascript with minimal lines of code in websites.
- Multiple browser Compatability i.e It works in almost 25+ browsers (IE,FireFox,Chrome,Safari,Netscape) unlike Javascript which behaves differently on differnt browsers.
- There are many plugins available for programming ease.
- It uses a chaining mechanism for DOM elements selection while developing code, which makes it more easy to write and understand in websites.
How can we use JQuery in .NET?
It is a good news to hear that Microsoft supports JQuery with intellisense for developing websites. Below lines shown how to use JQuery in asp.net.
Step 1: Jquery Reference
After downloading JQuery plugin from JQuery website ( https://jquery.com/ )
(or)
We can make direct reference from Google as Google supports Jquery api.
Step 2: JQuery Intellisense for .NET
Basic Sample:
Example 1 – Display an alert box on Button click using jQuery in Asp.Net
Add a Button element to the page as shown below:
Now in order to tell the browser to perform some action using jQuery as soon as the document is ready or loaded, use this block:
Add your code in the function block
The same can be done in javascript like below
From the above two examples shown, with javascript we have to create function for button and attach that function in DOM declaration where as in JQuery we can directly call the event code for button i.e it is not needed to attach the function in dom declaration.
Basic selectors in JQuery for selecting Dom elements in web page:
| Selector | Example | Operation |
| * | $(“*”) | All Elements in a page |
| #id | $(“#btnSubmit”) | The element with id=btnSubmit |
| .classname | $(“.title”) | The element with classname=title |
| #id1,#id2,#id3 etc | $(“#btnSubmit,#btnAdd,#btnCancel”) | All Elements with id=btnSubmit or id=btnAdd or id=btnCancel |
| .classname1,.classname2,.classname3 | $(“.title,.head,.body”) | All Elements with classname=title or classname=head or classname=body |
| Element | $(“div”) | All
Elements in page
|
| Element1, Element2, Element3 | $(“div,p,h1”) | All
,and
elements |
| parent > child | $(“div > p”) | All elements that are a direct child of a
element
|
| [attribute] | $(“[href]”) | All elements with a href attribute |
| [attribute=value] | $(“[href=’default.htm’]”) | All elements with a href attribute value equal to “default.htm” |
| :input | $(“:input”) | All input elements |
| :text | $(“:text”) | All elements with type=text |
Jquery Tip for Asp.Net Developers:
Element Selection with ID:
$(“#btnSubmit”) or $(‘#<%= btnSubmit.ClientID %>’) The element with id=btnSubmit in normal aspx page with out master pages.
$(“input[id$=btnSubmit”) The element with id=btnSubmit in normal aspx page as well as master pages.
These are a few basic tips on jquery which i like to share with the developers. More information on Jquery and optimization techinques to be coming soon.