JavaScript DHTML/jQuery/Selector — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
м (1 версия)
 
(нет различий)

Текущая версия на 07:24, 26 мая 2010

Содержание

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

  
<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>
       <div><p>Hello in a paragraph</p></div>
    </body>
</html>



Ancestor descendant

      
<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>



Assign query result to variable

      
<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>
     <div></div>
  </body>
</html>



Contains another tag

      
<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>
       <p class="hello">Hello</p>

    </body>
</html>



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

  
<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>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>Last</td></tr>
    </table>

    </body>
</html>



Count hidden tags

      
<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>
      <span></span>
        <div></div>
        <div style="display:none;">Hider!</div>
        <div></div>
        <div class="starthidden">Hider!</div>
        <div></div>
        <form>
            <input type="hidden" />
            <input type="hidden" />
            <input type="hidden" />
        </form>
        <span></span>
  </body>
</html>



Doest it contain

      
<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.
      <div>asdf</div>
      <div>sdf</div>
      <div>df</div>
      <div>sdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <p></p>
  </body>
</html>



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

  

<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>
    <table>
        <tr><td>First</td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
    </table>

    </body>
</html>



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

      
<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 class="notMe">div </div>
      <div class="myClass">div</div>
      <span class="myClass myOtherClass">span</span>
  </body>
</html>



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

  
<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>
          <div>A div</div>
          <button>0</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <span></span>
    </body>
</html>



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

  
<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>
          <div>A div</div>
          <button>0</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <span></span>
    </body>
</html>



Find tag from just added HTML

      

<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> <div>");
            $("p").html(newText).find("div").hover(
                   function () { $(this).addClass("y"); },
                   function () { $(this).removeClass("y"); });
        });
    </script>
    <style>
      .y { background:yellow; }
  </style>
  </head>
  <body>
    <body>
       <p>a ab abc</p>
  </body>
</html>



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

  

<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>
          <div><p>Hello</p></div>
          <div class="selected"><p>Hello Again</p></div>
          
    </body>
</html>



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

  
<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>
    <h1>Header 1</h1>
    </body>
</html>



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

  
<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>



Hides all paragraphs then the link on click.

  
<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 class="myClass">p</p>
          <span class="myClass">span class="myClass"</span>
    </body>
</html>



HTML contains

      
<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> <div>");
            $("p").html(newText).find(":contains("a")")
            .css({"font-style":"italic"});
        });
    </script>
    <style>
      .y { background:yellow; }
  </style>
  </head>
  <body>
    <body>
       <p>a ab abc</p>
  </body>
</html>



jQuery custom filter selectors

  
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: <h1> through <h6> 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.



Make all visible divs turn yellow on click.

  
<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>
      <span></span>
      <div style="display:none;">Hider!</div>
      <div>click me</div>

    </body>
</html>



Matches all elements

      
<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 class="notMe">div </div>
      <div class="myClass">div</div>
      <span class="myClass myOtherClass">span</span>
  </body>
</html>



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

      
<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>
  <p>Contents 1</p>
  <h2>Header 2</h2>
  <p>Contents 2</p>


  </body>
</html>



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

      
<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>
      <table>
          <tr><td>data</td><td></td></tr>
          <tr><td>data</td><td></td></tr>
          <tr><td>data</td><td></td></tr>
      </table>
  </body>
</html>



Matches all elements with the given name.htm

      
<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>
      <div id="myID">0</div>
      <div id="myID1">1</div>
      <div id="myID2">2</div>
      <span>SPAN</span>
  </body>
</html>



Matches all input elements of type text.htm

      
<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>



Matches elements which contain the given text

      
<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>
      <div>Java</div>
      <div>C#</div>
      <div>JavaScript</div>
      <div>CSS</div>
  </body>
</html>



Methods to obtain new wrapped set based on relationships

  
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.



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

  

<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>
    <div>
        <input type="checkbox" name="a" />
    
        <span>A</span>
      </div>
      <div>
        <input type="checkbox" name="b" />
        <span>B</span>
      </div>
      <div>
        <input type="checkbox" name="c" checked="checked" />
    
        <span>C</span>
    </div>
    </body>
</html>



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

  

$("p").not($("div p.selected"))



Select more than one

      
<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>div</div>
      <p class="myClass">p</p>
      <p class="notMe">p</p>
      <span>span</span>

  </body>
</html>



Show hidden div tags

  
<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>
      <span></span>
      <div style="display:none;">Hider!</div>
      <div></div>

    </body>
</html>



visible() matches all elements that are visible.

  
<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>
      <span></span>
      <div style="display:none;">Hider!</div>
      <div>click me</div>

    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Selector&oldid=3003»