Press "Enter" to skip to content

Getting Started with Jquery Basic

For front-end developers scripting with JavaScript or JQuery is essential and working on it is just a fun. JQuery entirely works on DOM (Document Object Model) element. So lets start with idea, what is document object model

When the browser loads your html document, each tag in your markup get translated into an HTMLElement and the browser builds a Document Object Model (DOM) tree of the markup.

The document object provides an important method named getElementById. By this method you can access any element in html page.

$(document).ready() , its detect the state of readiness for you to executes javascript code.

$(document).ready(function() {

Instead of $(document).ready() we can use

$(function() {

When the page is loaded it alerts that a page is now ready to execute the javascript.

Selecting Elements

The most basic concept of jQuery is to “select some elements and do something with them.”
Suppose we have:

<div id=”maindiv”>
<div class=”myClass”>ABC</div>
<input type=”text” id=”id1” name=” myAttr” val=”val1”>

A:-> Selecting elements by ID
$(“#maindiv”); // note IDs must be unique per page

B:-> Selecting elements by class name

C:-> Selecting elements by attribute

D:-> Selecting elements by compound CSS selector
$(“#contents ul.people li”);

And many more you can find from

From the above example:

Getting value of input :  $(“#id1”).val();
Getting text of div : $(“#.myClass”).text();
Adding CSS to main div: $(“# maindiv”). css({“border”,:”1px solid”, “background-color”: ‘red”, “font-weight’ : ‘bolder”})
You can also add class: : $(“# maindiv”).addClass(“xyz”); // xyz is Css class name
Append  “alt” attribute to image <img src=”snap.jpg” id=”img”>
$(“#img”). attr(“alt”, “My Photo”);

Interaction with Ajax (Asynchronous JavaScript and XML) via Jquery:

AJAX allows browsers to communicate with the server without requiring a page reload and jquery provides ajax support to minimize the painful coding, there are number of methods to send a request to the URL such as $.ajax(), $.get(), $.getJSON(), $.post(), and $().load() .

Simple if we use $.ajax,  there are some set of options to configure.

type: methodType,  //type of request  GET or POST
url: strUrl, // url to which the request is send
data: strData, // data to be sent to server
timeout: request_timeout, // timeout for request
success: function(return_data){// function to be called if the request succeeds
alert(return_data); // return data
error: function(){  //function to be called if the request fail

This is all basics jquery basics, many more to come…any comments would be highly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *