In jQuery, both mouseout() and mouseleave() events are fire when the mouse leaves the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios : 1. NO child element If the matched elements have no child element, both mouseout() and mouseleave() events are work …
Both find() and children() methods are used to filter the child of the matched elements, except the former is travels any level down, the latter is travels a single level down. To simple find() – search through the matched elements’ child, grandchild, great-grandchild…any levels down. children() – search through the matched elements’ child only (single …
In jQuery, children() is used to find the child of the matched elements, it’s only travels a single level down. For example, div elements with three levels deep, contains a class name of “child” and “orphan”. <div class="A1"> <div class="child">A1-1</div> <div class="child">A1-2</div> <div class="orphan">A1-3</div> <div class="child">A1-4</div> <div class="A2"> <div class="child">A2-1</div> <div class="child">A2-2</div> <div class="A3"> <div …
jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically. For example, $(‘#para1’).addClass(‘highlight’); – Add a “highlight’ css class to elements that contain id of “para1”. $(‘#para1’).removeClass(‘highlight’); – Remove a “highlight’ css class from elements that contain id of “para1”. Example <html> <head> <style type="text/css"> .highlight { background:green; } </style> <script type="text/javascript" …
The prev() function is used to get the immediate preceding sibling element in the set of matched elements. Only the previous sibling’s element is select, it’s child element will be ignore. This prev() function is allow to filter it by ‘selector’. For example, prev(‘div’) is used to get the immediate preceding sibling elements that are …
With jQuery, you can use the find() to search through all the descendants(child, grandchild, great-grandchild…any levels deep) of the matched element. For example, div elements with three levels deep. <div id="A1"> <div class="child">A1-1</div> <div class="child">A1-2</div> <div id="A2"> <div class="child">A2-1</div> <div class="child">A2-2</div> <div id="A3"> <div class="child">A3-1</div> <div class="child">A3-2</div> </div> </div> </div> 1. $(‘#A1’).find(‘.child’) $(‘#A1’).find(‘.child’).css(‘background’,’red’); Find an …
Both filter() and find() methods are very similar, except the former is applies to all the elements, while latter searches child elements only. To simple filter() – search through all the elements. find() – search through all the child elements only. jQuery filter() vs find() example <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; …
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 …
In jQuery, we can check if an element exists by using the jQuery selector to select it and .length() to check its length. If the length is greater than 0, it means the element exists. if ($("#elementId").length) { // The element exists } else { // The element does not exist } The above technique …
When a page is exiting or unloading, the ‘unload‘ event will be activate, however, this event can not stop a page from exit. $(window).bind(‘unload’, function(){}); Since jQuery 1.4, you can bind the ‘beforeunload‘ event to $(windows) object to stop a page from exit , unload or navigating away. $(window).bind(‘beforeunload’, function(){ return ”; }); With ‘beforeunload‘ …
To check if an image is loaded successful or not, you can combine the use of jQuery ‘load()‘ and ‘error()‘ event : $(‘#image1’) .load(function(){ $(‘#result1’).text(‘Image is loaded!’); }) .error(function(){ $(‘#result1’).text(‘Image is not loaded!’); }); If the image is loaded successful, the load() function is called, otherwise the error() function is called. Try it yourself <html> …
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 …
In jQuery, it’s quite easy to add or remove a textbox dynamically. The idea is quite simple, just combine the use of ‘counter‘ variable, jQuery createElement(), html() and remove() method. See below example : jQuery dynamic textbox example <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> …
To get the textbox value, you can use the jQuery val() function. For example, $(‘input:textbox’).val() – Get textbox value. $(‘input:textbox’).val(“new text message”) – Set the textbox value. Textbox example <html> <head> <title>jQuery get textbox value example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery get textbox value example</h1> <h2>TextBox value : <label id="msg"></label></h2> <div style="padding:16px;"> TextBox : …
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 …
In jQuery, the attribute selectors are wrap inside a bracket []. Here’s the supported attribute selectors : 1. Has Attribute [A] Select all elements that have the “A” attribute. Examples $(‘a[rel]’) – selects all elements matched by <a> that have a rel attribute. 2. Attribute Value Equals [A=B] Select all elements that have the A …
In jQuery, we can use the location.reload() to refresh or reload a page, which is part of the native JavaScript Window interface, not jQuery specifically. location.reload(); P.S Tested with jQuery 3.7.1 1. Reload a page using jQuery A complete example to show how to reload a page using jQuery. <!DOCTYPE html> <html lang="en"> <head> <meta …
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 …
A very important question in mathematics and security is telling whether a number is prime or not. This is pretty useful when encrypting a password. In this tutorial, you will learn how to find whether a number is prime in simple cases. Trivial Cases We learned numbers are prime if the only divisors they have …
Problem By default, while starting the Tomcat server instance in Eclipse, the project’s dependency libraries will not deploy to the Eclipse’s Tomcat plugin library folder ‘WEB-INF/lib’ correctly. See this “.classpath” file, that is generated by Maven “mvn eclipse:eclipse” command. <classpath> <classpathentry kind="src" path="src/main/java" including="**/*.java"/> <classpathentry kind="src" path="src/main/resources" excluding="**/*.java"/> <classpathentry kind="output" path="target/classes"/> <classpathentry kind="var" path="M2_REPO/org/apache/struts/struts-core/1.3.10/struts-core-1.3.10.jar" /> …
To save an image into database, you need to define a table column as blob data type in MySQL, or equivalent binary type in others database. In Hibernate side, you can declare a byte array variable to store the image data. Download this example – Hibernate-Image-Example.zip Here’s an Maven project to use Hibernate to save …
This article shows a few ways to save a byte[] into a file. For JDK 1.7 and above, the NIO Files.write is the simplest solution to save byte[] to a file. // bytes = byte[] Path path = Paths.get("/path/file"); Files.write(path, bytes); FileOutputStream is the best alternative. try (FileOutputStream fos = new FileOutputStream("/path/file")) { fos.write(bytes); //fos.close …
Java Regular Expression Tutorials with full example and unit test, common regular expression example like username, password, url, file extension, date, time email , hex color code and etc
In Java, we can use Files.readAllBytes(path) to convert a File object into a byte[]. import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; String filePath = "/path/to/file"; // file to byte[], Path byte[] bytes = Files.readAllBytes(Paths.get(filePath)); // file to byte[], File -> Path File file = new File(filePath); byte[] bytes = Files.readAllBytes(file.toPath()); P.S The NIO Files class is …
Updated on 25 July 2012 – Upgrade article to use Spring 3 and Quartz 1.8.6 (it was Spring 2.5.6 and Quartz 1.6) In this tutorial, we will show you how to integrate Spring with Quartz scheduler framework. Spring comes with many handy classes to support Quartz, and decouple your class to Quartz APIs. Tools Used …
Transaction management is required to ensure the data integrity and consistency in database. Spring’s AOP technique is allow developers to manage the transaction declarative. Here’s an example to show how to manage the Hibernate transaction with Spring AOP. P.S Many Hibernate and Spring configuration files are hidden, only some important files are shown, if you …