-
before( String, Element, jQuery content ) returns jQuery
Insert content before each of the matched elements.
Example:
Inserts some HTML before all paragraphs.
$("p").before("<b>Hello</b>");HTML:
<p> is what I said...</p>Example:
Inserts a DOM element before all paragraphs.
$("p").before( document.createTextNode("Hello") );HTML:
<p> is what I said...</p>Example:
Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
$("p").before( $("b") );HTML:
<p> is what I said...</p><b>Hello</b> -
bind( String type, Object data, Function fn ) returns jQuery
Binds a handler to a particular event (like click) for each matched element. Can also bind custom events.
The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element.
In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.Example:
Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.
$("p").bind("click", function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span").text("Click happened! " + str); }); $("p").bind("dblclick", function(){ $("span").text("Double-click happened in " + this.tagName); });HTML:
<p>Click or double click here.</p> <span></span>Example:
To display each paragraph's text in an alert box whenever it is clicked:
$("p").bind("click", function(){ alert( $(this).text() ); });Example:
You can pass some extra data before the event handler:
function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)Example:
To cancel a default action and prevent it from bubbling up, return false:
$("form").bind("submit", function() { return false; })Example:
To cancel only the default action by using the preventDefault method.
$("form").bind("submit", function(event){ event.preventDefault(); });Example:
Stop only an event from bubbling by using the stopPropagation method.
$("form").bind("submit", function(event){ event.stopPropagation(); });Example:
Can bind custom events too.
$("p").bind("myCustomEvent", function(e, myName, myValue){ $(this).text(myName + ", hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent", [ "John" ]); });HTML:
<p>Has an attached custom event.</p> <button>Trigger custom event</button> <span style="display:none;"></span> -
blur( ) returns jQuery
Triggers the blur event of each matched element.
This causes all of the functions that have been bound to that blur event to be executed, and calls the browser's default blur action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the blur event. The blur event usually fires when an element loses focus either via the pointing device or by tabbing navigationExample:
To triggers the blur event on all paragraphs:
$("p").blur(); -
blur( Function fn ) returns jQuery
Bind a function to the blur event of each matched element.
The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.Example:
To pop up an alert saying "Hello World!" every time any paragraph's blur event triggers:
$("p").blur( function () { alert("Hello World!"); } );