jQuery Basics

jQuery Introduction
The files needed to run a jQuery function can be downloaded from the URL mentioned below:

There are actually two versions of the file that is available, the first one id the minified and compressed version, jquery-1.10.1.min.js, which is basically used for the production environment and the other is the full version, uncompressed and readable, which is used for the development environment.

If somebody does not want to download the file, they can use it from the CDN (Content Delivery Network) provided both by Google and Microsoft, the details are here under:
  • Google - http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
  • Microsoft - http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js
Note:  If you look at the Google URL above - the version of jQuery is specified in the URL (1.10.1). If you would like to use the latest version of jQuery, you can either remove a number from the end of the version string (for example 1.10), then Google will return the latest version available in the 1.10 series (1.10.0, 1.10.1, etc.), or you can take it up to the whole number (1), and Google will return the latest version available in the 1 series (from 1.1.0 to 1.10.1).

jQuery Syntax
The general syntax is $(selector).action(); where
  • $ is to access the jQuery
  • selector is to find/query HTML elements
  • action() is to a jQuery action to be performed on the elements
$(document).ready(function() {
// jQuery code here
});
jQuery Selectors
There are many different ways by which one can select/query an element, some of the types that are there are as follows:
  • element selector - $("p")
  • id selector - $("#btnSubmit")
  • class selector - $(".cssclass")
  • all elements - $("*")
  • current element - $(this)
  • particular element with a class - $("p.cssclass")
  • first matching element - $("p:first")
A list of other selectors can be found here http://www.w3schools.com/jquery/jquery_ref_selectors.asp

jQuery Event Methods
Every element that is there in the DOM an event can be attached to it, it can be said that an event is a response to the action done by the user on a particular page element. For e.g.
$("p").click(function() {
});
A list of other event methods can be found here http://www.w3schools.com/jquery/jquery_ref_events.asp

jQuery DOM (Document Object Model) Manipulation
The various methods that are available for the manipulation of the DOM are as follows:
  • $("#btnShow").click(function() {
    alert($("#lblName").text());
    });
    This will return the text displayed within the element
  • $("#btnShow").click(function() {
    alert($("#lblName").html());
    });
    This will return the HTML code for the text displayed within the element
  • $("$btnShow").click(function() {
    alert($("txtName").val());
    });
    This will return the value within the input elements
  • $("#btnShow").click(function() {
    alert($("a").attr("href"));
    });
    This will allow the user to get the attributes defined within an element
A list of other DOM methods can be found here http://www.w3schools.com/jquery/jquery_ref_html.asp

jQuery Traversing
By traversing means moving through the DOM elements from a single point it can be either up, down, left or right. The various methods that are available are as follows:
  • $("span").parent();
    This returns the direct parent of the element
  • $("span")parents();
    This returns all the parents of the element till the root element of the document
  • $("span").parents("ul");
    This returns all the parents of the element which are of the ul type
  • $("span").parentUltil("div");
    This returns all the parents for the element until the element div
  • $("div").children();
    This returns all the direct child of the element
  • $("div").children("p.class");
    This returns all the direct child of the element using the css class named
  • $("div").find("span");
    This will search and return all the child elements starting with the span tag
  • $("div").siblings();
    This returns all the sibling elements of the element
  • $("div").next();
    This returns the next sibling of the element
  • $("div").nextAll();
    This returns all the siblings next to the element
  • $("div").nextUntil("p");
    This returns all the siblings of the element till the p element
  • $("div").first("p");
    This returns the first p tag under the div
  • $("div").last("p");
    This returns the last p tag in the div
  • $("p").eq(0);
    This return the p tag with the specified index number
  • $("p").filter(".intro");
    This will return the p tag with the class intro
  • $("p").not(".intro");
    This will return all the p tags that do not use the intro class
A list of the other DOM methods can be found here http://www.w3schools.com/jquery/jquery_ref_traversing.asp

jQuery No Conflict Method
There might be a situation whereby some other third party software might also be using the same $ sign, in that case there will be a conflict, in order to avert such a situation we can use the method "noConflict", when called we will not be able to use the $ sign any more and will be needed to use the syntax "jQuery" instead.

$.noConflict();
jQuery(document).ready(function() {
});

Comments

Post a Comment

Popular posts from this blog

What is the difference between a Page Layout and Master Page in SharePoint?

A Page Layout is nothing but a template which when used in conjuncture with the Master Page gives the look and feel and contents of the page. Each page layout has an associated content type that determines the kind of content that can be stored on pages based on that page layout. Master Pages and Page Layouts dictate the overall look and feel of your SharePoint site. Master Pages contain controls that are shared across multiple page layouts, such as navigation, search, or language-preference for multilingual sites. Page layouts contain field controls and Web Parts. All page layouts reference a master page that is based on the CustomMasterUrl property of the SPWeb class. The top-level SharePoint Server site for a site collection hosted on SharePoint Server 2010 has a special document library called the Master Page and Page Layout Gallery. All Page Layouts and Master Pages are stored in this document library. Reference: http://blog.beckybertram.com/Lists/Posts/Post...
Read more

Accessing data from SharePoint 2010 to an ASP.NET application

Image
In order to access the SharePoint lists and document libraries data from a native ASP.NET application we need to make use of the web services that have been provided. The full list of the web services available from within SharePoint 2010 can be found here http://www.etechplanet.com/blog/sharepoint-web-services-7c-list-of-all-web-services-available-with-wss-30moss-2007.aspx The steps to access the web service are as follows: Create a native ASP.NET web application Add a reference of the web service Create an object of the web site Pass on to the web service object the credentials using which the access will be authorized Retrieve the results using the appropriate method
Read more

What is the difference between DDL, DML and DCL?

Data Definition Language (DDL) There are called data definition cause they define the data Create - creates objects in the database Alter - alters objects in the database Drop - deletes objects in the database Truncate - deletes all records from the table along with the space Rename - renames objects in the database Data Manipulation Language (DML) These are used for data manipulation Select - selects records from the table Insert - create a new record in the table Update - updates the records in the table Delete - deletes all the records in the table, but the space remains Lock Table - locks a table for controlling data concurrency Data Control Language (DCL) This is used to control the data, that the data that can be accessed by the user based on his privilege Grant - grants users access to the database Revoke - removes the access of the user to the database Transaction Control Language (TCL) This is used to control the changes done by the DML statemets C...
Read more