-
text( ) returns Array<Element>
Matches all input elements of type text.
Example:
Finds all text inputs.
var input = $(":text").css({background:"yellow", border:"3px red solid"}); $("div").text("For this type jQuery found " + input.length + ".") .css("color", "red"); $("form").submit(function () { return false; }); // so it won't submitHTML:
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> <div> </div> -
text( ) returns String
Get the combined text contents of all matched elements.
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.Example:
Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).
var str = $("p:first").text(); $("p:last").html(str);HTML:
<p><b>Test</b> Paragraph.</p> <p></p> -
text( ) returns String
Get the combined text contents of all matched elements.
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.Example:
Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).
var str = $("p:first").text(); $("p:last").html(str);HTML:
<p><b>Test</b> Paragraph.</p> <p></p> -
text( String val ) returns jQuery
Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).Example:
Add text to the paragraph (notice the bold tag is escaped).
$("p").text("<b>Some</b> new text.");HTML:
<p>Test Paragraph.</p> -
text( String val ) returns jQuery
Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).Example:
Add text to the paragraph (notice the bold tag is escaped).
$("p").text("<b>Some</b> new text.");HTML:
<p>Test Paragraph.</p> -
toggle( ) returns jQuery
Toggles each of the set of matched elements.
If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.Example:
Toggles all paragraphs.
$("button").click(function () { $("p").toggle(); });HTML:
<button>Toggle</button> <p>Hello</p> <p style="display: none">Good Bye</p> -
toggle( Function fn, Function fn ) returns jQuery
Toggle between two function calls every other click.
<p>Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions.</p><p>Use unbind("click") to remove.</p>Example:
Click to toggle highlight on the list item.
$("li").toggle( function () { $(this).css("list-style-type", "disc") .css("color", "blue"); }, function () { $(this).css({"list-style-type":"", "color":""}); } );HTML:
<ul> <li>Go to the store</li> <li>Pick up dinner</li> <li>Debug crash</li> <li>Take a jog</li> </ul>Example:
To toggle a style on table cells:
$("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); -
toggleClass( String class ) returns jQuery
Adds the specified class if it is not present, removes the specified class if it is present.
Example:
Toggle the class 'highlight' when a paragraph is clicked.
$("p").click(function () { $(this).toggleClass("highlight"); });HTML:
<p class="blue">Click to toggle</p> <p class="blue highlight">highlight</p> <p class="blue">on these</p> <p class="blue">paragraphs</p> -
trigger( String type , Array data ) returns jQuery
Trigger a type of event on every matched element.
<p>This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing 'submit' to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.</p><p>You can also trigger custom events registered with bind.</p>Example:
Clicks to button #2 also trigger a click for button #1.
$("button:first").click(function () { update($("span:first")); }); $("button:last").click(function () { $("button:first").trigger('click'); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); }HTML:
<button>Button #1</button> <button>Button #2</button> <div><span>0</span> button #1 clicks.</div> <div><span>0</span> button #2 clicks.</div>Example:
To submit the first form without using the submit() function, try:
$("form:first").trigger("submit")Example:
To pass arbitrary data to an event:
$("p").click( function (event, a, b) { // when a normal click fires, a and b are undefined // for a trigger like below a refers too "foo" and b refers to "bar" } ).trigger("click", ["foo", "bar"]);Example:
This would display a "Hello World!" alert box.
$("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2); }); $("p").trigger("myEvent", ["Hello","World!"]); -
triggerHandler( String type , Array data ) returns jQuery
This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.
Example:
If you called .triggerHandler() on a focus event - the browsers default focus action would not be triggered, only the event handlers bound to the focus event.
$("#old").click(function(){ $("input").trigger("focus"); }); $("#new").click(function(){ $("input").triggerHandler("focus"); }); $("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });HTML:
<button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br/><br/> <input type="text" value="To Be Focused"/>