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>
    module('$ attributes');
​
    test('$.fn.css', function(){
            $('#qunit-fixture').html('<span>Content</span><span>Second</span>');
            equal( $('#qunit-fixture span').css('padding-left'), '20px');
​
            $('#qunit-fixture span').css('paddingLeft', '40px');
​
            equal( $('#qunit-fixture span').css('padding-left'), '40px','first span set to 40px');
            equal( $('#qunit-fixture span:nth-child(2)').css('padding-left'),'40px', 'second span set to 40px');
        });
​
        test('$.fn.width', function(){
            $('#qunit-fixture').html('<div class="big-width"><div>Element</div></div>');
            equal( $('#qunit-fixture .big-width div').width(), 1000 - 60, 'width is correct');
        });
​
        test('$.fn.show and $.fn.hide', function(){
            $('#qunit-fixture').html('<div id="el">text</div>');
            
            equal( $('#el').hide()[0].style.display, 'none');
            equal( $('#el').show()[0].style.display, '');
        });
  </script>
</body>
</html>
 
//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() {},
  width: function() {},
  show: function() {},
  hide: function() {}
});
Output

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

Dismiss x