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.
before: original contains Text 1, Text 2 and Text 3, modified contains New text, Text 1, Text 2, New text and Text 3.
append:
prepend:
7. siblings, prev and next
siblings:
prev and next:
8. children, index and parent
children and index:
parent:
9. filter and find
Find:
A div
A div
A div
A nested div
A nested div
A div
A nested div
A nested div
A div
A div
A div
A nested div
A nested div
A div
A nested 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
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(){ ... }; } );
12. height, width, outerHeight and outerWidth
zz( '.t12-1' ).height( '2em' ):
zz( '.t12-2' ).height( 100 ):
zz( '.t12-3' ).width( '10em' ):
zz( '.t12-4' ).width( 800 ):
zz( '.t12-5' ).height( '2em' ). Test outerHeight:
zz( '.t12-6' ).height( 100 ). Test outerHeight:
zz( '.t12-7' ).width( '10em' ). Test outerWidth:
zz( '.t12-8' ).width( 800 ). Test outerWidth:
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' )
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
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
Must be hided
zz( '.t15-2' ).show()
Must be shown
Must be shown
'.t15-3' is visible: zz( '.t15-3' ).toggle()
Must be toggled
Must be toggled
'.t15-4' is NOT visible: zz( '.t15-4' ).toggle()
Must be toggled
Must be toggled
zz( '.t15-5' ).isVisible()
Is visible
Is visible
zz( '.t15-6' ).isVisible()
Is NOT visible
Is NOT visible
'#t15-7-1' is visible and '#t15-7-2' is NOT visible: zz( '.t15-3' ).toggle()
Must be toggled
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):
checkbox 1 (unchecked):
checkbox 2 (checked):