In jQuery, we select an element by id using the # symbol and select elements by class name using the . symbol. Table of contents: 1. Select an element by ID 2. Select elements by Class Name 3. HTML example 4. References 1. Select an element by ID To select an element by ID, we …
jQuery come with many form selectors to access the form elements more easily and efficiently. Here’s a simple jQuery form selectors reference. 1. TextBox – $(‘input:text’) To select a textbox $(‘input:text’); To get the textbox value $(‘input:text’).val(); To set the textbox value $(‘input:text’).val("New Text"); 2. Password – $(‘input:password’) To select a password $(‘input:password’); To get …
A simple example to select a radio button with jQuery dynamically. A radio buttons group, with a name=”sex”. <input type="radio" name="sex" value="Male">Male</input> <input type="radio" name="sex" value="Female">Female</input> <input type="radio" name="sex" value="Unknown">Unknown</input> 1. To display the selected radio button value. $(‘input:radio[name=sex]:checked’).val(); 2. To select a radio button (Male). The radio button is 0-based, so the ‘Male’ = …
In jQuery, you can use attr() function to check or unchecked a checkbox dynamically. For example, A simple checkbox component. <input type="checkbox" name="checkme">Check Me</input> 1. To display whether this checkbox is checked or not (return true or false). $(‘input:checkbox[name=checkme]’).is(‘:checked’); 2. To check a checkbox. $(‘input:checkbox[name=checkme]’).attr(‘checked’,true); 3. To uncheck a checkbox. $(‘input:checkbox[name=checkme]’).attr(‘checked’,false); jQuery check / unchecked …
jQuery child selector (X > Y) is used to select all elements matched by “Y” that are child of a “X” element. For example, $(‘form > input’) – selects all elements matched by <input> that are child of an element matched by <form>, Only child element will match, grandchild, great-grandchild will not match. jQuery Example …
jQuery contains(text) selector is used to select all elements that are contains specified text. Examples 1. $(‘p:contains(paragraph 1)’) – selects all elements matched by <p> that contains the text “paragraph 1”. 2. $(‘p:contains(mkyong)’) – selects all elements matched by <p> that contains the text “mkyong”. 3. $(‘li:contains(three)’) – selects all elements matched by <li> that …
jQuery descender selector (X Y) is used to select all elements matched by “Y” that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a “X” element. For example, $(‘#container div’) – selects all elements matched by <div> that are descendants of an element that has an id of container. $(‘form input’) – selects all elements …
jQuery general sibling selector (X ~ Y) is used to select all elements matched by “Y” that is a sibling of a “X” element. For example, <div class="class1"></div> <p>I’m class1 sibling #1</p> <p>I’m class1 sibling #2</p> <p>I’m class1 sibling #3</p> The <div> and <p> are in sibling relationship. The “$(.class1 ~ p)” statement will select …
The universal * selector is used to select all elements, everything. Examples $(‘*’): selects all elements in the document. $(‘div > *’): selects all elements that are children of a <div> element. In general, using the universal alone didn’t make sense, at least i can’t think of any use cases. But, it’s always used to …
In jQuery, the “empty” selector is used to select all elements that have no children (including any text inside). Examples <div class="div-class1"> This is div-class1 </div> <div class="div-class2" /> $(‘:empty’) – The “div-class2” is matched, while the “div-class1” is not. jQuery Example A simple example to show the use of the jQuery “empty” selector. <html> …
jQuery adjacent sibling selector (X + Y) is used to select the immediately follow or next elements matched by “Y” that is a sibling of a “X” element. For example, <div class="class1"></div> <p>I’m class1 sibling #1</p> <p>I’m class1 sibling #2</p> <p>I’m class1 sibling #3</p> The <div> and <p> are sibling relationship. The “$(.class1 + p)” …
In jQuery, the “not” is used to select all elements that do not match the selector. Examples $(‘p:not(.class-p1)’) – selects all elements matched by <p> that do NOT have a class name of “class-p1”. $(‘li:not(:only-child)’) – selects all elements matched by <li> that are NOT the only child of their parent. $(‘li:not(:first-child)’) – selects all …
The “only-child” is used to select all elements that are the only child of their parent. Examples $(‘:only-child’) – selects all elements that are the only child of their parent. $(‘li:only-child’) – selects all elements matched by <li> that are the only child of their parent. jQuery Example In this example, when the button is …
The jQuery nth-child is used to select all elements that are ntg-child of of their parent. The nth-child(n) is “1-indexed”, meaning the “n” is counting starts at 1. For example, 1. $(‘tr:nth-child(3)’) – selects all elements matched by <tr> that are the third child of their parent. 2. $(‘tr:nth-child(3n)’) – selects all elements matched by …
In jQuery, you can select multiple elements by separate it with a comma “,” symbol. For example, $(.class1, .class2, #id1) In above case, select all elements that have a class name of “class1” and “class2”, and id of “id1”. jQuery Example In this example, the elements that have a class name of “p1” and “p2“, …
The :first-child is used to select all elements that are the first child of their parent, which is a shorthand for :nth-child(1). Examples $(‘li:first-child’) – selects all elements matched by <li> that are the first child of their parent. $(tr:first-child’) – selects all elements matched by <tr> that are the first child of their parent. …
To get the element tag name, you can use the tagName function. There are two ways to use it : 1) .get(0).tagName Select an element that has a class name of “classTag1”, and use the .get(0).tagName function to display its tag name. $(‘.classTag1’).get(0).tagName; 2) .[0].tagName 2. Select an element that has a class name of …
jQuery child and sibling selectors can divide into four selectors, descendant selector (A B), child selector (A > B), adjacent sibling selector (A + B) and general sibling selector (A ~ B). Let go through an example to understand the different in between. Firstly, you have to understand what are child and sibling. Let’s see …
In jQuery, you can get the tag value or element content from a selected tag. For example, 1. Select a tag name of ‘p’ and display its tag value. $(‘p’).html(); 2. Select an element that has a class name of “class1” and display its value. Regardless of the tag name. $(‘.class1’).html(); 3. Select an element …