Learning Curve…

Archive for the ‘jQuery’ Category

JQuery selectors enable us to find one or more elements in your page’s document object model so we can apply all sorts of jQuery methods to these elements. Rather than inventing a new technique to find page elements, the designers of jQuery decided to use an existing CSS selector-based syntax:

1. The Universal Selector

The universal selector matches all elements in your page. To set the fontfamily of each element in a page to Arial, we can use this code:

$(‘*’).css(‘font-family’, ‘Arial’);

2. The ID Selector

This selector finds and retrieves an element by its id. For example, to set the CSS class for a button called Button1, we can use this code:

$(‘#Button1’).addClass(‘NewClassName’);

3.The Element Selector

This selector gets a reference to zero or more elements that match a specific tag name. For example, this code turns the text colour of all headings at level two to blue:

$(‘h2’).css(‘color’, ‘blue’);

4. The Class Selector

The class selector gets a reference to zero or more elements that match a specific class name.

Consider this HTML fragment:

<h1 class=”Highlight”>Heading 1</h1>

<h2>Heading 2</h2>

<p class=”Highlight”>First paragraph</p>

<p>Second paragraph</p>

Notice how two of the four elements have a CSS class called Highlight. The following jQuery code changes the background colour of the first heading and the first paragraph to red, leaving the other elements unmodified:

$(‘.Highlight’).css(‘background-color’, ‘red’);

5. Grouped and Combined Selectors

We can group and combine selectors. The following grouped selector changes the text colour of all h1 and h2 elements in your page:

$(‘h1, h2’).css(‘color’, ‘orange’);

With a combined selector, you can find specific elements that fall within some others. For example, the following jQuery touches just the paragraphs that fall within the MainContent element, leaving all other paragraphs alone:

$(‘#MainContent p’).css(‘border’, ‘1px solid red’);

In jQuery we use the dollar sign ($) as a shortcut to find elements in our page. The elements that are found and returned are referred to as a matched set. The basic syntax for the $ method is this:

$(‘Selector Here’)

Between the quotes (we can use single or double quotes, as long as we use the same type on each end) we enter one or more selectors. The $ method returns zero or more elements that you can then influence using one of the many jQuery methods. For example, to apply some CSS to all h2 elements, we use the css method:

$(‘h2’).css(‘padding-bottom’, ‘10px’);

This applies a padding of ten pixels at the bottom of all headings at level two in the page.

The cool thing about many of the jQuery methods is that, besides applying some design or behaviour, they return the matched set again. This enables you to call another method on the same matched set. This concept is called chaining, where we use the result of one method as the input of another, enabling us to create a chain of effects. For example, the following code first changes the font size of all level-two headings in the page, and then fades them out until they are invisible in five seconds:

$(‘h2’).css(‘font-size’, ’40px’).fadeOut(5000); // timeout is in milliseconds

Most of the jQuery code we write executed when the browser is done loading the page. It’s important to wait with executing your code until the page is done loading the DOM. The DOM — the document object model — is a hierarchical representation of your web page and contains a tree-like structure of all your HTML elements, script files, CSS, images, and so on.

The DOM is always in sync with the page you see in the browser, so if you make a programmatic change to the DOM (for example, with jQuery code), the change is reflected in the page in the browser. If you execute your jQuery code too early (for example, at the very top of the page), the DOM may not have loaded the elements you’re referring to in your script, and you may get errors. Fortunately, it’s easy to postpone the execution of your code until the DOM is ready using the ready function in jQuery:

$(document).ready(function() {

// Code added here is executed when the DOM is ready.

});

Any code we add between the opening and closing curly brace is executed when the page is ready for DOM manipulation. JQuery also comes with a shortcut for the ready function to make it easier to write code that fires when the DOM is ready. The following snippet is equivalent to the preceding example:

$(function() {

// Code added here is executed when the DOM is ready.

});

Because jQuery code is often specific to a page, it makes sense to add the code to the end of just the pages that require it. To make this a little easier, we can add a ContentPlaceHolder in your master page especially for this purpose. The pages that use this master page then have an easy location to write jQuery code.


Author

Learning days (Calendar)

June 2017
M T W T F S S
« Jun    
 1234
567891011
12131415161718
19202122232425
2627282930  

Knowledge Bank (Archives)

I am on Twitter

Blog Stats

  • 498,681 hits

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 43 other followers

%d bloggers like this: