This session is intended for three types of readers. The first is someone who has read introductory material on jQuery and is looking for the next logical step. The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. The third reader is I, the writer. I crafted these articles to be used as my own personal reference point for jQuery concepts. This is exactly the type of resource I wish every JavaScript library had available.
Before you begin, it is important to understand the various stylistic nuances employed throughout this session. Please do not skip this section because it contains information that will aid you as you read.
jQuery Semantics
The term "jQuery function" refers to the jQuery constructor function (jQuery() or alias $()) that is used to create an instance of the jQuery object.
The term "wrapper set" refers to DOM elements that are wrapped within jQuery methods. Specifically, this term is used to refer to the elements selected using the jQuery function. You may have heard this referred to as a "jQuery collection." In this session I will be using the term "wrapper set" instead of "jQuery collection."
How This Session Is Structured
This session is organized into articles loosely based on the arrangement of the jQuery API documentation. Each article contains isolated jQuery concepts relevant to it's title.
More Code, Less Words
This session is purposely written with the intention that the reader will examine the code examples closely. The text should be viewed as secondary to the code itself. It is my opinion that a code example is actually worth a thousand words. Do not worry if you initially find the explanations in the articles to be confusing. Examine the code. Tinker with it. Reread the code comments. Repeat this process until the material becomes clear. This is the level of expertise I hope you achieve, where documented code is all that is necessary for you to understand new development concepts.
Why Oh Why Did I Use alert() for Code Examples?
Believe me, I hate the alert() method as much as you do. But like it or not, it works reliably in every browser. To borrow a line from Dr. Seuss: It works "Here, there, and everywhere!" It is not necessarily ideal, but I did not want the added complexity of console solutions to adversely affect code clarity. It is my goal to cut away any code overhead not directly supporting the concepts being taught.
Completely Grok jQuery Text() Before Reading This Session
The code examples in this series make heavy use of the jQuery text() method. You need to be aware that the text() method, when used on a wrapper set containing more than one element, will actually combine and return a string of text contained in all elements of the wrapper set. This might be confusing if you were expecting it to return only the text in the first element of the wrapper set. Below is an example of how the text() method concatenates the strings found in the elements of a wrapper set.
<!DOCTYPE html>
<html lang="en">
<body>
<span>I</span>
<span>love</span>
<span>jQuery</span>
<span>!</span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
alert(jQuery('span').text()); // Alerts "I love jQuery!"
</script>
</body>
</html>
Code Examples
This session relies heavily on code examples to express jQuery concepts. The code samples are available at https://bitbucket.org/syncfusion/jquery-succinctly.
Code samples are provided as individual HTML files. A Visual Studio 2010 project is also provided for easy navigation. You can select any file, right-click, and select the View in Browser option to test the code.
I encourage you to download the code and follow along. I authored this session counting on the fact that you will need to tinker with the code while you are reading and learning.
Comments