jquery cheatsheet

http://test.ical.ly/2010/11/16/best-practices-for-jquery-development-my-link-collection-so-far/

Image Mouseover Hoover

    // Apply image hover
    $('#foo img').hover(  
      function() {
        $(this).attr('src', '/images/image-hover.png')
      },  
      function() {
        $(this).attr('src', '/images/image.png')
      }
    );   

Remove empty formfields on submit

        // remove empty form fields before submit
        $("form").submit(function()
        {
            $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
            
            return true; // ensure form still submits
        });   

Enlarge click area

<script type="text/javascript">
  $('.link_container').click(function () {
    window.location = $(this).find('a').attr('href');
  });
</script>

Get current element type (tag type)

$(this).attr('tagName');

Wait for dom load

$(document).ready(function() {
  // Do something
});

Wait until the page is completely loaded (including graphics)

$(window).load(function() {
  // Do something
}); 

php str_replace equivalent

var result = subject.split(search).join(replace);

Widths

var border = $('elem').outerWidth() - $('elem').innerWidth();  var padding = $('elem').innerWidth() - $('elem').width();  var marging = $('elem').outerWidth(true) - $('elem').outerWidth();

Parse html code

var html = "<h1>Hello<h2";

// html text to dom
var doc = document.implementation.createHTMLDocument("");
doc.documentElement.innerHTML = evt.data['html']

$(doc).doSomeJQueryStuff();

// dom to html text
html = doc.documentElement.innerHTML;

Detect IE // Version

$(function() {

    if ($.browser.msie) {
      if ($.browser.version.substr(0,1) <= 7) {
        /* do something */
      }
    }

});

Timeout

setTimeout( function() {
   doSomething();
}, 500);

Load from CDN and fallback to local

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')</script>

Jquery in Joomla, Drupal & Co

Use the long syntax e.g. jQuery("#header").hide();