Lessons Learnt inJquery

Mouseover

Vs

Mouseenter

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:

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?

.is()

Vs

.hasClass()

.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?

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

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

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.

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

.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/

Questions ?

Thank You