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('$ find elements');
​
        test('new $(selector)', function(){
    document.getElementById('qunit-fixture').innerHTML = '<ul id="contacts"><li class="contact"/><li class="contact"/></ul>';
    
    var $contacts = new $('#contacts li.contact');
    equal( $contacts.length,  2, 'There are 2 contacts');
    
    equal( $contacts[0].nodeName.toLowerCase(), 'li', 'got an li');
    equal( $contacts[1].className, 'contact', 'got a .contact');
​
    ok($contacts instanceof $, '$ is an instance of my_jquery');
});
​
test('$.fn.html', function(){
    new $('#qunit-fixture').html('<ul id="contacts"><li class="contact"></li><li class="contact"></li></ul>');
    new $('.contact').html('Hi There');
​
    equal(new $('.contact').html(), 'Hi There', 'First contact html set correctly');
    equal(new $('.contact:nth-child(2)').html(), 'Hi There', 'Second contact html set correctly');
});
​
test('$.fn.val', function(){
    
    new $('#qunit-fixture').html('<input type="text" class="age"/><input type="text" class="age"/>');
    
    
    equal( new $('.age').val(), '', 'Input is initially empty');
    
    new $('.age').val('Hi There');
    
    equal( new $('.age').val(), 'Hi There', 'First .age value set correctly');
    
    equal( new $('.age:nth-child(2)').val(), 'Hi There', 'Second .age value set correctly');
});
​
test('$(selector)', function(){
    document.getElementById('qunit-fixture').innerHTML = '<ul id="contacts"><li class="contact"/><li class="contact"/></ul>';
​
    var $contacts = $('#contacts li.contact');
    equal( $contacts.length,  2, 'There are 2 contacts');
​
    equal( $contacts[0].nodeName.toLowerCase(), 'li', 'got an li');
    equal( $contacts[1].className, 'contact', 'got a .contact');
​
    ok($contacts instanceof $, 'instanceof $ without new');
});
​
test('$.fn.text', function(){
    
    $('#qunit-fixture').html('Hi <span>there</span>.');
    
    equal( $('#qunit-fixture').text(), 'Hi there.', 'The text is right');
    
    $('#qunit-fixture span').text('<input/>');
    
    equal( $('#qunit-fixture input').length, 0, 'there\'s no input');
    
    equal( $('#qunit-fixture span').text(), '<input/>', 'The text is what we sent' );
});
​
test('$.fn.find', function(){
    var $ul = $('#qunit-fixture')
        .html('<ul><li/><li/></ul><ul><li/><li/></ul>')
        .find('ul');
    
    equal($ul.length, 2, 'got 2 uls');
    equal($ul.find('li').length, 4, 'got four lis');
});
  </script>
</body>
</html>
 
//This week we'll be filling in the following methods: $, $.prototype.html, $.prototype.val, $.prototype.text and $.prototype.find. The code from last week's session has also been added in lines 5-54.
​
$ = function(selector) {};
​
$.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++) {
        if (cb.call(collection[i], i, collection[i]) === false) {
          break;
        }
      }
    } else {
      for (var prop in collection) {
        if (collection.hasOwnProperty(prop)) {
          if (cb.call(collection[prop], prop, collection[prop]) === false) {
            break;
          }
        }
      }
    }
    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
});
​
$.extend($.prototype, {
  html: function(newHtml) {},
  val: function(newVal) {},
  text: function(newText) {},
  find: function(selector) {}
});
Output

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

Dismiss x