SharePoint World: jQuery : Fundamentals

What is jQuery?

jQuery is a lightweight JavaScript library that simplifies programming with JavaScript.

According to jQuery.com, jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traveral and manipulation, 
event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Benefits of jQuery over JavaScript:
1. jQuery is cross-browser
2. jQuery is a lot more easy to use than raw javascript
3. jQuery is extensible
4. jQuery simplifies and has rich AJAX support
5. jQuery has large development community and many plugins. Example autocomplete textbox plugin.
6. Excellent documentation

Different between jQuery 1.x and 2.x:
jQuery 1.x supports all IE browser versions including IE 6/7/8 and latest.
jQuery 2.x supports IE browser versions except IE 6/7/8.
jQuery 2.x is small in size than jQuery 1.x as the backward compatibility code is removed from jQuery 2.x version.

jQuery Compressed vs Uncompressed versions:
Compressed version of jQuery does not contain formating. Removed all white spaces to reduce the size of the file. This is for production environment.
Uncompressed verion of jQuery is in readable format. This is used in dev/test/QA environments.

Sample:
Adding a click event handler for a button control
<script type="text/javascript">
   $('document').ready(function()
   {
      $('#button1').click(function ()
      {
    alert('jQuery Tutorial');
      }
   });
</script>
<input type="button" value="Click Me" id="button1" />

jQuery start points:
Method1: $('document').ready(function()  );
Method2: $().ready(function()  );   - Not recommended
Method3: $(function()  );

$(document).ready:
It is a jQuery event. 
It fires as soon as the DOM is loaded and ready to be manipulated by script. 
This is the easiest point in the page load process where the script can safely access elements in the page's HTML DOM. 
This event is fired before all the images, CSS etc.. are fully loaded.

$(window).load:
This event fires when the DOM and all the content on the page (images, CSS etc) is fully loaded.
Since the window load event waits for images, css etc to be fully loaded, this event fires after ready event.

Example:
<html>
<head>
   <title></title>
   <sript scr="scripts/jQuery-1.11.2.js"></script>
   <script type="text/javascript">
      $(window).load(function () {
           alert('Window loaded');
      });
      $(document).load(function () {
           alert('DOM loaded and ready');
      });
    </script>
</head>
<body>
</body>
</html>

In the above example, the first output is "DOM loaded and ready" and then second output is "Window loaded".

What is a CDN?
CDN stands for Content Delivery Network.
A CDN is a system of distributed servers that hosts resources such as images, CSS, JavaScript etc.

Companies like Microsoft, Google, Yahoo etc have a free public CDN from which we can load jQuery instead of hosting it on our own web server.

Microsoft jQuery CDN:
http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_O

Google jQuery CDN:
http://developers.google.com/speed/libraries/devguide#jquery

Benefits of using CDN:
Distributed CDN Servers: The jQuery file can be downloaded from the CDN server that is closest to the user.

Browser Caching: jQuery is used on many popular websites. If a user has already visited a webpage that uses jQuery from a CDN, and then if he arrives
 at your page, the jQuery file has already been cached by the browser so there is no need to download it again.

Parallel Downloads: There is a browser limit on how many files can be concurrently downloaded from a given domain. This number varies from browser
 to browser. For example, if the browser allows only 2 concurrent downloads from a given domain, the 3rd download is blocked until one of the previous
 files has been fully downloaded. Since the jQuery file is on a CDN, it is being downloaded from a different domain. So this means, the browser
 allows another 2 parallel downloads from the CDN server.

Reduced server load: The HTTP request for jQuery file is handled by the CDN server, so the load on your web server is reduced. This also means there
 is a saving on your website bandwidth consumption which in turn will reduce your hosting cost.

Disadvantages: Your client firewalls may block the CDN. So you may have to request your clients to whitelist the CDN.

What if the required jQuery file cannot be downloaded from CDN:
Let's assume that, the CDN is down or because of some network issue. Then, we won't be able to download jQuery from CDN. In this case we will have
 to fall-back to use jQuery file that we hosted on our own server.

If jQuery is successfully downloaded, jQuery property is added to the window object. If this property is not found then jQuery is not downloaded.

<script scr="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.3.min.js">
</script>
<script>
   window.jQuery || document.write("<script src='Scripts/jquery-2.1.3.js'><\/script>");
</script>

jQuery Element selector:

To select the elements by tag name use jQuery element selector:
Syntax: $(element)

$('td')  // select all td elements
$('div a ') // select all anchor elements that are descendants of div element
$('div, span, a') // select all div, span and anchor elements

Selects all the tr elements on the page and changes their background colour to red
 $('tr').css('background-Color', 'red');

Alerts the HTML content of the table
 alert($('table').html());

Alerts the HTML content of each table row
$('table tr').each(function () {
     alert($(this).html());
});

Select and changes the background colour of all the div, span and anchor elements
$('div, span, a').css('background-Color', 'yellow');

Select all anchor elements that are descendants of div element
$('div a').css('background-Color', 'yellow');

Changes the background color of even rows to gray and odd rows to yellow on both the tables.
$('tr:even').css('background-Color', 'gray');
$('tr:odd').css('background-Color', 'yellow');

To change the background color of even rows to gray and odd rows to yellow just for one of the table, use #id selector along with element selector.
$('#table1 tr:even').css('background-Color', 'gray');
$('#table1 tr:odd').css('background-Color', 'yellow');

jQuery Class selector:

Syntax : $('.class') 

jQuery class selectors uses JavaScript's native getElementsByClassName() function if the browser supports it. 

$('.small') // Selects all elements with class small
$('.small,.big') // Selects all elements with class small or big
$('div.small,.big') // Selects div elements with class small and any element with class big

Selects all elements with class "small" and sets 5px solid red border
$('.small').css('border', '5px solid red');

Selects all elements with class "small" or "big" and sets 5px solid red border
$('.small, .big').css('border', '5px solid red');

Selects all elements with class "small" and all span elements with class "big" and sets 5px solid red border
$('.small, span.big').css('border', '5px solid red');

Selects all elements with class small that are nested in a an element with id=div2 and sets 5px solid red border
$('#div2 .small').css('border', '5px solid red');

Selects all elements with class small and sets 5px solid red border. Notice div1 has 2 classes - small and big.
$('.small').css('border', '5px solid red');

Selects all elements that has both the classes - small and big. There should be no space between the class names. 
$('.small.big').css('border', '5px solid red');

If you have a space between the two class names then we are trying to find descendants, i.e. find elements with class big that are descendants
of an element with class small.
$('.small .big').css('border', '5px solid red');

Another way to selects all elements that has both the classes - small and big is by using filter method. But this approach is
slower because it will first create a list of objects with class "small" and then removes elements that does not have class "big"
$('.small').filter('.big').css('border', '5px solid red');

jQuery attribute and attribute value selector:

Syntax : 
$('[attribute]')
$('[attribute="value"]')

$('[title]') // Selects all elements that have title attribute
$('div[title]') // Selects all div elements that have title attribute
$('[title="divTitle"]') // Selects all elements that have title attribute value - divTitle
$('div[title="divTitle"]') // Selects all div elements that have title attribute value - divTitle

Selects all elements with title attribute and sets 5px solid red border
$('[title]').css('border', '5px solid red');

Selects all div elements with title attribute and sets 5px solid red border
$('div[title]').css('border', '5px solid red');

Selects all elements with title attribute value - div1Title, and sets 5px solid red border
$('[title="div1Title"]').css('border', '5px solid red');

Selects all div elements with title attribute value - div1Title, and sets 5px solid red border
$('div[title="div1Title"]').css('border', '5px solid red');

Selects all div elements with both title and style attributes, and sets 5px solid black border
$('div[title][style]').css('border', '5px solid black');

Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border
$('div[title="divTitle"][style="background-color:red"]').css('border', '5px solid black');

Selects all div elements with either title or style attributes, and sets 5px solid black border
$('div[title],[style]').css('border', '5px solid black');

jQuery Attribute value operators
Attribute Equals Selector [name="value"]
Attribute Not Equal Selector [name!="value"]
Attribute Contains Selector [name*="value"]
Attribute Contains Word Selector [name~="value"]
Attribute Contains Prefix Selector [name|="value"]
Attribute Starts With Selector [name^="value"]
Attribute Ends With Selector [name$="value"] 

Selects all elements that have title attribute value equal to div1Title
$('[title="div1Title"]') 

Selects all elements that have title attribute value not equal to div1Title
$('[title!="div1Title"]') 

Selects all elements that have title attribute value containing the given substring - Title
$('[title*="Title"]') 

Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces
$('[title~="mySpan"]')

Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-)
$('[title|="myTitle"]') 

Selects all elements that have title attribute value starting with div
$('[title^="div"]')

Selects all elements that have title attribute value ending with Heading
$('[title$="Heading"]')

THIS IS
$('div[title!="div1Title"]').css('border', '5px solid red');
EQUIVALENT TO
$('div:not([title="div1Title"])').css('border', '5px solid red');
SharePoint World

Friday, May 13, 2016

jQuery : Fundamentals

No comments:
