1. text and html
- text: white. Original value is white, modified must be yellow.
- html: FSF. Original value is FSF, modified must be mozilla.
2. remove and empty
- remove: 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.
3. replaceWith
replaceWith: To replace. Original value is To replace, modified must be Replaced text.
4. attr and removeAttr
- Link 1: FSF. Original href attribute is https://www.fsf.org/, modified must be https://www.mozilla.org/.
- Link 2: FSF. Original name attribute is FSF, modified must be removed.
- 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.
- Link 4: FSF. Original name attribute is FSF, modified must be removed.
- 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
- hasClass: A span. A span with 1 class: myclass
- addClass: A span. Original has only myclass, modified has also addedclass.
- removeClass: A span. Original has myclass and otherclass, modified has only myclass.
- toggleClass to addClass: A span. Original has only myclass, modified has also addedclass.
- toggleClass to removeClass: A span. Original has myclass and otherclass, modified has only myclass.
- addClass array: A span. Original has only myclass, modified has also addedclass and otherclass.
- removeClass array: A span. Original has myclass, classtoremove1 and classtoremove2, modified has only myclass.
- toggleClass array: A span. Original has class1, and class3, modified has only class1 and class2.
- removeClass empty: A span. Original has classtoremove1 and classtoremove2, modified has none.
- toggleClass true: A span. Original has only myclass, modified has also addedclass.
- toggleClass false: A span. Original has myclass and otherclass, modified has only myclass.
- toggleClass array true: A span. Original has class1, modified has class1, class2, and class3.
- toggleClass array false: A span. Original has class1, class2, and class3, modified has only class1.
6. after, before, append and prepend
-
after: original contains Text 1 and Text 2, modified contains Text 1, New text and Text 2.
-
before: original contains Text 1 and Text 2, modified contains Text 1, New text and Text 2.
-
append: original contains Text 1 and Text 2, modified contains Text 1, Text 2 and New text.
-
prepend: original contains Text 1 and Text 2, modified contains New text, Text 1 and Text 2.
7. siblings, prev and next
-
id attrs of zz( '#t7-1-2' ).siblings() must be [ 't7-1-1', 't7-1-3' ]
-
id attr of zz( '#t7-2-2' ).prev() must be 't7-1-1'
-
id attr of zz( '#t7-3-2' ).next() must be 't7-3-3'
-
id attrs of zz( '#t7-4-2' ).siblings( '.selected' ) must be [ 't7-4-1', 't7-4-4' ]
- Text 1
- Text 2
- Text 3
- Text 4
8. children, index and parent
-
id attrs of zz( '#t8-1' ).children() must be [ 't8-1-1', 't8-1-2', 't8-1-3' ]
-
zz( '#t8-2-1' ).index() must be 1.
zz( '#t8-2-2' ).index() must be 2.
zz( '#t8-2-3' ).index() must be 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'.
-
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
Test for is 1
11. css
- Span 1. No style defined. zz( '#t11-1' ).css( 'color', 'red' ).
- Span 2. No style defined. zz( '#t11-2' ).css( 'background-color', 'red' ).
- Span 3. Style "color: green" defined. zz( '#t11-3' ).css( 'color', 'red' ).
- Span 4. Style "color: green" defined. zz( '#t11-4' ).css( 'background-color', 'red' ).
- Span 5. No style defined. zz( '#t11-5' ).css( {color:'white', 'background-color':'red'} ).
- Span 6. No style defined. zz( '#t11-6' ).css( {color:'white', backgroundColor:'red'} ).
- Span 7. No style defined. zz( '#t11-7' ).css( {'font-size': 15; } ).
- Span 8. No style defined. zz( '#t11-8' ).css( {'font-size': '15'; } ).
- 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