Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
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>
Output

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

Dismiss x
public
Bin info
alexisabrilpro
0viewers