JQuery

From Things and Stuff Wiki
Jump to: navigation, search

Things and Stuff Wiki - An organically evolving personal wiki knowledge base with an on-the-fly taxonomy containing a patchwork of topic outlines, descriptions, notes and breadcrumbs, with links to sites, systems, software, manuals, organisations, people, articles, guides, slides, papers, books, comments, videos, screencasts, webcasts, scratchpads and more. Quality varies drastically. Use the Table of Contents menu to navigate long pages, use the header Small-ToC and Tiny-ToC links to reduce the menu size. Possibly not that mobile friendly atm. Feedback, general contacting me, and IRC idling in #tnswiki on Freenode (web chat). See About for login and other info. / et / em

General

  • 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 with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Learning

  • jQuery Fundamentals is designed to get you comfortable working through common problems you'll be called upon to solve using jQuery. To get the most out of this site, you'll want to read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept.
  • http://ejohn.org/blog/selectors-in-javascript - history

Video

News

API

(jQuery & jQueryUI)

$('.circle').on('click', function() {
   var $this = $(this);
   $this.css('z-index', 2)
   .siblings('.circle').removeClass('expanded').css('z-index', 1);
   $this.animate({
       left: 0, top: 0, margin: 0, 
       width: '100%', height: '100%',
       'border-radius': 0, padding: '60px 5px 5px 5px'
   }, 1000).addClass('expanded');
   $this.siblings('.circle').animate({
       left: 0, top: 0, height: 50, width: 50,
       'border-radius': 25, padding: '0'
   }).first().css({ 'margin': '5px' })
     .next().css({ 'margin': '5px 5px 5px 55px' });
   $this.css('z-index', 0);
});

Events

Position

$(window).scroll(function() {
   var winTop = $(this).scrollTop();
   var $divs = $('div');

   var top = $.grep($divs, function(item) {
       return $(item).position().top <= winTop;
   });

   $divs.removeClass('active');
   $(top).addClass('active');
});

.css

$('#divID').css("background-image", "url(/myimage.jpg)");

Development

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

Performance

Plugins

Mobile

Tutorials

Data attributes

Events

Methods

Themes