Setting up a Test File - PHP and Jquery

Now that your testing environment is set up, create a new folder in the htdocs folder within your XAMPP installation called testing, and create a new file inside it called index.html. In the editor of your choice, insert the following HTML markup:

<!DOCTYPE html>
<title>Testing jQuery</title>
<p> Hello World!</p>
<p> class=foo;Another paragraph, but this one has a class.</p>
<p> spanThis is a span inside a paragraph.</span;></p>
<p id=barParagraph with an id.
<span> class=fooAnd this sentence is in a span.</span>
<script type="text/javascript"
<script type='text/javascript'>

Note Loading the JavaScript right before the closing body tag(/body) is done to keep the scripts from blocking other page elements, such as images, from loading. Doing so also prevents JavaScript from running before the elements are fully loaded on the page, which can result in unexpectedbehavior or JavaScript errors.

Our test file loaded in Firefox

Our test file loaded in Firefox

You’ll be using this file to get your feet wet with the basic operations of jQuery.

Introducing the jQuery Function ($)

At the core of jQuery is the jQuery function. This function is the heart and soul of jQuery and is used in every instance where jQuery is implemented. In most implementations of jQuery, the shortcut $() is used instead of jQuery()to keep the code concise. We won’t get too deep into the programming theory that makes this function tick, but it basically creates a jQuery object and evaluates the expression passed as its parameters. It then determines how it should respond and modifies itself accordingly.

CautionCertain other JavaScript libraries also use the $()function, so conflicts may occur when attempting to use multiple libraries simultaneously. jQuery provides a fix for this situation with jQuery.noConflict().

Selecting DOM Elements

Using CSS Syntax Everything in jQuery revolves around its incredibly powerful selector engine. The rest of this teaches you the different methods with which you can select elements from the Document Object Model (DOM) using jQuery.

Note The DOM is a collection of objects and nodes that make up HTML, XHTML, and XML documents. It is platform-and language-independent—this essentially means that developers can use a variety of programming languages (such as JavaScript) to access and modify DOM information on multiple platforms (such as web browsers) without compatibility issues. One of the strongest and most alluring features of jQuery is the ease with which adeveloper is able to select elements within the DOM. The use of pseudo-CSS selectors1 adds an incredible level of power to jQuery. Pseudo-CSS allows a developer to target specific instances of elements in his HTML. This is especially helpful to anyone with prior experience with CSS due to the nearly identical syntax. Essentially, using the same CSS syntax you would use to set up style rules, you’re able to select elements in the following ways:

  • Basic selectors
  • Hierarchy selectors
  • Filters
  • Basic filters
  • Content filters
  • Visibility filters
  • Attribute filters
  • Child filters
  • Form filters

Basic Selectors

The basic selectors allow developers to select elements by tag type, class name, ID, or any combination thereof. While viewing launch the Firebug dialog, and click the Console tab. If the Console panel is disabled, click the Console tab, and select Enabled. You will be using this console for all examples.

Note If you’re familiar with CSS, you will be able to skim this section, because the selectors behave the same as their CSS counterparts.

Selecting Elements by Tag Type

To select an element by tag type, simply use the name of the tag (such as p, div, or span) as your selector:


To select all paragraph (<p>) tags in our test document, enter the following snippet at the bottom of the console:


Press Enter and the code will execute. The following results will be displayed in the console


[ p,, p, p#bar ]

The first line shows the command that was executed, and the second line shows what was returned from the code. There are four paragraph tags in our test document: two without class or ID attributes, one with a class foo, and one with an ID bar (you’ll learn about this syntax in the next sections). When we pass the tag name to the jQuery function, all instances are found and added to the jQuery object.

The Firebug console after executing a command

The Firebug console after executing a command

Selecting Tags by Class Name

Just as quickly as you can select by tag type, you can select elements by their assigned class or classes. The syntax for this is the use the class name preceded by a period (.):


Select all the elements with the class foo by executing the following snippet in the console:


After execution, the following will show up in the console:

[, ]

Both a paragraph tag and a span are returned, since they both have the class


Selecting Elements by ID

To select an element by its id attribute, the CSS syntax of the id preceded by a hash sign

(#) is used.

Match all elements with an ID of bar with the following:


Only one paragraph in our document has an id of bar, as we see in the result:

[ p#bar ]

Combining Selectors for More-Precise SelectionIn some situations, it may be necessary to isolate only certain tags that correspond to a class, which is easy to do by combining tag type and class in your selector. Enter the following in the console to select only paragraph tags with the class foo:


The results in the console confirm that the span was ignored, even though it has the class


Using Multiple Selectors

In the event that you need to access multiple elements, multiple selectors can be used to access all of those elements at once. For instance, if you wanted to select any paragraph tag with a class of foo or any element with an ID of bar, you would use the


This returns elements that match at least one selector specified in |the string:

[, p#bar ]

Hierarchy Selectors

Sometimes, it’s not enough to be able to select by element, class, or ID. There are points at which you’ll need to access elements contained within, next to, or after another element, such as removing an active class from all menu items except the one that was just clicked, grabbing all the list items out of the selected unordered list, or changing attributes on the wrapper element when a form item is selected. Selecting Descendant Elements Selecting descendant elements, which are elements contained within other elements, is done usingthe ancestor selector followed by a space and the descendant selector.

ancestor descendent

To select descendant spans in your test document, execute the following command in the Firebug console:

$("body span");

This will find all spans contained within the body tag (body) of the document, even though the spans are also inside paragraph tags.

>>>$("body span");
[span, ]

Selecting Child Elements

Child elements are a more-specific style of descendant selector. Only the very next level of element is considered for matching. To select a child element, use the parent element followed by a greater than symbol, followed by the child element to match:

In your test file, try to select any spans that are child elements of the body element by entering the following command in the console:


Because there are no spans directly contained within the body element,the console will output the following:


[ ]

Next, filter all span elements that are direct children of a paragraph element:

The resulting output looks like this:

[span, ]
Selecting Next Elements

Occasionally in a script, you’ll need to select the next element in the DOM. This is accomplished by providing an identifier for the starting element (any selector pattern works here), followed by a plus sign(+), followed by the selector to match the next instance of:


Try this in the console by typing the following command:

There is only one element with the class foo, so only one paragraph element is returned:

[p ]

Next, use a more general query, and select the next paragraph element after any paragraph element:


There are four paragraphs in our markup, and all of them but the last have a next paragraph, so the console will display three elements in the result:

[, p, p#bar ]

This result set is the second, third, and fourth paragraphs from the HTML markup.

Selecting Sibling Elements

Sibling elements are any elements contained within the same element. Selecting sibling elements works similarly to selecting next elements, except the sibling selector will match all sibling elements after the starting element, rather than just the next one. To select sibling elements, use the starting element selector, followed by an equivalency sign (~), and the selector to match sibling elements with:


To match all siblings after the paragraph with class foo, execute the following command in the console:

The result set will look like the following:
[p, p#bar ]

Basic Filters

Filters are another very powerful method of accessing elements in the DOM. Instead of relying on element types, classes, or IDs, you’re able to find elements based on their position, current state, or other variables. The basic syntax of a filter is a colon (:) followed by the filter name:

In some filters, a parameter can be passed in parentheses:

The most common and useful filters are covered in the next few sections.

Note Not all available filters are covered here for the sake of getting into actual development quickly. For a complete listing of available filters, see the jQuery documentation. Selecting First or Last Elements One of the most common uses of filters is to determine if an element is the first or last element in a set. With filters, finding the first or last element is incredibly simple; just append the filter :first or :last to any selector:

This returns the following when executed in the console:
[ p#bar ]

Selecting Elements that Do Not Match a Selector

If you need to find all elements that don't match a selector, the :not()filter is the easiest way to go about it. Append this filter to your selector along with a selector as its parameter, and the results set will return any elements that match the original selector, but not the selector passed as a parameter to :not().
For example:

Will return the following result set:
[ p, p, p#bar ]

Selecting Even or Odd Elements

Similar to :first and :last, the :even and :odd filters are syntactically simple and return exactly what you might expect: the even or odd elements from a result set, respectively.

Executing the preceding line in the console will result in the following output:
[, p#bar ]

Selecting Elements by Index

In the event that you need to grab a particular element by its index, the :eq() filter allows you to specify which element is needed by passing an index as the filter’s parameter:

This outputs the following:
[ p#bar ]

Note An element's index refers to its position among other elements in the set. Counting in programming starts a zero (0), so the first element is at index 0; the second is at index 1, and so on.

Content Filters

Filters are also available to select elements based on their content. These can range from containing certain text to surrounding a given element.

Selecting Elements That Contain Certain Text

To select only elements that contain certain text, use the :contains() filter, where the text to be matched is passed as a parameter to the filter:

When executed in the console, the preceding line will return the following:
[ ]

NoteThe:contains()filter is case sensitive, meaning capitalization matters for matching text. A caseinsensitive version of the filter has been added to the comments of the :contains() entry on the API documentation by a member of the development community.

Selecting Elements That Contain a Certain Element

If you need to select only elements that contain another element, you would use the :has() filter. This works similarly to :contains(), except it accepts an element name instead of a string of text:

When executed in the console, this outputs the following:
[ p, p#bar ]
Only paragraphs containing span elements are returned.

Selecting Elements That Are Empty

To find elements that are empty (meaning the element contains neither text nor any other elements), the :empty filter comes into play. In the HTML example you’re using, the only empty elements are not visible. Select them by looking for any empty element:

This outputs the following:

[script jsapi, script jquery.min.js, div#_firebugConsole ]

Both the second script tag and the div are dynamically generated. The script tag comes from jQuery being loaded by the Google JSAPI, and the div comes from Firebug.

Selecting Elements That Are Parents

The opposite of :empty, :parent will only match elements that contain children, which can be either other elements, text, or both. Select all paragraphs that are parents using the following:

Because all paragraphs in your sample HTML document contain text (and other elements in some cases), all paragraphs are returned in the result set:

[p,, p, p#bar ]
Visibility Filters

Visibility filters, :hiddenand :visible, will select elements that are, respectively, hidden and visible. Select all visible paragraphs like so:


Because none of the elements in your HTML example are currently hidden, this returns the following result set:

[p,, p, p#bar ]
Attribute Filters

Element attributes are also a great way to select elements. An attribute is anything in the element that further defines it (this includes the class, href, ID, or title attributes). For the following examples, you'll be accessing the class attribute.

Note Please bear in mind that it is faster (and better practice) to use ID (#id) and class (.class) selectors in production scripts whenever possible; the examples below are just to demonstrate the capabilities of the filter. Selecting Elements That Match an Attribute and Value To match elements that have a given attribute and value, enclose the attribute-value pair in square brackets ([]):


To select all elements with a class attribute of foo, execute the following in the console:

This returns the following:

[, ]

Selecting Elements That Don’t Have the Attribute or Don’t Match the Attribute Value Inversely, to select elements that do not match an attribute-value pair, insert an exclamation point (!) before the equals sign between the attribute and value:


Select all paragraphs without the class foo by running the following command:

This results in the following:

[ p, p, p#bar ]
Child Filters

Child filters add an alternative to the use of :even, :odd, or :eq(). The main difference is that this set of filters starts indexing at 1 instead of 0 (like :eq() does). Selecting Even or Odd Parameters or Parameters by Index or Equation

One of the more versatile filters, :nth-child() provides four different options to pass as a parameter when selecting elements: even, odd, index, or an equation. Like other child filters, this one starts indexing at 1 instead of 0, so the first element is at index 1, the second element at 2, and so on.

Using :odd, the result set contained the paragraphs with a class of foo and an ID of foo; select odd paragraphs using :nth-child() to see the difference in how the filters handle by executing the following command:

The results display as follows in the console:
[ p, p ]

Though this output may seem strange, the mismatched results are a product of the difference in how the elements index. Selecting First or Last Child Elements While very similar to :first and :last, :first-child and :last-child differ in that the returned element set can contain more than one match. For instance, to find the last span that is a child of a paragraph element, you might use the following:

$("p span:last");

which returns the following in the console:

>>>$("p span:last");
[ ]

However, if you needed to find every span that was the last child of a paragraph element, you would
use :last-child instead:

$("p span:last-child");
This uses each parent as a reference instead of the DOM as a whole, so the results are different:

>>>$("p span:last-child");
[ span, ]
Form Filters

Forms are a huge part of web sites these days, and their major role inspired a set of filters specifically geared toward forms. Because your HTML example does not have any form elements in it, you’ll need to append the file with some new markup for the following examples. In index.html, add the following HTML between the last paragraph tag and the first script tag:

<form action=# method=post><fieldset><legendSign Up Form/legend><label for=name Name/label<input name=name id=name type=text /<label for=password Password/label <input name=password id=password;><type=password/<br /<br/><label><input type=radio name=loc/><I'm on my computer></label;<label><input type=radio name=loc checked=;checked />I'm on a shared computer<></labelbr /br /><input type=submit value=Log In/<label><input type=checkbox name=notify><disabled=true /><Keep me signed in on this computer></labelbr /></fieldset></form>

After saving, reload the page in your browser

The form as it appears after editing index.html

The form as it appears after editing index.html

Matching by Form Element TypeThe most common form-specific filters simply match form element types. Theavailable filters are

:button, :checkbox, :file, :image, :input, :password, :radio, :submit, and :text.

To select all radio inputs, use the following code:

This outputs the following in the console:

[input on, input on ]

These filters are particularly useful because all of the provided types are input elements, so matching certain types of inputs only without these filters would be a little more difficult. Selecting Only Enabled or Disabled Form ElementsAdditionally, filters to select enabled or disabled form elements are available using :enabled and:disabled.To select all disabled form elements, use the following code:


This outputs the following in the console:

[input on ]

The “Keep me signed in on this computer” check box is disabled, and therefore returned, by the

:disabled filter.

Selecting Checked or Selected Form Elements

Radio and check box inputs have a checked state, and select inputs have a selected state. Filters are provided to retrieve the form elements that are in either state using :checked or :selected, respectively. To select the currently checked radio button in your HTML example, execute the following code in the console:


This returns the radio input that is currently selected in the console:

[ input on ]

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

PHP and Jquery Topics