1. text and html

  1. text: white. Original value is white, modified must be yellow.
  2. html: FSF. Original value is FSF, modified must be mozilla.

2. remove and empty

  1. remove: To remove. Original value is To remove, modified must be removed.
  2. empty: To be empty. Original value is To be empty, modified must be empty.

3. replaceWith

replaceWith: To replace. Original value is To replace, modified must be Replaced text.

4. attr and removeAttr

  1. Link 1: FSF. Original href attribute is https://www.fsf.org/, modified must be https://www.mozilla.org/.
  2. Link 2: FSF. Original name attribute is FSF, modified must be removed.
  3. Link 3: FSF. Original href attribute is https://www.fsf.org/, modified must be https://www.mozilla.org/. Original name attribute is FSF, modified must be removed.
  4. Link 4: FSF. Original name attribute is FSF, modified must be removed.
  5. Link 5: FSF. Original href attribute is https://www.fsf.org/, modified must be https://www.mozilla.org/. Original name attribute is FSF, modified must be removed.

5. addClass, hasClass, removeClass and toggleClass

  1. hasClass: A span. A span with 1 class: myclass
  2. addClass: A span. Original has only myclass, modified has also addedclass.
  3. removeClass: A span. Original has myclass and otherclass, modified has only myclass.
  4. toggleClass to addClass: A span. Original has only myclass, modified has also addedclass.
  5. toggleClass to removeClass: A span. Original has myclass and otherclass, modified has only myclass.
  6. addClass array: A span. Original has only myclass, modified has also addedclass and otherclass.
  7. removeClass array: A span. Original has myclass, classtoremove1 and classtoremove2, modified has only myclass.
  8. toggleClass array: A span. Original has class1, and class3, modified has only class1 and class2.
  9. removeClass empty: A span. Original has classtoremove1 and classtoremove2, modified has none.
  10. toggleClass true: A span. Original has only myclass, modified has also addedclass.
  11. toggleClass false: A span. Original has myclass and otherclass, modified has only myclass.
  12. toggleClass array true: A span. Original has class1, modified has class1, class2, and class3.
  13. toggleClass array false: A span. Original has class1, class2, and class3, modified has only class1.

6. after, before, append and prepend

  1. after: original contains Text 1 and Text 2, modified contains Text 1, New text and Text 2.
  2. before: original contains Text 1 and Text 2, modified contains Text 1, New text and Text 2.
  3. append: original contains Text 1 and Text 2, modified contains Text 1, Text 2 and New text.
  4. prepend: original contains Text 1 and Text 2, modified contains New text, Text 1 and Text 2.

7. siblings, prev and next

  1. id attrs of zz( '#t7-1-2' ).siblings() must be [ 't7-1-1', 't7-1-3' ]
  2. id attr of zz( '#t7-2-2' ).prev() must be 't7-1-1'
  3. id attr of zz( '#t7-3-2' ).next() must be 't7-3-3'
  4. id attrs of zz( '#t7-4-2' ).siblings( '.selected' ) must be [ 't7-4-1', 't7-4-4' ]

8. children, index and parent

  1. id attrs of zz( '#t8-1' ).children() must be [ 't8-1-1', 't8-1-2', 't8-1-3' ]
  2. zz( '#t8-2-1' ).index() must be 1.
    zz( '#t8-2-2' ).index() must be 2.
    zz( '#t8-2-3' ).index() must be 3.
  3. zz( '#t8-3-1' ).parent().attr( 'id' ) must be 't8-3'.
    zz( '#t8-3-2' ).parent().attr( 'id' ) must be 't8-3'.
    zz( '#t8-3-3' ).parent().attr( 'id' ) must be 't8-3'.
  4. id attrs of zz( '#t8-4' ).children( '.selected' ) must be [ 't8-4-1', 't8-4-3' ]

9. filter and find

id attrs of zz( '#t9-1' ).find( '.a' ) must be [ 't9-1-1', 't9-1-2', 't9-1-3-1' ]
id attrs of zz( '#t9-1' ).find( '.b' ) must be [ 't9-1-1', 't9-1-3-2', 't9-1-4', 't9-1-4-2' ]
id attrs of zz( '#t9-1' ).find( '.a.b' ) must be [ 't9-1-1' ]
id attrs of zz( '#t9-1' ).find( '.c' ) must be []
A div
A div
A div
A nested div
A nested div
A div
A nested div
A nested div
id attrs of zz( '#t9-2-1' ).filter( '.a' ) must be [ 't9-2-1' ]
id attrs of zz( '#t9-2-1' ).filter( '.b' ) must be []
id attrs of zz( '#t9-2-1' ).filter( '.a.b' ) must be []
id attrs of zz( '#t9-2-2' ).filter( '.a' ) must be [ 't9-2-2' ]
id attrs of zz( '#t9-2-2' ).filter( '.b' ) must be [ 't9-2-2']
id attrs of zz( '#t9-2-2' ).filter( '.a.b' ) must be [ 't9-2-2']
id attrs of zz( '#t9-2-3' ).filter( '.a' ) must be []
id attrs of zz( '#t9-2-3' ).filter( '.b' ) must be []
id attrs of zz( '#t9-2-3' ).filter( '.a.b' ) must be []
id attrs of zz( '#t9-2-1' ).filter( function( index, ss ){ return ss.attr( 'class') === 'a b' }; ) must be []
id attrs of zz( '#t9-2-2' ).filter( function( index, ss ){ return ss.attr( 'class') === 'a b' }; ) must be [ 't9-2-2' ]
A div with a class
A div with a and b class
A div with no class

10. clone and is

Hello
Goodbye
Test for is 1
Test for is 2

11. css

  1. Span 1. No style defined. zz( '#t11-1' ).css( 'color', 'red' ).
  2. Span 2. No style defined. zz( '#t11-2' ).css( 'background-color', 'red' ).
  3. Span 3. Style "color: green" defined. zz( '#t11-3' ).css( 'color', 'red' ).
  4. Span 4. Style "color: green" defined. zz( '#t11-4' ).css( 'background-color', 'red' ).
  5. Span 5. No style defined. zz( '#t11-5' ).css( {color:'white', 'background-color':'red'} ).
  6. Span 6. No style defined. zz( '#t11-6' ).css( {color:'white', backgroundColor:'red'} ).
  7. Span 7. No style defined. zz( '#t11-7' ).css( {'font-size': 15; } ).
  8. Span 8. No style defined. zz( '#t11-8' ).css( {'font-size': '15'; } ).
  9. Span 9. No style defined. zz( '#t11-9' ).css( {'font-size': function(){ ... }; } ).

12. height, width, outerHeight and outerWidth

zz( '#t12-1' ).height( '2em' ):
Div 1
zz( '#t12-2' ).height( 100 ):
Div 2
zz( '#t12-3' ).width( '10em' ):
Div 3
zz( '#t12-4' ).width( 800 ):
Div 4
zz( '#t12-5' ).height( '2em' ). Test outerHeight:
Div 5
zz( '#t12-6' ).height( 100 ). Test outerHeight:
Div 6
zz( '#t12-7' ).width( '10em' ). Test outerWidth:
Div 7
zz( '#t12-8' ).width( 800 ). Test outerWidth:
Div 8
.
Width, height, outerWidth and outerHeight of not visible elements
zz( '#t12-9' ).width()
zz( '#t12-9' ).height()
zz( '#t12-9' ).outerWidth()
zz( '#t12-9' ).outerHeight()
1234
Width, height, outerWidth and outerHeight of not visible elements with padding, border and margin
zz( '#t12-10' ).width()
zz( '#t12-10' ).height()
zz( '#t12-10' ).outerWidth()
zz( '#t12-10' ).outerHeight()
1234

13. offset, offsetParent and position

zz( '#t13-1' ).offset( { top: 10, left: 30 } )
t13-1-div
zz( '#t13-2-2' ).offsetParent().addClass( 'selected' )
var position = zz( '#t13-3-div' ).position();
t13-3-div

16. appendTo

appendTo string: zz( -div id="t16-1-1"-New div-div ).appendTo( '#t16-1' )
This is the container t16-1
appendTo Element: zz( -div id="t16-1-2"-New div-div ).appendTo( document.getElementById( 't16-2' ) )
This is the container t16-2
appendTo simpleZZDOM: zz( -div id="t16-1-3"-New div-div ).appendTo( zz( '#t16-3' ) )
This is the container t16-3
appendTo multipleZZDOM: zz( -div id="t16-1-4"-New div-div ).appendTo( zz( '.t16-4-class' ) )
This is the container t16-4a
Separator 1
This is the container t16-4b
Separator 2
This is the container t16-4c
appendTo Element: zz( -div id="t16-1-5"-New div-div ).appendTo( document.getElementById( 'non-existing-id-DOM' ) )
This is the container t16-5

17. each

zz( '#t17-1' ).each( function( index, currentValue, array ){ ... } );
This is t17-1

18. array like syntax

zz( '#t18-1' )[ 0 ];
zz( '#t18-1' )[ 1 ];
This is t18-1

14. trigger, on and off

zz( '#t14-1' ).trigger( 'click' );

Counter: 0
zz( '#t14-2b' ).off( 'click' );

Counter: 0
zz( '#t14-3b' ).off();

Counter: 0
zz( '#t14-4b' ).off( 'click', listener );

Counter: 0
zz( '#t14-5b' ).off( 'click', listener2 );

Counter: 0
zz( '#t14-6b' ).off( 'focus', listener2 );

Counter: 0
zz( '#t14-7b' ).off( 'focus' );

Counter: 0
zz( '#t14-8b' ).off();

Counter: 0
zz( '#t14-9b' ).on( ... ); (using data)

Counter: 0

15. hide, show, toggle and isVisible

zz( '#t15-1' ).hide()
Must be hided
zz( '#t15-2' ).show()
Must be shown
'#t15-3' is visible: zz( '#t15-3' ).toggle()
Must be toggled
'#t15-4' is NOT visible: zz( '#t15-4' ).toggle()
Must be toggled
zz( '#t15-5' ).isVisible()
Is visible
zz( '#t15-6' ).isVisible()
Is NOT visible
display is inline:
zz( '#t15-7-2' ).hide();
zz( '#t15-7-2' ).show();
Span 1 Span 2 Span 3
'#t15-8' is visible, must be hide: zz( '#t15-8' ).toggle( false )
Must be toggled
'#t15-9' is visible, do not change: zz( '#t15-8' ).toggle( true )
Must be toggled
'#t15-10' is NOT visible, do not change: zz( '#t15-10' ).toggle( false )
Must be toggled
'#t15-11' is NOT visible, must be shown: zz( '#t15-11' ).toggle( true )
Must be toggled
zz( '#t15-12' ).hide()
Must not be changed
zz( '#t15-13' ).show()
Must not be changed
zz( '#t15-14' ).hide()
zz( '#t15-14' ).show()
Must not be changed

19. val and checked

input:
textarea:
button:
single select:
multiple select:
checkbox (unchecked):
checkbox (checked):

20. center

getXCenteredPosition, getYCenteredPosition and getCenteredPosition
t20-1
centerX
t20-2
centerY
t20-3
center
t20-4