Welcome to JS Bin
Load cached copy from
 
<!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.attr', function(){
            equal( $('#qunit-fixture').attr('id'), 'qunit-fixture' ,'can read id' );
            
            $('#qunit-fixture').html('<span></span><span></span>');
            
            $('#qunit-fixture span').attr('foo','bar');
            
            equal($('#qunit-fixture span')[0].getAttribute('foo'), 'bar', 'attribute set successfully');
            equal($('#qunit-fixture span')[1].getAttribute('foo'), 'bar', 'attribute set successfully');
            
            $('#qunit-fixture span')[0].setAttribute('foo','BAR');
            
            equal($('#qunit-fixture span').attr('foo'), 'BAR', 'read the first item in the collection\'s attr');
        });
  </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() {}
});
Output

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

Dismiss x