Documentation

Release:jQuery 1.2/Selectors

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the full jQuery 1.2 Release Notes.

A couple new, convenient, selectors were added in this release - coupled with the move of XPath functionality to a separate plugin.

Contents

[edit]

:has(selector)

This matches all elements that contain at least one element that matches the specified selector.

This is a replacement for the XPath selector: [selector], included in jQuery 1.1 and older - :has() behaves identically.

Adds the class "test" to all divs that have a paragraph inside of them.

$("div:has(p)").addClass("test");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("div:has(p)").addClass("test");
  });
  </script>
  <style>.test{ border: 3px solid red; }</style>
</head>
<body>
  <div><p>Hello</p></div>
<div>Hello again!</div>
</body>
</html>

[edit]

:header

This matches all headers (h1, h2, h3, h4, h5, and h6 tags). This can be very useful for building Table of Contents for a page (especially where the order of the headers matters).

Adds a background color to all the headers on the page.

$(":header").css("background", "#EEE");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $(":header").css("background", "#EEE");
  });
  </script>
  <style>body{ font-size: 10px; font-family: Arial; } h1, h2 { margin: 3px 0; }</style>
</head>
<body>
  <h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
</body>
</html>

[edit]

:animated

Matches elements that are currently being animated by, at least, one animation.

Only run an animation if it isn't currently being run.

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
  });
  </script>
  <style>div{ background: #F5F5F5; border: 1px solid #AAA; width: 80px; height: 80px; position: relative; }</style>
</head>
<body>
  <button id="run">Run</button><div></div>
</body>
</html>

[edit]

XPath Selector Plugin

Since XPath selectors were removed form jQuery in 1.2, a new XPath Selector Plugin has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

An example of including and using the XPath selector plugin to find a child paragraph of a div and give it a border.

$("//div/p").css("border", "1px solid black");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("//div/p").css("border", "1px solid black");
  });
  </script>
  
</head>
<body>
  <script src="http://dev.jquery.com/view/trunk/plugins/xpath/jquery.xpath.js"></script>
<div><p>I'm a simple paragraph inside a div.</p></div>
<p>I'm a paragraph outside of a div.</p>
</body>
</html>

Retrieved from "http://docs.jquery.com/Release:jQuery_1.2/Selectors"