Articles of level

 jQuery submit method 
As a web developer, one needs to use HTML forms in many scenarios to collect the user information for different purposes. As a user clicks on the Submit button, a Submit event occurs.The jQuery provides the submit() method to handle the submit event where a function can be attached to perform certain actions e.g. checking the form fields before submitting the form to the server.

jQuery change event
In HTML form elements, when the value of an element like textbox, dropdown, text area etc. is changed the change event occurs. The jQuery change() method is used to perform some action or attach an event handler to the change event.
Syntax of change in jQuery
$(selector).change(function)
e.g.
$(“txtbox”).change(function)

Where the function is optional in the change method that executes as the change event happens.
Note that, the change event only works with the form’s elements. For the text boxes and text area, it occurs when focus is changed to some other elements after any changes.In case of select / dropdowns, the change event occurs when an option is selected.

The jQuery focus event happens when an element of HTML document gets focused by using the mouse click or the Tab key. In case of the links, a href="", the focus event occurs as it gets focus by using the Tab key.Whereas, in the form fields like text boxes, text area etc. the focus event occurs as the mouse is clicked into the elements.The focus method can be used to perform some action as the focus event occurs.

The jQuery focus event happens when an element of HTML document gets focused by using the mouse click or the Tab key. In case of the links, a href="", the focus event occurs as it gets focus by using the Tab key.Whereas, in the form fields like text boxes, text area etc. the focus event occurs as the mouse is clicked into the elements.The focus method can be used to perform some action as the focus event occurs.

Syntax of jQuery focus

$(selector).focus(function)

e.g.

$(“#txtbox”).focus(function)

$(“#link”).focus(function)

The scroll event happens when a browser window is scrolled. The Scroll event also occurs when a scrollable elements like textarea is scrolled.As scroll event occurs the jQuery scroll method  is used to perform the desired actions.
Syntax of scroll method
$(selector).scroll(function)
Where the selector can be a window or scrollable HTML element.

The load method, which is deprecated in 1.8 version of the jQuery library, was used to perform actions as the load event occurred.The load event happens when a specified element like images, iframes, frames scripts or window document loads completely.
Note: For load method of AJAX go to its own chapter.
The jQuery load method becomes challenging, especially in the case of images loading as it comes to compatibility of the browsers. When execution of functions is also attached to load jQuery method. For example, if images are already in the cache it may cease to execute.
Syntax of jQuery load method
$(selector).load(function)
e.g.
$(“image”).load(function)
$(“window”).load(function)

The bind method is used to bind or attach one or multiple event handlers to the elements. Though, from 1.7 version of jQuery, the preferred method to attach event handlers is the .on() method.The bind jQuery method can be used to have the similar action for multiple events to the specified element.
Syntax of jQuery bind
$(selector).bind(event,data,function)
Where,
Selector is an element where events have to be attached, like a paragraph, or div etc.
Event = One or more event names e.g. the click, mouseenter, mouseleave etc. This is the required parameter.
Data = data to be passed to the event handler (optional).
Function is required.

As some text is selected inside a text box or text area of your web page, the jQuery select event occurs. You can use the jQuery select method to perform some action as the select event occurs.
Syntax of using select method
$(“selector”).select(function());

In modern websites, we usually see as the mouse pointer is moved (hover) to the links or sometimes in content paragraphs or images, the color of the link changes or some other effects in images or paragraphs. This can be done in different ways, generally the jQuery hover method is used for this purpose.The hover method attaches or binds one or two event handlers or functions to the specified elements (like links, divs, paragraphs, images etc). These handlers or functions execute as the mouse pointer enters or leaves the specified/matched elements.
Syntax of jQuery hover
$(element).hover(handlerInFunction, handlerOutFunction)
Where:
handlerInFunction: Required. This function will execute in jQuery on hover, as the mouse pointer enters the specified element.
handlerOutFunction: Optional. This handler or function will execute as the mouse leaves the element.
If only one handler is given in hover method, it will execute for both mouseenter and mouseleave events.
e.g.
$(“p”).hover(handlerInFunction, handlerOutFunction)
$(“div”).hover(handlerInFunction, handlerOutFunction)

Sometimes you need to change the attributes of elements in your web page upon user actions or some other reason. For example, changing the image dimensions, height and width in the web page. Similarly, changing the paragraph, div properties, table borders, background color attributes etc. without reloading the web page. Similarly, it may also be required to get elements attributes, like current image height or width, table width etc. on the basis of which you can perform some action, all without reloading the web page. This is where jQuery attr works. The attr method is used to set or get/return element attributes in the document.
Syntax of jQuery attr
$(“element”).attr(“property”,”value”);
The syntax to Get attribute value is:
$(“element”).attr(“property”);
Where an element can be an image, a div, paragraph, table etc.
Note that, if you use attr jQuery method to set the attribute(s) of element, it will change attributes to all matched elements. Whereas in case of using it to return attribute value, it will return only the first matched element value.

PreviousDisplaying 2 of 3Next
1 2 3
Need Help? Contact Us.

Log in

*
*

Forgot password?

*

New User

*
*
*
*