JQuery

From Things and Stuff Wiki
Jump to: navigation, search

Things and Stuff Wiki - an organically evolving knowledge base wiki with a totally on-the-fly taxonomy containing topic outlines, descriptions and breadcrumbs, with links to sites, systems, software, manuals, organisations, people, articles, guides, slides, papers, books, comments, screencasts, webcasts, scratchpads and more. use the Table of Contents for navigation on longer pages. see About for further information. / 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