3. Mouseover vs Mouseenter
● Both events triggers when we move mouse-pointer from outer div to
inner div
● But mouseover triggers unnecessary when the the elements on which
we have set this event contains many inner divisions. So to avoid this
situation we can prefer mouseenter.
● Ex 1: http://jsfiddle.net/ZCWvJ/7/
● Ex 2:
4. Mouseout vs Mouseleave
● Both events triggers when we move mouse-pointer from inner div to
outer div.
● But mouseout triggers unnecessary when the the elements on which
we have set this event contains many inner divisions. So to avoid this
situation we can prefer mouseleave.
● Ex 2:
What is Hover event?
6. .hasClass( ) vs .is( )
● .hasClass() checks whether given element has particular class or not.
● .is() is multipurpose by using which we can check whether the element has
particular id , class and element satisfies particular condition or not.
● Ex: $(“p”).is(“:hidden”), to check element is hidden or not?
$(“p”).is(“#mypara”), to check element has particular id or not?
$(“p”).is(“.mypara”), to check element has particular class or not?
$( "li:first" ).is( "li:last" ), to check only one list element is present or not?
7. Conflicts in elements visibility in css and html vs Jquery
CSS properties:
● visibility: hidden
● display: none
● opacity: 0
HTML :
● Type attribute of input
<input type=”hidden”>
JQuery:
● .hide() method
8. CSS
Property
Width and Height of
element on
screen
Cursor navigation
using tab key
Responds to
events
display: none 0 No No
visibility: hidden Yes No No
opacity: 0 Yes Yes Yes
9. Conflicts in elements visibility in css and html vs Jquery
In Jquery Elements hidden only if it satisfies following condition.
● They have a CSS display value of none.
● They are form elements with input type="hidden".
● Their width and height are explicitly set to 0.
● An ancestor element is hidden, so the element is not shown on the page.
Elements with visibility: hidden or opacity: 0 are considered to be visible, since they
still consume space in the layout.
An element is assumed to be hidden if it or any of its parents consumes no space in the
document. CSS visibility isn't taken into account.
10. Conflicts in elements visibility in css and html vs Jquery
$( elem ).css( "display", "none" ).is( ":hidden" ) == true
=> true
$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == true
=> false
$( elem ).css("opacity","0").is(":hidden") == true
=> false
11. .append() vs after() and prepend() vs before()
● append() & prepend() are for inserting content inside an element (making the
content its child).
● while after() & before() insert content outside an element (making the content
its sibling).
Ex: http://jsfiddle.net/k4raa2gh/1/
