In this fourth JQuery lesson, I will be discussing how to generate a response from selected elements defined in the JQuery function.

$(document).ready()

The most common JQuery function is the .ready() method that is used to specify a function to execute after a page loads.

JQuery Ready Function
JQuery Ready Function

In the above example, the $(document).ready(function) executes the function (alert) when the page loads. The alert message is displayed (“Ready function on the go!”).

Here’s the code: JQuery Ready Function

$(“div tag”)

JQuery Function
JQuery Function: Add a Tag

In the above example, the JQuery function is getlevels() and it calls an alert method, where the $(“p span”).length accesses all the <span> elements inside the <p> tag and counts the number (length) of all the span elements (as displayed in the example).

Here’s the code: JQuery Ready Function Div-Tag

$(“div tag”) is different from $(“div>tag”)

There is a difference between the $(“div tag”) and $(“div>tag”): the first one accesses all the top and sub-child elements, while the second one only the top elements. In the first example, the first alert $(“div tag”) counts all the <span> elements: the result is 3 as there are two top <span> levels and one <span> sub-level. In the second case, the $(“div>tag”) counts only the top <span> elements and ignores the sub-children. Therefore, the final result is 2.

JQuery Div Tag
JQuery Function Div-Tag
JQuery Function Div greater than Tag
JQuery Function Div>Tag

Here’s the code: JQuery Div and Tag

$(“tag:contains(text)”)

JQuery Contains
JQuery Contains Method

In the above example, the function checkContent() defines an alert method which calls $(“tag:contains(‘text’)”). In this case the tag is a <p> <span>, followed by contains where the text is equal to ‘Sheldon Cooper‘. In the body, the <div> calls the checkContent function by clicking on the text “Click Here” (onclick method). Some style was also added: the cursor turns into a pointer and the text color is red. To find the selected text, we need to insert it into <p> and <span> dividers. By clicking on “Click Here“, an alert message shows the text that contains ‘Sheldon Cooper‘.

Here’s the code: JQuery Contains Method

$(“tag[attribute=value]”)

The $(“tag[attribute]”) can access a tag with a specific attribute.

JQuery Tag Attribute
JQuery Tag Attribute

In the above example, the function getHeadline() defines an alert method which calls $(“tag[attribute]”). In this case the tag is a <div>, whose attribute is id=Sheldon. In the body, the <onclick> method calls the getHeadline function by clicking on the button “Click Here“. In the body there are three <div> and each is defined by a unique id. By clicking on “Click Here” button, an alert message shows the text that is contained in the <div id=Sheldon>.

Here’s the code: JQuery Tag-Attribute

$(“#id”).is(‘tag’)

The $(“#id”).is(‘tag’) tests if an element with a defined id is a tag element.

JQuery Check Element Tag
JQuery Check Element Tag

In the above example, the function checkelementTag() defines an alert method which returns true if the element with the ID “#divId” is a <div> element. In the body, the <onclick> method calls the checkelementTag() function by clicking on the button “Click Here“. By clicking, an alert message shows “true” as the text is contained in the <div id=divId>. If the condition was not met, it would return False.

Here’s the code: JQuery Check Element Tag

$(“tag:eq(5)”)

The $(“tag:eq(5)”) access a tag with an index number equal “5”. The method :eq() is used to select an element with a specific index number.

JQuery Check Index Method
JQuery Check Index Method

In the above example, the function checkelementIndex() defines an alert method which returns true if it can find a <div> element at position 5 (index number starts from zero!). In the body, the <onclick> method calls the checkelementIndex() function by clicking on the button “Click Here“. By clicking, an alert message shows the text contained in the <div > at position 5.

Here’s the code: JQuery Check Tag Index Number

$(“input:checked”)

The $(“input:checked”) method access an input tag that has been checked. This method is generally used with radio buttons and checkboxes.

JQuery Input Checked Method
JQuery Input Checked Method

In the above example, the function getCheckedCount() access an input tag that has been checked and count how many tags have been selected. In the body, the <onclick> method calls the getCheckedCount() function by clicking on the button “Click Here“. By clicking, an alert message shows the number (or length) of selected tags (in this case, 2).

Here’s the code: JQuery Input Checked Method

$(“select option:selected”)

The $(“select option:selected”) method accesses a “select” tag with a selected option.

JQuery Select Option Selected Method
JQuery Select Option: Selected Method

In the above example, the function getSelectedValue() access an input tag that has been checked shows its content. In the body, the <onclick> method calls the getSelectedValue() function by clicking on the button “Click Here“. By clicking, an alert message shows the content (or text) of selected tags (in this case, Penny).

Here’s the code: JQuery Select Option Selected Method

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.