• Jquery for Beginners – Introduction to JQuery, JQuery Selectors

    Posted on June 29, 2012 by in Jquery, Other Programming

    What is JQuery

    Before we actually go ahead and learn basics of JQuery, Let us learn what JQuery is and what is used for. JQuery is a javascript library designed to simplify the client-side scripting of HTML, event handling, animating, and Ajax interactions for rapid web development. Listed below are few advantages of using Jquery over code written in traditional Javascript

    Overcoming Cross Browser Issues

    Each browser has it’s own way handling DOM manipulations, animations etc, In traditional javascript developer had to write the code to handle the cross browser issues, Jquery eliminates this problem and does all the work for you.

    Unobtrusive JavaScript

    Another compelling reason to use a JQuery is that Jquery allows you to include JavaScript in your pages unobtrusively, thus keeping javascript code separate from the XHTML and CSS.

    Jquery also makes the code much easier to read, and more complex traversing of elements much easier and faster, which you see in this article and series of articles that follow.

    Starting of with JQuery

    First thing you need to do to use JQuery is to include the library in your code. We can do it a couple of ways. Download the latest jquery library here. It is better that you download the minified version which will reduce the load on the server. Once downloaded, Place it in JS or Scripts folder in your project, Then copy and paste the below code in head section of your page

      <script type="text/javascript" src="pathtofolder/jquery-1.7.2.min.js">
    

    You need to change the pathtofolder to the path of the Script folder you have placed Jquery at and also name of the actual js file might change with the version you have downloaded, so make sure file name matches the one you downloaded.

    You can you also include Jquery by linking to Google or Microsoft CDN, you can below code to do so.

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
       <script>
    

    Now with JQuery included, let us write some code to see the magic of jquery.

    A Simple Example to start with

    Almost all the code written in Jquery is written in document.ready handler. The document.ready ensures the code is not run until the DOM is loaded and ready,his confirms that any elements being accessed are actually in existence, so the script won’t return any errors.

        <script type="text/javascript">
            $(document).ready(function () {
                //write your code here
                alert("Welcome.. this is my first Jquery Code");
            });
        </script>
    

    or you can use it’s equivalent minified version below

        <script type="text/javascript">
            $(function() {
                //write your code here
                alert("Welcome.. this is my first Jquery Code");
            });
        </script>
    

    Accessing/Selecting Elements with JQuery

    Borrowing from CSS, and then adding its own, jQuery offers a powerful set of tools for matching/selecting a set of elements in a document. Here are few examples of the Selectors, as a general rule you would have alias of JQuery, generally a $ symbol, followed by parenthesis and the selector within single or double quotes like $(“#id”) or $(“.class”)

    Accessing elements with an ID – jQuery(‘#elementid’) or $(‘#elementid’)

    If you know the ID of an element, you can access the element by using the # symbol before the ID like $(“#ELEMENTID”), where ELEMENTID is the id of the element. Below code shows you how to get the value of textbox with txtName as the ID.

           $(document).ready(function () {
                //write your code here
                var name = $("#txtName").val();
            });
    

    $(“#txtName”) is equivalent of javascripts document.getElementById(“txtName”). Please note that JQuery assumes that each ID is used only once per page, if there are multiple items with same ID, which should not be the case ideally, Jquery returns the first matched element.

    Accessing elements with a Class – jQuery(‘.elementid’) or $(‘.elementid’)

    If you want to get the all the elements with a particular ClassName, for example if you have class name “mtext” for all your text boxes, you can access them using the below code

           $(document).ready(function () {
                //write your code here
                var seltextboxes = $(".mtext");//gets all the elements with the class mtext
                var elements = $("p.mpara");// gets all p tags with class mpara
            });
    

    $(“.mtext”) is equivalent of document.getElementsByClassName(“mtext”) in traditional javascript and $(“p.mpara”) is equivalent of document.getElementsByTagName(“p”).getElementsByClassName(“mtext”). This is one of the examples where you can see how jquery beautifies javascript code.

    Please click here for a working example of class selector

    Accessing elements with a Name – jQuery(‘[name=”txtName”]’) or $(‘[name=”txtName”]’)

    If you want to get the all the element(s) with a Name, in case multiple elements have same name (for example radio buttons), multiple elements are returned

           $(document).ready(function () {
                //write your code here
                var elements = $('[name="txtName"]');// gets all elements with name txtName
            });
    

    Jquery also allows you to make use of wild card characters to make the search, for example you can use ^ to search elements that start with a value, $ to search for elements that end with a value. See Examples Below

           $(document).ready(function () {
                //write your code here
                var elements = $('[name^="txt"]');// gets all elements that have name starting with txt
                elements = $('[name$="txt"]');// gets all elements that have name ending with txt
                elements = $('[name*="txt"]');// gets all elements that have name containing txt anywhere in the string.
                elements = $('[name!="txtName"]');// gets all elements that donot have name as txtName
            });
    

    Please click here for a working example of name selector

    Please read Part II of the article of for description of more selectors.

    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply