Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  <title>JS Bin</title>
  <link href="http://code.jquery.com/qunit/qunit-1.18.0.css" rel="stylesheet"/>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
​
  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
​
  <script>
    var clickIt = function(el){
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, true, window,
            1, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
            el.dispatchEvent(event);
        };
    module('$ events');
​
    test('$.fn.on', function(){
            expect(3);
            
            var handler = function(){
                equal(this.nodeName.toLowerCase(), 'li', 'called back with an LI')
            }
        
            var $ul = $('#qunit-fixture').html('<ul><li><span id="one"/></li><li><span id="two"/></li></ul>')
                .children()
                
            $ul.on('click', 'li', handler);
​
            clickIt( $('#one')[0] );
            clickIt( $('#two')[0] );
            
            $ul.html('<li><span id="three"></span></li>');
            clickIt( $('#three')[0] );
        });
  </script>
</body>
</html>
 
#qunit-fixture span { padding-left: 20px; }
.big-width { width: 1000px; left: 0px; top: 0px; height: 1000px; position: absolute; }
#qunit-fixture div { padding: 20px; border: solid 10px black; }
.row { height: 100px; position: relative; }
#pos { position: absolute; top: 20px; left: 10px; }
 
//This week we'll be filling in the following methods: $.fn.attr. The code from last week's session(traversal) has also been added.
​
$ = function(selector) {
  if(!(this instanceof $)) {
    return new $(selector);
  }
​
  var elements;
​
  if(isArrayLike(selector)) {
    elements = selector;
  }
  else {
    elements = document.querySelectorAll(selector);
  }
​
  [].push.apply(this, elements);
};
​
$.extend = function(target, object) {
  for (var prop in object) {
    if (object.hasOwnProperty(prop)) {
      target[prop] = object[prop];
    }
  }
  return target;
};
var isArrayLike = function(obj) {
  return obj && typeof obj === "object" && (obj.length === 0 || typeof obj.length === "number" && obj.length > 0 && obj.length - 1 in obj);
};
$.extend($, {
  isArray: function(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]";
  },
  each: function(collection, cb) {
    if (isArrayLike(collection)) {
      for (var i = 0; i < collection.length; i++) {
        cb.call(collection[i], i, collection[i]);
      }
    } else {
      for (var prop in collection) {
        cb.call(collection[prop], prop, collection[prop]);
      }
    }
    return collection;
  },
  makeArray: function(arr) {
    if ($.isArray(arr)) {
      return arr;
    }
    var array = [];
    $.each(arr, function(i, item) {
      array[i] = item;
    });
    return array;
  },
  proxy: function(fn, context) {
    return function() {
      return fn.apply(context, arguments);
    };
  },
  fn: $.prototype
});
​
var makeTraverser = function(cb) {
  return function() {
    var elements = [],
        args = arguments;
​
    $.each(this, function() {
      var result = cb.apply(this, args);
​
      if(isArrayLike(result)) {
        [].push.apply(elements, result);
      }
      else if(result) {
        elements.push(result);
      }
    });
​
    return $(elements);
  };
};
​
$.extend($.prototype, {
  html: function(newHtml) {
    if(arguments.length > 0) {
      return $.each(this, function() {
        this.innerHTML = newHtml;
      });
    }
    else {
      return this[0].innerHTML;
    }
  },
  val: function(newVal) {
    if(arguments.length > 0) {
      return $.each(this, function() {
        this.value = newVal;
      });
    }
    else {
      return this[0].value;
    }
  },
  text: function(newText) {
    if(arguments.length > 0) {
      return $.each(this, function() {
        this.innerText = newText;
      });
    }
    else {
      return this[0].innerText;
    }
  },
  find: makeTraverser(function(selector) {
    return this.querySelectorAll(selector);
  }),
  next: makeTraverser(function() {
    return this.nextElementSibling;
  }),
  prev: makeTraverser(function() {
    return this.previousElementSibling;
  }),
  parent: makeTraverser(function() {
    return this.parentElement;
  }),
  children: makeTraverser(function() {
    return this.children;
  }),
  attr: function(name, val) {
    if(arguments.length > 1) {
      return $.each(this, function() {
        this.setAttribute(name, val);
      });
    }
    else {
      return this[0].getAttribute(name);
    }
  },
  css: function( cssProp, cssValue ) {
    if(arguments.length > 1) {
      return $.each(this, function(i, element){
        element.style[cssProp] = cssValue;
      });
    } else {
      var first = this[0];
      return document.defaultView.getComputedStyle(first)
        .getPropertyValue(cssProp);
    }
  },
  width: function() {
    var clientWidth = this[0].clientWidth;
    var paddingLeft = this.css('padding-left');
    var paddingRight = this.css('padding-right');
​
    return clientWidth - parseFloat(paddingLeft, 10) - parseFloat(paddingRight, 10);
  },
  show: function() {
    return this.css('display', '');
  },
  hide: function() {
    return this.css('display', 'none');
  },
  bind: function(eventName, cb) {
    return $.each(this, function() {
      this.addEventListener(eventName, cb);
    });
  },
  on: function(eventType, selector, handler) {
  },
  has: function(selector) {
  }
});
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x