60 useful jQuery code development skills collection _ jquery-js tutorial

This article mainly introduces 60 useful jQuery code development skills. If you are using jquery, you can refer to the use of the core code, for more information, we recommend that you use CTRL + F to search.

I accidentally saw these good jQuery code development skills on the Internet. 30 original articles were collected, and 20 were found during the search. Add ten more practical jQuery code snippets and a total of 60 code skills to collect and share them with you.

1. Create a nested Filter

. Filter (": not (: has (. selected)") // remove all elements that do not contain the. selected class.

2. reuse your element Query

var allItems = $("p.item"); var keepList = $("p#container1 p.item"); 
class names: $(formToLookAt + " input:checked").each(function() {  keepListkeepList = keepList.filter("." + $(this).attr("name")); });

3. Use has () to determine whether an element contains a specific class or element.

//jQuery 1.4.* includes support for the has method. This method will find //if a an element contains a certain other element class or whatever it is //you are looking for and do anything you want to them. $("input").has(".email").addClass("email_icon");

4. Use jQuery to switch the style

//Look for the media-type you wish to switch then set the href to your new style sheet $('link[media='screen']').attr('href', 'Alternative.css'); 

5. Restrict the selected region

//Where possible, pre-fix your class names with a tag name //so that jQuery doesn't have to spend more time searching //for the element you're after. Also remember that anything //you can do to be more specific about where the element is //on your page will cut down on execution/search times var in_stock = $('#shopping_cart_items input.is_in_stock');

 
 
 
  
  
  Item X
 
  
  
  Item Y
 
  
  
  Item Z
 
 
 
 

6. How to correctly use ToggleClass

//Toggle class allows you to add or remove a class //from an element depending on the presence of that //class. Where some developers would use: a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass allows you to easily do this using a.toggleClass('blueButton'); 

7. Set the function specified by IE

if ($.browser.msie) { // Internet Explorer is a sadist. } 

8. Use jQuery to replace an element.

$('#thatp').replaceWith('fnuh');

9. Verify whether an element is empty

if ($('#keks').html()) { //Nothing found ;} 

10. Search for the index of an element in the unordered set.

$("ul > li").click(function () {  var index = $(this).prevAll().length; });

11. Bind a function to an event

$('#foo').bind('click', function() {  alert('User clicked on "foo."'); }); 

12. Add HTML to an element

$('#lal').append('sometext');

13. Define attributes using objects when creating elements

var e = $("", { href: "#", class: "a-class another-class", title: "..." });

14. filter multiple attributes

//This precision-based approached can be useful when you use //lots of similar input elements which have different types var elements = $('#someid input[type=sometype][value=somevalue]').get(); 

15. Use jQuery to pre-load images

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 

16. set any event handler that matches a selector

$('button.someClass').live('click', someFunction); //Note that in jQuery 1.4.2, the delegate and undelegate options have been //introduced to replace live as they offer better support for context //For example, in terms of a table where before you would use.. // .live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); }); //Now use.. $("table").delegate("td", "hover", function(){ $(this).toggleClass("hover");});

17. Locate the selected option Element

$('#someElement').find('option:selected');

18. Hide elements that contain specific values

$("p.value:contains('thetextvalue')").hide();

19. Automatically scroll to a specific area of the page

jQuery.fn.autoscroll = function(selector) { $('html,body').animate( {scrollTop: $(selector).offset().top}, 500 );}//Then to scroll to the class/area you wish to get to like this:$('.area_name').autoscroll();

20. Detect various browsers

Detect Safari (if( $.browser.safari)),Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' ))

21. Replace the word in the string

var el = $('#id');el.html(el.html().replace(/word/ig, ''));

22. Close the right-click menu

$(document).bind('contextmenu',function(e){ return false; });

23. Define a custom Selector

$.expr[':'].mycustomselector = function(element, index, meta, stack){// element- is a DOM element// index - the current loop index in stack// meta - meta data about your selector// stack - stack of all elements to loop// Return true to include current element// Return false to explude current element};// Custom Selector usage:$('.someClasses:test').doSomething();

24. determine whether an element exists

if ($('#someDiv').length) {//hooray!!! it exists...}

25. Use jQuery to determine the left and right mouse keys

$("#someelement").live('click', function(e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {  alert("Left Mouse Button Clicked"); } else if(e.button == 2)  alert("Right Mouse Button Clicked");});

26. display or delete the default value of the input box

//This snippet will show you how to keep a default value//in a text input field for when a user hasn't entered in//a value to replace itswap_val = [];$(".swap").each(function(i){ swap_val[i] = $(this).val(); $(this).focusin(function(){  if ($(this).val() == swap_val[i]) {   $(this).val("");  } }).focusout(function(){  if ($.trim($(this).val()) == "") {   $(this).val(swap_val[i]);  } });});

27. Automatically hide or close elements after a specified time (1.4 supported)

//Here's how we used to do it in 1.3.2 using setTimeoutsetTimeout(function() { $('.myp').hide('blind', {}, 500)}, 5000);//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)$(".myp").delay(5000).hide('blind', {}, 500);

28. dynamically create elements to the DOM

var newgbin1Div = $('');newgbin1Div.attr('id','gbin1.com').appendTo('body');

29. Limit the number of characters in textarea

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && inputType == "text" || inputType == "password"){  //Apply the standard maxLength  this.maxLength = max; } else if(type == "textarea"){  this.onkeypress = function(e){  var ob = e || event;  var keyCode = ob.keyCode;  var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;  return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);  };  this.onkeyup = function(){  if(this.value.length > max){   this.value = this.value.substring(0,max);  }  }; } });};//Usage:$('#gbin1textarea').maxLength(500);

30. Create a basic test case for the function

//Separate tests into modules.module("Module B");test("some other gbin1.com test", function() { //Specify how many assertions are expected to run within a test. expect(2); //A comparison assertion, equivalent to JUnit's assertEquals. equals( true, false, "failing test" ); equals( true, true, "passing test" );});

31. Use jQuery to clone Elements

var cloned = $('#gbin1p').clone();

32. Test whether an element is visible in jQuery.

if($(element).is(':visible') == 'true') { //The element is Visible }

33. Center element Screen

jQuery.fn.center = function () { this.css('position','absolute'); this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}//Use the above function as: $('#gbin1p').center();

34. generate an array using the value corresponding to the element of a specific name

var arrInputValues = new Array();$("input[name='table[]']").each(function(){  arrInputValues.push($(this).val());});

35. Remove HTML from the element

(function($) { $.fn.stripHtml = function() {  var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  this.each(function() {   $(this).html(    $(this).html().replace(regexp,"")   );  });  return $(this); }})(jQuery);//usage:$('p').stripHtml();

36. Use closest to obtain the parent Element

$('#searchBox').closest('p');

37. Use firebug to record jQuery events

// Allows chainable logging// Usage: $('#someDiv').hide().log('p hidden').addClass('someClass');jQuery.log = jQuery.fn.log = function (msg) {  if (console){   console.log("%s: %o", msg, this);  }  return this;};

38. Click the link to force a new window to pop up.

jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return false;});

39. Click the link to forcibly open a new tab

jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; return false;});

40. Use siblings () to process similar elements

// Rather than doing this$('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active');});// Do this instead$('#nav li').click(function(){ $(this).addClass('active')  .siblings().removeClass('active');});

41. Select or not select all check boxes on the page

var tog = false; // or true if they are checked on load$('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog;});

42. Filter page elements based on input text

//If the value of the element matches that of the entered text//it will be returned$('.gbin1Class').filter(function() { return $(this).attr('value') == $('input#gbin1Id').val() ; })

43. Get the X and Y coordinates of the mouse

$(document).mousemove(function(e){$(document).ready(function() {$().mousemove(function(e){$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);});});

44. Make the entire list element (LI) clickable

$("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false;});

 
 

  
  
GBin1 Link 1
  
  
GBin1 Link 2
  
  
GBin1 Link 3
  
  
GBin1 Link 4
 
 
 

45. Use jQuery to parse XML

function parseXml(xml) { //find every Tutorial and print the author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); });}

46. determine whether an image is fully loaded

$('#theGBin1Image').attr('src', 'image.jpg').load(function() {alert('This Image Has Been Loaded');});

47. Use jQuery to name events

//Events can be namespaced like this$('input').bind('blur.validation', function(e){ // ...});//The data method also accept namespaces$('input').data('validation.isValid', true);

48. Determine whether the cookie is activated or disabled

var dt = new Date();dt.setSeconds(dt.getSeconds() + 60);document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled){ //cookies have not been enabled}

49. Force cookie expiration

var date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie('example', 'foo', { expires: date });

50. Use a clickable link to replace all URLs on the page

$.fn.replaceUrl = function() {  var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;  this.each(function() {   $(this).html(    $(this).html().replace(regexp,'$1')   );  });  return $(this); }//usage$('#GBin1p').replaceUrl(); 

51: Disable the "Enter key" in the form"

You may need to prevent users from submitting forms accidentally in form operations. The following code is very helpful:

$("#form").keypress(function(e) { if (e.which == 13) { return false; }});

52: Clear all form data

You may need to call clear methods of different types for different form forms. However, using the following method can save a lot of effort.

function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(':input', form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type == 'text' || type == 'password' || tag == 'textarea')  this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their 'value' changed else if (type == 'checkbox' || type == 'radio')  this.checked = false; // select elements need to have their 'selectedIndex' property set to -1 // (this works for both single and multiple select elements) else if (tag == 'select')  this.selectedIndex = -1; });};

53: Disable buttons in the form

The following code is very useful for ajax operations. You can effectively prevent users from submitting data multiple times, which is also frequently used by individuals:

Disable button:

$("#somebutton").attr("disabled", true);

Start button:

$("#submit-button").removeAttr("disabled");

You may often use. attr ('Disabled ', false);, but this is an incorrect call.

54: Enable the submit button after entering the content

This code is similar to the above, and is used to help users control the form submission button. After using this code, the submit button can be started only after you enter the specified content.

$('#username').keyup(function() { $('#submit').attr('disabled', !$('#username').val()); });

55: multiple forms cannot be submitted.

Submitting forms multiple times is a headache for web applications. The following code can help you solve this problem:

$(document).ready(function() { $('form').submit(function() { if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {  jQuery.data(this, "disabledOnSubmit", { submited: true });  $('input[type=submit], input[type=button]', this).each(function() {  $(this).attr("disabled", "disabled");  });  return true; } else {  return false; } });});

56: highlight the current highlighted input box

Sometimes you need to prompt the user's current operation input box, you can use the following code to highlight the display:

$("form :input").focus(function() { $("label[for='" + this.id + "']").addClass("labelfocus");}).blur(function() { $("label").removeClass("labelfocus");});

57: Add form elements dynamically

This method can help you dynamically add elements in a form, such as input:

//change event on password1 field to prompt new input$('#password1').change(function() {  //dynamically create new input and insert after password1  $("#password1").append("");});

58: automatically import data to selectbox

The following code uses ajax data to automatically generate content in the selection box

$(function(){ $("select#ctlJob").change(function(){ $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){  var options = '';  for (var i = 0; i < j.length; i++) {  options += '' + j[i].optionDisplay + '';  }  $("select#ctlPerson").html(options); }) })})

59: Check whether a check box is selected

The Code is as follows:

$('#checkBox').attr('checked');

60: Use code to submit the form

The Code is as follows:

$("#myform").submit();