Category: jquery

jquery May 20, 2010 by mkyong 8 comments

How to detect copy, paste and cut behavior with jQuery

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 May 19, 2010 by mkyong 23 comments

jQuery clone() example

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 […]

jquery May 19, 2010 by mkyong 3 comments

jQuery – Access to restricted URI denied – Solution

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) […]

jquery May 18, 2010 by mkyong 0 comments

jQuery before() and insertBefore() example

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 […]

jquery May 18, 2010 by mkyong 38 comments

How to create a tooltips with jQuery

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 […]

jquery May 18, 2010 by mkyong 3 comments

How to load JavaScript at runtime with jQuery

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 […]

jquery May 17, 2010 by mkyong 19 comments

How to check if an enter key is pressed with jQuery

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 […]

jquery May 17, 2010 by mkyong 39 comments

Mashable floating effect example with jQuery

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 May 17, 2010 by mkyong 2 comments

How to check if an element has a certain class name with jQuery

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 […]

jquery May 16, 2010 by mkyong 7 comments

jQuery next() example

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 […]

jquery May 16, 2010 by mkyong 14 comments

Different between mouseout() and mouseleave() in jQuery

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 […]

jquery May 16, 2010 by mkyong 5 comments

Difference between find() and children() in jQuery

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 […]

jquery May 15, 2010 by mkyong 3 comments

jQuery children() example

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 May 15, 2010 by mkyong 11 comments

How to add / remove CSS class dynamically in jQuery

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" […]

jquery May 15, 2010 by mkyong 1 comment

jQuery prev() example

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 […]

jquery May 14, 2010 by mkyong 11 comments

jQuery find() example

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 […]

jquery May 14, 2010 by mkyong 21 comments

Difference between filter() and find() in jQuery

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 May 14, 2010 by mkyong 7 comments

jQuery form selectors example

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 […]

jquery May 13, 2010 by mkyong 0 comments

Check if element exists in jQuery

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 […]

jquery May 13, 2010 by mkyong 26 comments

How to stop a page from exit or unload with jQuery

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‘ […]

jquery May 13, 2010 by mkyong 2 comments

How to check if an image is loaded with jQuery

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> […]

jquery May 12, 2010 by mkyong 26 comments

How to select a radio button with jQuery

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’ = […]

jquery May 12, 2010 by mkyong 14 comments

How to check / unchecked a checkbox with jQuery

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 May 12, 2010 by mkyong 107 comments

How to add / remove textbox dynamically with jQuery

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> […]

jquery May 11, 2010 by mkyong 31 comments

How to get textbox value with jQuery

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 May 11, 2010 by mkyong 0 comments

jQuery – Child selector example

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 May 11, 2010 by mkyong 1 comment

jQuery – Contains selector 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 May 10, 2010 by mkyong 3 comments

jQuery – Attribute selector examples

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 […]

jquery May 10, 2010 by mkyong 0 comments

How to reload a page using jQuery

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 May 10, 2010 by mkyong 3 comments

jQuery – Descendant selector example

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 May 9, 2010 by mkyong 1 comment

jQuery – General sibling selector example

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 […]

jquery May 9, 2010 by mkyong 0 comments

jQuery – Universal * selector example

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 […]

jquery May 9, 2010 by mkyong 0 comments

jQuery – Empty selector example

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 May 8, 2010 by mkyong 0 comments

jQuery – Adjacent sibling selector example

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)” […]

jquery May 8, 2010 by mkyong 2 comments

jQuery – Not selector example

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 […]

jquery May 8, 2010 by mkyong 0 comments

jQuery – Only child selector example

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 […]

jquery May 7, 2010 by mkyong 3 comments

jQuery – nth-child selector example

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 […]

jquery May 7, 2010 by mkyong 1 comment

Select mutiple elements in jQuery

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“, […]

jquery May 7, 2010 by mkyong 0 comments

jQuery – First child & last child selector example

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. […]

jquery May 6, 2010 by mkyong 12 comments

jQuery – How to get the tag name

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 […]