A simple select / drop down box, with a id=”country”. <select id="country"> <option value="None">– Select –</option> <option value="China">China</option> <option value="United State">United State</option> <option value="Malaysia">Malaysia</option> </select> 1. To display the selected drop down box value. $(‘#country’).val(); 2. To set a drop down box value to ‘China’. $("#country").val("China"); 3. To set a drop down box value to …
Often times, users like to press a few times on the submit button to make sure the button is surely clicked, and causing the double form submission issue. The common solution is disables the submit button after user clicked on it. 1. Enable / Disable submit button 1.1 To disable a submit button, you just …
Delicious, the best bookmark website, provides many APIs to let developers to deal with the bookmarks’ data. Here’s an example to use jQuery to retrieve the total number bookmark count of a given URL. Delicious API To get a total number of bookmark, use this http://feeds.delicious.com/v2/json/urlinfo/data?url=xxx.com&callback=? jQuery Ajax jQuery, comes with an easy but powerful …
To check if jQuery library is loaded, use the following JavaScript code : if (typeof jQuery != ‘undefined’) { alert("jQuery library is loaded!"); }else{ alert("jQuery library is not found!"); } Alternative? In some blogs and forum mention about the following alternative code : if (jQuery) { alert("jQuery library is loaded!"); } else { alert("jQuery library …
jQuery filter function is a useful feature to extract your elements from a set of the matched elements, by using the matched selector or the function’s test. 1. filter(selector) In a set of matched elements, get the elements that are match the filter() selector only. For example, $("div").filter("#div1").css(‘background-color’, ‘blue’); Matched all the div elements, and …
jQuery comes with a trigger() function to execute the event handlers that attached to elements. For instance, A single click event bind to a button with an Id of “button1”. $("#button1").bind("click", (function () { alert("Button 1 is clicked!"); })); A single click event bind to a button with an Id of “button2”. and a trigger …
jQuery bind() function is used to attach an event handler to elements, while the unbind() is used to detached an existing event handler from elements. Examples Simple html code for the demonstration. <div id="BoxId"> Mouseover Me, Click Me or Double Click Me </div> <span></span> 1. bind() jQuery has full supports of the JavaScript event types …
Both jQuery empty() and remove() are used to remove the matched elements, just the former is used to remove the child of the matched elements; while the latter is used to remove all the matched elements totally. Example 2 div tags – “BBox” is a child element to “ABox”. <div class="ABox"> I’m a A box …
To detect copy, paste and cut behavior, you just need to bind the corresponding event type. $("#textA").bind(‘copy’, function() { $(‘span’).text(‘copy behaviour detected!’) }); $("#textA").bind(‘paste’, function() { $(‘span’).text(‘paste behaviour detected!’) }); $("#textA").bind(‘cut’, function() { $(‘span’).text(‘cut behaviour detected!’) }); If you are using jQuery 1.4x, it’s support the multiple events declaration like following : $("#textA").bind({ copy : …
jQuery clone() is used to create a copy of the matched elements. It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements. 1. Clone the html elements For example, you are going to clone the following html code. <div class="smallBox"> I’m a small …
Problem This jQuery error message is caused by loading the cross domain content. Error: [Exception… "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" It’s means you are loading some content that are not belong to or located at your site (different domain name). See this jQuery example to load the cross domain (yahoo.com) …
Both jQuery before() and insertBefore() methods are doing the same task, add a text or html content before the matched elements. The major difference is in the syntax. For example, <div class="prettyBox">I’m a ipman</div> <div class="prettyBox">I’m a ipman 2</div> 1. $(‘selector’).before(‘new content’); $(‘.prettyBox’).before("<div class=’newPrettybox’>Iron man</div>"); 2. $(‘new content’).insertBefore(‘selector’); $("<div class=’newPrettybox’>Iron man</div>").insertBefore(‘.prettyBox’); Result Both methods above …
Here’s a simple idea to create a tooltips message with jQuery. Idea… Identify the “target” that need to show the tooltips message. Create a tooltips message and CSS style for it. Three functions, – showTooltips, hideTooltips, changeTooltipsPosition. While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position with changeTooltipsPosition. While …
To increase the website performance and reduce the total file’s size return, you may consider to load JavaSript (.js) file when it’s required. In jQuery, you can use the $.getScript function to load a JavaScript file at runtime or on demand. For example, $("#load").click(function(){ $.getScript(‘helloworld.js’, function() { $("#content").html(‘Javascript is loaded successful!’); }); }); when a …
The “enter” key is represent by code “13”, check this ASCII charts. To check if an “enter” key is pressed inside a textbox, just bind the keypress() to the textbox. $(‘#textbox’).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ alert(‘You pressed a "enter" key in textbox’); } }); To check if an …
Mashable, best known as social media resources website, created an awesome floating effect while user scrolling the page. Here’s a simple idea to clone this floating effect with jQuery. Idea… Create a floating box. Initial the floating box location, put it beside the body content. While user scrolling the page, keep checking the scroll bar …
jQuery comes with two methods to check if an element has a certain class name. Both methods have the same functionality. is(‘.classname’) hasClass(‘.classname’) For example, to check if div element has a class name of ‘redColor’. 1. is(‘.classname’) $(‘div’).is(‘.redColor’) 2. hasClass(‘.classname’) $(‘div’).hasClass(‘.redColor’) Example If the div element has a class name of ‘redColor’, then change …
The next() function is used to get the immediate following sibling element in the set of matched elements. Only the following sibling’s element is select, it’s child element will be ignore. This next() function is allow to filter it by ‘selector’. For example, next(‘div’) is used to get the immediate following sibling elements that are …
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 …