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() {
 alert(‘ready’);
 });

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

$(function() {
 console.log('ready!');
});

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”>
</div>

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

B:-> Selecting elements by class name
$(“.myClass”);

C:-> Selecting elements by attribute
$(“input[name=myAttr]”);

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

And many more you can find from http://api.jquery.com/category/selectors/

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”})
OR
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.

$.ajax({
 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
 alert(“error”);
 }
});

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 *

Time limit is exhausted. Please reload the CAPTCHA.



nike tn pas cher tn pas cher peuterey outlet piumini peuterey outlet spaccio peuterey outlet peuterey outlet piumini peuterey outlet spaccio peuterey outlet hogan outlet scarpe hogan outlet hogan outlet online peuterey outlet piumini peuterey outlet spaccio peuterey outlet hogan outlet scarpe hogan outlet hogan outlet online hogan outlet scarpe hogan outlet hogan outlet online doudoune moncler pas cher moncler pas cher doudoune moncler hogan outlet scarpe hogan outlet hogan outlet online nike tn pas cher tn pas cher