-
has( Selector selector ) returns Array<Element>
Matches elements which contain at least one element that matches the specified selector.
Example:
Adds the class "test" to all divs that have a paragraph inside of them.
$("div:has(p)").addClass("test");HTML:
<div><p>Hello in a paragraph</p></div> <div>Hello again! (with no paragraph)</div> -
hasClass( String class ) returns Boolean
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
This is an alternative to is("." + class).Example:
Check to see if an element has a specific class, and if so, perform an action.
$("div").click(function(){ if ( $(this).hasClass("protected") ) $(this).animate({ left: -10 }, 75) .animate({ left: 10 }, 75) .animate({ left: -10 }, 75) .animate({ left: 10 }, 75) .animate({ left: 0 }, 75); });HTML:
<span></span><div class="protected"></div> <span></span><div></div> <span></span><div></div> <span></span><div class="protected"></div> -
header( ) returns Array<Element>
Matches all elements that are headers, like h1, h2, h3 and so on.
Example:
Adds a background and text color to all the headers on the page.
$(":header").css({ background:'#CCC', color:'blue' });HTML:
<h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p> -
height( ) returns Integer
Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.Example:
Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
function showHeight(ele, h) { $("div").text("The height for the " + ele + " is " + h + "px."); } $("#getp").click(function () { showHeight("paragraph", $("p").height()); }); $("#getd").click(function () { showHeight("document", $(document).height()); }); $("#getw").click(function () { showHeight("window", $(window).height()); });HTML:
<button id="getp">Get Paragraph Height</button> <button id="getd">Get Document Height</button> <button id="getw">Get Window Height</button> <div> </div> <p> Sample paragraph to test height </p> -
height( String or Number val ) returns jQuery
Set the CSS height of every matched element.
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.Example:
To set the height of each div on click to 30px plus a color change.
$("div").one('click', function () { $(this).height(30) .css({cursor:"auto", backgroundColor:"green"}); });HTML:
<div></div> <div></div> <div></div> <div></div> <div></div> -
hide( ) returns jQuery
Hides each of the set of matched elements if they are shown.
Same as <a href='Effects/hide#speedcallback'>hide( speed, [callback] )</a> without animations. Doesn't change anything if the selected elements are all hidden.Example:
Hides all paragraphs then the link on click.
$("p").hide(); $("a").click(function () { $(this).hide(); return false; });HTML:
<p>Hello</p> <a href="#">Click to hide me too</a> <p>Here is another paragraph</p> -
hide( String, Number speed, Function callback ) returns jQuery
Hide all matched elements using a graceful animation and firing an optional callback after completion.
The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.Example:
Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
$("button").click(function () { $("p").hide("slow"); });HTML:
<button>Hide 'em</button> <p>Hiya</p> <p>Such interesting text, eh?</p>Example:
Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
$("#hidr").click(function () { $("span:last-child").hide("fast", function () { // use callee so don't have to name the function $(this).prev().hide("fast", arguments.callee); }); }); $("#showr").click(function () { $("span").show(2000); });HTML:
<button id="hidr">Hide</button> <button id="showr">Show</button> <div> <span>Once</span> <span>upon</span> <span>a</span> <span>time</span> <span>there</span> <span>were</span> <span>three</span> <span>programmers...</span> </div>Example:
Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.
for (var i = 0; i < 5; i++) { $("<div>").appendTo(document.body); } $("div").click(function () { $(this).hide(2000, function () { $(this).remove(); }); });HTML:
<div></div> -
hover( Function over, Function out ) returns jQuery
Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).Example:
To add a special style to table cells that are being hovered over, try:
$("li").hover( function () { $(this).append($("<span> ***</span>")); }, function () { $(this).find("span:last").remove(); } );HTML:
<ul> <li>Milk</li> <li>Bread</li> <li>Chips</li> <li>Socks</li> </ul>Example:
To add a special style to table cells that are being hovered over, try:
$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); -
html( ) returns String
Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
Example:
Click a paragraph to convert it from html to text.
$("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });HTML:
<p> <b>Click</b> to change the <span id="tag">html</span> </p> <p> to a <span id="text">text</span> node. </p> <p> This <button name="nada">button</button> does nothing. </p> -
html( ) returns String
Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
Example:
Click a paragraph to convert it from html to text.
$("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });HTML:
<p> <b>Click</b> to change the <span id="tag">html</span> </p> <p> to a <span id="text">text</span> node. </p> <p> This <button name="nada">button</button> does nothing. </p> -
html( string val ) returns jQuery
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
Example:
Add some html to each div.
$("div").html("<span class='red'>Hello <b>Again</b></span>");HTML:
<span>Hello</span> <div></div> <div></div> <div></div>Example:
Add some html to each div then immediately do further manipulations to the inserted html.
$("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")) .css("color", "red");HTML:
<div></div> <div></div> <div></div> -
html( string val ) returns jQuery
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
Example:
Add some html to each div.
$("div").html("<span class='red'>Hello <b>Again</b></span>");HTML:
<span>Hello</span> <div></div> <div></div> <div></div>Example:
Add some html to each div then immediately do further manipulations to the inserted html.
$("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")) .css("color", "red");HTML:
<div></div> <div></div> <div></div>