Содержание

1 Adds class to all divs that have a paragraph inside of them.
2 Ancestor descendant
3 Assign query result to variable
4 Contains another tag
5 Contains(text) matches elements which contain the given text.
6 Count hidden tags
7 Doest it contain
8 empty() matches all elements that have no children (including text nodes).
9 Find all elements is to set the "context" to document.body
10 Find all elements within the "context" (document.body)
11 Finds every element (including head, body, etc).
12 Find tag from just added HTML
13 Find the parent element of each paragraph with a class "selected".
14 header() matches all elements that are headers, like h1, h2, h3 and so on.
15 Header 1
16 through elements.
hidden Selects hidden elements.

image Selects form images (input[type=image]).

input Selects form elements (input, select, textarea, button).

not(filter) Negates the specified filter.

parent Selects elements that have children (including text), but not empty elements.

password Selects password elements (input[type=password]).

radio Selects radio elements (input[type=radio]).

reset Selects reset buttons (input[type=reset] or button[type=reset]).

selected Selects option elements that are selected.

submit Selects submit buttons (button[type=submit] or input[type=submit]).

text Selects text elements (input[type=text]).

visible Selects elements that are visible.</source>
Make all visible divs turn yellow on click.

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

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
           $("div:has(p)").css("color","red");
       });
   </script>
 </head>
 <body>
   <body>

Hello in a paragraph

   </body>

</html></source>

Ancestor descendant

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   
   $("form input").css("border", "2px solid red");

 });
   </script>
 </head>
 <body>
     <form>
       <label>Child:</label>
       <input name="name" />
       <fieldset>
         <label>Grandchild:</label>
         <input name="newsletter" />
       </fieldset>
     </form>
 </body>

</html></source>

Assign query result to variable

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       var input = $("form input:text");
       $("div").text("For this type jQuery found " + input.length + ".");
       
       
   });
   </script>
 </head>
 <body>
    <form>
     <input type="text" />
   </form>

 </body>

</html></source>

Contains another tag

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("p").remove(":contains("Hello")");

       });
   </script>

 </head>
 <body>
   <body>

Hello

   </body>

</html></source>

Contains(text) matches elements which contain the given text.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
              
              $("tr:contains("F")").css("background-color", "#bbbbff");
       });
   </script>
 </head>
 <body>
   <body>

First

Middle

Last

   </body>

</html></source>

Count hidden tags

   <source lang="javascript">

<html>

 <head>
   <style>
     .test{ border: 1px solid red; }
   </style>
 
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
          $("div:hidden").show(3000);
   });
   </script>

 </head>
 <body>

Hider!

       <form>
           <input type="hidden" />
           <input type="hidden" />
           <input type="hidden" />
       </form>
       
 </body>

</html></source>

Doest it contain

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("div").one("click", function () {
             if ($(this).is(":contains("asdf")")) {
               $("p").text("It"s the asdf div.");
             }else{
               $("p").text("It"s NOT the asdf div.");
             }
             $("p").hide().slideDown("slow");
             
          });
       });
   </script>
 </head>
 <body>
   <body>
     Press each to see the text.

asdf

sdf

df

sdf

asdf

 </body>

</html></source>

empty() matches all elements that have no children (including text nodes).

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
            $("td:empty").text("Was empty!").css("background", "red");
       });
   </script>
 </head>
 <body>
   <body>

First

   </body>

</html></source>

Find all elements is to set the "context" to document.body

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   $(document).ready(function(){
     $("*", document.body).css("border","1px solid red");
   });
 });
   </script>
 </head>
 <body>

div

     span
 </body>

</html></source>

Find all elements within the "context" (document.body)

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("*", document.body).css("border","3px solid red");
       });
   </script>
 </head>
 <body>
   <body>

A div

         <button>0</button>
         <button>1</button>
         <button>2</button>
         <button>3</button>
         
   </body>

</html></source>

Finds every element (including head, body, etc).

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("*").css("border","3px solid red");
       });
   </script>
 </head>
 <body>
   <body>

A div

         <button>0</button>
         <button>1</button>
         <button>2</button>
         <button>3</button>
         
   </body>

</html></source>

Find tag from just added HTML

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){

var newText = $("p").text().split(" ").join("</div>

");

           $("p").html(newText).find("div").hover(
                  function () { $(this).addClass("y"); },
                  function () { $(this).removeClass("y"); });
       });
   </script>
   <style>
     .y { background:yellow; }
 </style>
 </head>
 <body>
   <body>

a ab abc

 </body>

</html></source>

Find the parent element of each paragraph with a class "selected".

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("p").parent(".selected").css("background", "yellow");
       });
   </script>
 </head>
 <body>
   <body>

Hello

Hello Again

   </body>

</html></source>

header() matches all elements that are headers, like h1, h2, h3 and so on.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $(":header").css({ background:"#CCC", color:"blue" });
       });
   </script>
 </head>
 <body>
   <body>

Header 1

   </body>

</html></source>

hidden() matches all elements that are hidden, or input elements of type "hidden".

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           alert($(":hidden").length);
       });
   </script>
 </head>
 <body>
   <body>
       <input type="button" value="Input Button"/>
   
       <input type="checkbox">asdf</input>
       <input type="checkbox" />
       <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>
   </body>

</html></source>

Hides all paragraphs then the link on click.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("p").hide();
       });
   </script>
 </head>
 <body>
   <body>

p

         span class="myClass"
   </body>

</html></source>

HTML contains

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){

var newText = $("p").text().split(" ").join("

");

           $("p").html(newText).find(":contains("a")")
           .css({"font-style":"italic"});
       });
   </script>
   <style>
     .y { background:yellow; }
 </style>
 </head>
 <body>
   <body>

a ab abc

 </body>

</html></source>

jQuery custom filter selectors

   <source lang="javascript">

Selector Description

animated Selects animated elements.

button Selects button (input[type=submit], input[type=reset],input[type=button], or button).

checkbox Selects check box elements (input[type=checkbox]).

checked Selects check checked boxes or radio buttons.

contains(foo) Selects only elements containing the text foo.

disabled Selects disabled form elements.

enabled Selects enabled form elements.

file Selects file elements (input[type=file]).

header Selects headers elements; for example:

through
elements.

hidden Selects hidden elements.

image Selects form images (input[type=image]).

input Selects form elements (input, select, textarea, button).

not(filter) Negates the specified filter.

parent Selects elements that have children (including text), but not empty elements.

password Selects password elements (input[type=password]).

radio Selects radio elements (input[type=radio]).

reset Selects reset buttons (input[type=reset] or button[type=reset]).

selected Selects option elements that are selected.

submit Selects submit buttons (button[type=submit] or input[type=submit]).

text Selects text elements (input[type=text]).

visible Selects elements that are visible.</source>

Make all visible divs turn yellow on click.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("div:visible").click(function () {
               $(this).css("background", "yellow");
           });
       
       });
   </script>
 </head>
 <body>
   <body>

click me

   </body>

</html></source>

Matches all elements

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   $(document).ready(function(){
     $("*").css("background","red");
   });
 });
   </script>
 </head>
 <body>

div

     span
 </body>

</html></source>

Matches all elements that are headers, like h1, h2, h3 and so on

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
    $(":header").css({ background:"#CCC", color:"blue" });
 });
   </script>
 </head>
 <body>
  <h1>Header 1</h1>

Contents 1

Header 2

Contents 2

 </body>

</html></source>

Matches all elements that have no children (including text nodes)

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
        $("td:empty").text("Was empty").css("background", "rgb(255,220,200)");
   });
   </script>

 </head>
 <body>

data
data
data

 </body>

</html></source>

Matches all elements with the given name.htm

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <style type="text/css">
       .changeP { font-weight: bold; color:red;}
   </style>
   <script type="text/javascript">
 $(document).ready(function(){
   $("div").css("border","1px solid red");
 });
   </script>
 </head>
 <body>

0

1

2

     SPAN
 </body>

</html></source>

Matches all input elements of type text.htm

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       var input = $("form input:text").css({background:"yellow"});
       
       
   });
   </script>
 </head>
 <body>
    <form>
     <input type="text" />
   </form>
 </body>

</html></source>

Matches elements which contain the given text

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $("div:contains("J")").css("text-decoration", "underline");
   });
   </script>
<style>
 div { background:yellow; width:80px; height:80px; margin:5px; float:left; }

 </style>
 </head>
 <body>

Java

C#

JavaScript

CSS

 </body>

</html></source>

Methods to obtain new wrapped set based on relationships

   <source lang="javascript">

Method Description children() Returns all unique children. contents() Returns contents of the elements. next() Returns all unique next siblings. nextAll() Returns all the following siblings. parent() Returns unique direct parents. parents() Returns unique ancestors. prev() Returns all unique previous siblings. prevAll() Returns all the previous siblings of the wrapped elements. siblings() Returns all unique siblings of the wrapped elements.</source>

not(selector) filters out all elements matching the given selector.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("input:not(:checked) + span").css("background-color", "yellow");
       });
   </script>
 </head>
 <body>
   <body>

       <input type="checkbox" name="a" />
   
       A

       <input type="checkbox" name="b" />
       B

       <input type="checkbox" name="c" checked="checked" />
   
       C

   </body>

</html></source>

Removes all elements that match "div p.selected" from the total set of all paragraphs.

   <source lang="javascript">

$("p").not($("div p.selected"))</source>

Select more than one

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   $("div,span,p.myClass").css("border","3px solid red");
 });
   </script>
 </head>
 <body>

div

p

     span

 </body>

</html></source>

Show hidden div tags

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("div:hidden").show(3000);
       
       });
   </script>
 </head>
 <body>
   <body>

   </body>

</html></source>

visible() matches all elements that are visible.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("div:visible").click(function () {
               $(this).css("background", "yellow");
           });
       
       });
   </script>
 </head>
 <body>
   <body>

click me

   </body>

</html></source>

JavaScript Tutorial/jQuery/Selector

Содержание

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

Ancestor descendant

Assign query result to variable

Contains another tag

Contains(text) matches elements which contain the given text.

Count hidden tags

Doest it contain

empty() matches all elements that have no children (including text nodes).

Find all elements is to set the "context" to document.body

Find all elements within the "context" (document.body)

Finds every element (including head, body, etc).

Find tag from just added HTML

Find the parent element of each paragraph with a class "selected".

header() matches all elements that are headers, like h1, h2, h3 and so on.

Header 1

hidden() matches all elements that are hidden, or input elements of type "hidden".

Hides all paragraphs then the link on click.

HTML contains

jQuery custom filter selectors

through elements.

elements.

Make all visible divs turn yellow on click.

Matches all elements

Matches all elements that are headers, like h1, h2, h3 and so on

Header 2

Matches all elements that have no children (including text nodes)

Matches all elements with the given name.htm

Matches all input elements of type text.htm

Matches elements which contain the given text

Methods to obtain new wrapped set based on relationships

not(selector) filters out all elements matching the given selector.

Removes all elements that match "div p.selected" from the total set of all paragraphs.

Select more than one

Show hidden div tags

visible() matches all elements that are visible.

Навигация

Поиск

through
elements.