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 …
The following code is a JQuery javascript which will refresh the captcha image automatically wherever user clicked on it. The code is working fine in FireFox. However, when i test it in Internet explorer 6 or 7, i hit the following Active X controls warning. Your security settings do not allow Web sites to use …
JQuery is really a powerful and handy JavaScript library. The page or content loading effect is very easy to implement in jQuery. Here’s a example to make your web page content display a fade in page loading effect. It will make your reader a shock impression. 🙂 The idea is simple ~ 1. Create a …
Since WordPress version 2.x, jQuery is a build-in Javascript library, explicitly include the jQuery library into WordPress is not necessary. Problem The jQuery is not working in WordPress plug-in writing? When you try to test a simple jQuery effect like following $(document).ready(function(){ alert(‘test’); }); It’s just not working, no alert message box pop up. The …
This article shows how to create a table with zebra stripes effect using jQuery. Table of contents: 1. Include the jQuery script 2. CSS styling the zebra stripes 3. Table Structure 4. jQuery Script 5. Full example 6. References P.S Tested with jQuery 3.7.1 1. Include the jQuery script Include the jQuery script from the …
This article shows different function calling in both JavaScript and jQuery. At the end, we will show an example of how to call a function to create dynamic content after a page is loaded, both in JavaScript and jQuery. Table of contents: 1. JavaScript Function Calling 2. jQuery Function Calling 3. JavaScript – Function calling …
jQuery is a fast, small, and feature-rich JavaScript library. It simplifies HTML document traversal and manipulation, event handling, and animation with an easy-to-use API that works across browsers. This article shows how to load a jQuery script and change the text of a div element to Hello World when the document is ready. P.S Tested …