To collect a group of elements, we pass the selector to the jQuery function using the simple syntax
|
1 2 3 |
$(selector) or jQuery(selector) |
HTML:-
|
1 2 3 4 5 6 7 8 9 10 |
<nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> |
CSS:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
* { box-sizing:border-box; } ul { width:700px; margin:10px auto; text-align:center; } li { list-style:none; float:left; border:1px solid red; padding:10px 0; } a { background:lightgrey; display:block; } |
JavaScript:-
|
1 2 3 4 5 6 7 8 9 10 11 |
(function( $ ){ $.fn.autowidth = function() { return this.each(function() { $('li', this).css({'width' : (100 / $('li', this).length) + '%'}) }); }; })( jQuery ); $(document).ready(function(){ $('nav > ul').autowidth(); }); |
Any interactive web site has form input – a place where the users input different kind of information. This data is passed to PHP Script, or some other technology and if the data contains an error, there will be a delay before the information travels over the Internet to the
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var form = $('#main-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status"></div>'); $.ajax({ url: $(this).attr('action'), method : 'POST', data : $(this).serialize(), beforeSend: function(){ form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() ); } }).done(function(data){ form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); $(this).reset(); }); }); |
|
1 2 3 4 5 6 |
<div style="margin:3em;"> <button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button> <br> <br> <button type="button" class="btn btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button> </div> |
|
1 2 3 4 5 6 7 |
$('.btn').on('click', function() { var $this = $(this); $this.button('loading'); setTimeout(function() { $this.button('reset'); }, 8000); }); |
jQuery is a lightweight, “write less, do more”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler
Prevent users typing special characters in text box, textarea, etc.
|
1 2 3 4 5 |
$(document).on('keypress',':text,textarea', function () { if (this.value.match(/[^a-z0-9@,.'\-_) (]/gi)) { // now accept @ , - " this.value = this.value.replace(/[^a-z0-9@,.'\-_) (]/gi,''); } }); |
| ^[a-zA-Z]+$ | Alphabets |
| ^[a-zA-Z\s]+$ | Alphabets + Space |
Example:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) { var scripts = document.getElementsByTagName('script'); for(var i = 0; i < scripts.length; i++) { var aScript = scripts[i]; for(var j = 0; j < toRefreshList.length; j++) { var toRefresh = toRefreshList[j]; if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) { new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key); // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src) aScript.src = new_src; } } } } |
|
1 2 3 4 5 6 7 8 |
// Get all options within <select id='foo'>...</select> var op = document.getElementById("foo").getElementsByTagName("option"); for (var i = 0; i < op.length; i++) { // lowercase comparison for case-insensitivity (op[i].value.toLowerCase() == "stackoverflow") ? op[i].disabled = true : op[i].disabled = false ; } |
Without enabling non-targeted elements:
|
1 2 3 4 5 6 7 8 |
// Get all options within <select id='foo'>...</select> var op = document.getElementById("foo").getElementsByTagName("option"); for (var i = 0; i < op.length; i++) { // lowercase comparison for case-insensitivity if (op[i].value.toLowerCase() == "stackoverflow") { op[i].disabled = true; } } |
With jQuery you can do this with a single line:
|
1 2 3 |
$("option[value='optionvalue']") .attr("disabled", "disabled") .siblings().removeAttr("disabled"); |
|
1 |
$("option[value='optionvalue']").attr("disabled", "disabled"); |