Excerpt from Chapter 21
The most striking thing about jQuery to people who are new to it is the
It takes the place of making a call to the jQuery function (which you can also do if you wish). The idea is to keep your code short and sweet, and to save on unnecessary extra typing each time you access jQuery. It also immediately shows other developers new to your code that jQuery (or a similar library) is in use.
A Simple Example
At its simplest, you access jQuery by typing a
$ symbol, followed by a selector in parentheses, and then a period and a method to apply to the selected element(s).
For example, to change the font family of all paragraphs to monospace you could use this statement:
Or to add a border to a
<code> element you could use this:
$('code').css('border', '1px solid #aaa')
Let’s look at that as part of a complete example:
<!DOCTYPE html> <html> <head> <title>First jQuery Example</title> <script src='jquery-1.11.1.min.js'></script> </head> <body> The jQuery library uses either the <code>$()</code> or <code>jQuery()</code> function names. <script> $('code').css('border', '1px solid #aaa') </script> </body> </html>
When you load this example into a browser the result will be similar to the following figure. Of course, this particular instruction simply replicates what you can do with normal CSS, but the idea is to illustrate jQuery syntax, so I’m keeping things simple, for now.
Another way of issuing this command is by calling the
jQuery function (which works in the same way as
$), like this:
jQuery('code').css('border', '1px solid #aaa')
Modifying elements with jQuery
Avoiding Library Conflict
If you use other libraries alongside jQuery, you may find that they define their own
$ function. To resolve this issue you can call the
noConflict method on the symbol, which releases control so that the other library can take over, like this:
Once you do this, to access jQuery thereafter you must call the
jQuery function. Or, you can replace use of the
$ symbol with an object name of your choice, like this:
jq = $.noConflict()
Now you can use the keyword
jq, wherever you had previously used
To distinguish and keep track of jQuery objects separately from standard element objects, some developers prefix a
$ to the front of any object created with jQuery (so that they end up looking like PHP variables!).
Now that you’ve seen how easy it is to include jQuery in a web page and access its features, let’s move onto looking at its selectors, which (I’m sure you’ll be pleased to learn) work in exactly the same way as CSS. In fact, it’s at the heart of how most of jQuery operates.
All you have to do is think about how you would style one or more elements using CSS, and then you can use the same selector(s) to apply jQuery operations on these selected elements. This means you can make use of element selectors, ID selectors, class selectors, and any combinations.
The css Method
To explain jQuery’s use of selectors, let’s first look at one of the more fundamental jQuery methods, css, with which you can dynamically alter any CSS property. It takes two arguments: the property name to be accessed, and a value to be applied, like this:
As you will see in the following sections, you cannot use this method in its own, because you must append it to a jQuery selector, which will select one or more elements whose properties should be changed by the method. Like the following, which sets the content of all
<p> elements to display with full justification:
You can also use the
css method to return (rather than set) a computed value by supplying only a property name (and no second argument). In which case the value of the first element that matches the selector is returned. For example, the following will return the text color of the element with the ID of
elem, as an
color = $('#elem').css('color')
Remember that the value returned is the computed value. In other words, jQuery will compute and return the value as used by the browser at the moment the method is called, not the original value that may have been assigned to the property via a style sheet or in any other way.
So, if the text color is blue (for example), the value assigned to the variable
color in the preceding statement will be
rgb(0, 0, 255), even if the color was originally set using the color name
blue, or the hex strings
#0000ff. This computed value, though, will always be in a form that can be assigned back to the element (or any other element) via the second argument of the
Warning: Be wary with any computed dimensions returned by this method because, depending on the current box-sizing setting, they may or may not necessarily be what you expect. When you need to get or set widths and heights without consideration for box-sizing, you should use the
height methods (and their siblings).
The Element Selector
To select an element to be manipulated by jQuery, just list its name within the parentheses following the
$ symbol (or
jQuery function name). For example, if you wish to change the background color of all
<blockquote> elements, you could use a statement such as the following:
The ID Selector
You can also refer to elements by their IDs if you place a
# character in front of the ID name. So, to add a border to the element with the ID of
advert (for example), you could use this:
$('#advert').css('border', '3px dashed red')
The Class Selector
And you can manipulate groups of elements according to the class they use. For example, to underline all elements that use the class
new you could use this:
…If you want more please read the book, thanks!