Multiple tests

1. text and html

text:
- white. Original value is white, modified must be yellow.
- black. Original value is black, modified must be yellow.
- red. Original value is red, modified must be yellow.
html:
- FSF. Original value is FSF, modified must be mozilla.
- Ubuntu. Original value is Ubuntu, modified must be mozilla.
- NPM. Original value is NPM, modified must be mozilla.

2. remove and empty

remove:
- To remove. Original value is To remove, modified must be removed.
- Not to remove. Original value is Not to remove, modified must be not removed.
- To remove. Original value is To remove, modified must be removed.
empty:
- To be empty. Original value is To be empty, modified must be empty.
- To be empty. Original value is To be empty, modified must be empty.
- Not to be empty. Original value is Not to be empty, modified must be not empty.

3. replaceWith

replaceWith:

To replace. Original value is To replace, modified must be Replaced text.
Not to replace. Original value is Not to replace, modified must be not replaced.
To replace. Original value is To replace, modified must be Replaced text.

4. attr and removeAttr

attr:

FSF. Original value is FSF, modified must be the same.
Ubuntu. Original value is Ubuntu, modified must be https://www.mozilla.org/.
NPM. Original value is NPM, modified must be https://www.mozilla.org/.

removeAttr:

FSF. Original value is FSF, modified must be the same.
Ubuntu. Original value is Ubuntu, modified must be removed.
NPM. Original value is NPM, modified must be removed.

5. addClass, hasClass, removeClass and toggleClass

hasClass: 1 (yes), 2 (no) and 3 (yes)

A span. A span with class: myclass
A span. A span with no class: myclass
A span. A span with class: myclass

addClass:

A span. Original has myclass, modified has also addedclass
A span. A span with no class: myclass, modified has also addedclass
A span. Original has myclass, modified has also addedclass

removeClass:

A span. Original has myclass and otherclass, modified removes otherclass
A span. Original has otherclass, modified removes otherclass
A span. Original has myclass and otherclass, modified removes otherclass

toggleClass:

A span. Original has toggleclass, modified toggle serveral times
A span. Original has not myclass, modified toggle serveral times

hasClass: 1 (no), 2 (no) and 3 (yes)

A span. A span with no class: myclass
A span. A span with no class: myclass
A span. A span with class: myclass

hasClass: 1 (no), 2 (no) and 3 (no)

A span. A span with no class: myclass
A span. A span with no class: myclass
A span. A span with no class: myclass

6. after, before, append and prepend

after: original contains Text 1, Text 2 and Text 3, modified contains Text 1, New text, Text 2, Text 3 and New text.

Text 1
Text 2
Text 3

before: original contains Text 1, Text 2 and Text 3, modified contains New text, Text 1, Text 2, New text and Text 3.

Text 1
Text 2
Text 3

append:

List 1
- Text 1
- Text 2
List 2
- Text 3
- Text 4

prepend:

List 1
- Text 1
- Text 2
List 2
- Text 3
- Text 4

7. siblings, prev and next

siblings:

List 1
- Text 1
- Text 2
- Text 3
List 2
- Text 1
- Text 2
- Text 3

prev and next:

List 1
- Text 1
- Text 2
- Text 3
List 2
- Text 1
- Text 2
- Text 3

8. children, index and parent

children and index:

List 1
- Text 1
- Text 2
- Text 3
List 2
- Text 4
- Text 5
- Text 6

parent:

List 1
- Text 1
- Text 2
- Text 3
List 2
- Text 4
- Text 5
- Text 6

9. filter and find

Find:

A div

A nested div

A div

A nested div

A div

A nested div

A div

A nested div

Filter:

A div with a class

A div with a and b class

A div with no class

A div with a class

A div with a and b class

A div with no class

10. clone and is

Hello 1

Hello 2

Goodbye

Test for is 1

Test for is 2

Test for is 1

Test for is 2

11. css

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

12. height, width, outerHeight and outerWidth

zz( '.t12-1' ).height( '2em' ):

Div 1-1

Div 1-2

zz( '.t12-2' ).height( 100 ):

Div 2-1

Div 2-2

zz( '.t12-3' ).width( '10em' ):

Div 3-1

Div 3-2

zz( '.t12-4' ).width( 800 ):

Div 4-1

Div 4-2

zz( '.t12-5' ).height( '2em' ). Test outerHeight:

Div 5-1

Div 5-2

zz( '.t12-6' ).height( 100 ). Test outerHeight:

Div 6-1

Div 6-2

zz( '.t12-7' ).width( '10em' ). Test outerWidth:

Div 7-1

Div 7-2

zz( '.t12-8' ).width( 800 ). Test outerWidth:

Div 8-1

Div 8-2

13. offset, offsetParent and position

zz( '.t13-1' ).offset( { top: 10, left: 30 } )

t13-1-1-div

t13-1-2-div

zz( '.t13-2' ).offsetParent().addClass( 'selected' )

I
II
- A
- B
  - 1
  - 2
  - 3
- C
III

I
II
- A
- B
  - 1
  - 2
  - 3
- C
III

var position = zz( '.t13-3' ).position();

t13-3-1

t13-3-2

16. appendTo

appendTo string: zz( ... ).appendTo( '#t16-1' )

This is the container t16-1

appendTo Element: zz( ... ).appendTo( document.getElementById( 't16-2' ) )

This is the container t16-2

appendTo simpleZZDOM: zz( ... ).appendTo( zz( '#t16-3' ) )

This is the container t16-3

appendTo multipleZZDOM: zz( ... ).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( ... ).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-1

This is t17-1-2

18. array like syntax

zz( '.t18-1' )[ 0 ];
zz( '.t18-1' )[ 1 ];

This is t18-1-1

This is t18-1-2

14. trigger, on and off

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

Counter: 0

zz( '.t14-2' ).off( 'click' );

Counter: 0

zz( '.t14-3' ).off();

Counter: 0

zz( '.t14-4' ).off( 'click', listener );

Counter: 0

zz( '.t14-5-1' ).off( 'click', listener1 );
zz( '.t14-5-2' ).off( 'click', listener2 );

Counter: 0

zz( '.t14-6-1' ).off( 'click', listener1 );
zz( '.t14-6-2' ).off( 'focus', listener2 );

Counter: 0

zz( '.t14-7-1' ).off( 'click' );
zz( '.t14-7-2' ).off( 'focus' );

Counter: 0

zz( '.t14-8-1' ).off();
zz( '.t14-8-2' ).off();

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

'#t15-7-1' is visible and '#t15-7-2' is NOT visible: zz( '.t15-3' ).toggle()

Must be toggled

19. val and checked

input 1:
input 2:

textarea 1:
textarea 2:

button 1:
button 2:

single select 1:
single select 2:

multiple select 1:
multiple select 2:

checkbox 1 (unchecked):
checkbox 2 (checked):