Understanding jQuery code in jQuery

How to understand the jQuery code

We are assuming that on every page, following script code is written that reference the jQuery file from the Microsoft CDN. If CDN is not available, it tries to download the file from local server where the page is hosted. Read more about it here.

Ideally below code should be placed undre <head></head> tag.

<!-- START - jQuery Reference --> 
 <script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.3.min.js">
</script> 
 <script type='text/javascript'>//<![CDATA[ 
 if (typeof jQuery == 'undefined') { 
 document.write(unescape("%3Cscript src='/Script/jquery-2.1.3.min.js' type='text/javascript' %3E%3C/script%3E")); 
 }//]]> 
 </script> 
 <!-- END - jQuery Reference -->

After above code, in the <body></body>, HTML ans SCRIPT codes are written that are used to demonstrate the functionality of specific topic(s) or jQuery functions. Below are HTML codes.

<h3>All Selectors</h3> 
 <div> 
 <p id="p1"> 
 jQuery selector is used to select a particular type of element or element of a particular Id, or class used</p> 
 <p class="class1"> 
 Class - jQuery selector is used to select a particular type of element or element of a particular Id, or class used</p>
 </div> 
 <div id="div2"> 
 <p>Paragraph 1</p> 
 <p>Paragraph 2</p> 
 <p>Paragraph 3</p> 
 </div> 
 <input id="txtName" type="text" />

Next, the <script></script> block is written that contains actual jQuery code to demonstrate the functionality. Please note that this block should be before the </body> tag of the page.

 <script> 
 $(document).ready(function () { 
 $("*").css("border", "5px dashed red"); 
       }); 
 </script>

If we copy-paste all above code snippets in their specified position in the HTML page, and runs we will notice that all elements of the page have been selected and 5px width border, dashed style and red in color have been applied.

The complete web page code looks like this

<html>
<head>
    <title>Test jQyery</title>
    <!-- START - jQuery Reference -->
    <script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.3.min.js">
    </script>
    <script type='text/javascript'>
        //<![CDATA[
        if (typeof jQuery == 'undefined') {
            document.write(unescape("%3Cscript src='/Script/jquery-2.1.3.min.js' type='text/javascript' %3E%3C/script%3E"));
        }//]]>
    </script>
    <!-- END - jQuery Reference -->
</head>
<body>
    <h3>All Selectors</h3>
    <div>
        <p id="p1">
            jQuery selector is used to select a particular type of element or element of a particular Id, or class used
        </p>
        <p class="class1">
            Class - jQuery selector is used to select a particular type of element or element of a particular Id, or class used
        </p>
    </div>
    <div id="div2">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>
    <input id="txtName" type="text" />
    <script>
        $(document).ready(function () {
            $("*").css("border", "5px dashed red");
        });
    </script>

</body>
</html>

Views: 10309 | Post Order: 1

jQuery > Introduction

Understanding jQuery code in jQuery

How to understand the jQuery code

Related Posts

Utility Tools