JavaScript Tutorial/jQuery/Selector Form

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Содержание

checkbox() matches all input elements of type checkbox.

   <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($(":checkbox").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>


checked() matches all elements that are checked.

   <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($("input:checked").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>


disabled() matches all elements that are disabled.

   <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($("input:disabled").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <input type="button" value="Input Button" disabled="disabled"/>
   
       <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>
   </form>    
   </body>

</html></source>


enabled() matches all elements that are enabled.

   <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($("input:enabled").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <input type="button" value="Input Button" disabled="disabled"/>
   
       <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>
   </form>    
   </body>

</html></source>


file() matches all input elements of type file.

   <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($(":file").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>


Finds all button inputs.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $(":button").css({background:"yellow", border:"3px red solid"});
       });
   </script>
 </head>
 <body>
   <body>
       <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>
   </body>

</html></source>


Finds all inputs of type radio within the first form in the document

   <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(){
    alert($("input:radio", document.forms[0]).length);
  });
   </script>
 </head>
 <body>
  <form>
     <input type="radio" value="Option">
  </form>
 </body>

</html></source>


Finds all inputs that are not checked and highlights the next sibling span.

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


Finds all inputs that don"t have the name "n"

   <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[name!="n"]").val(" not n");
       });
   </script>
 </head>
 <body>
   <body>
     <input type="text" name="newsletter" value="Hot Fuzz" />
   </body>

</html></source>


Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.

   <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[id][name$="m"]").val("asdf");
       });
   </script>
 </head>
 <body>
   <body>
     <input id="a" name="m" />
   </body>

</html></source>


Finds all inputs that with a name attribute that contains "a"

   <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[name*="a"]").val("a");
       
       });
   </script>
 </head>
 <body>
   <body>
     <input name="a" />
   </body>

</html></source>


Finds all inputs with an attribute name that ends with "b"

   <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[name$="b"]").val("a");
       
       });
   </script>
 </head>
 <body>
   <body>
     <input name="ab" />
   </body>

</html></source>


Finds all inputs with name "ab"

   <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[name="ab"]").val("ab");
       
       });
   </script>
 </head>
 <body>
   <body>
     <input name="ab" />
   </body>

</html></source>


Finds the button with no siblings in each matched div and modifies look.

   <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 ul:only-child").text("only has ul").css("border", "2px blue solid");
       });
   </script>
 </head>
 <body>
   <body>
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
   </body>

</html></source>


Find the very next sibling of each disabled button and change its text "this button is disabled".

   <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").next().text("asdf");   
       });
   </script>
 </head>
 <body>
   <body>
       

bad or .

good
   </body>

</html></source>


Get all form children

   <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($("form > *").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>


Get disabled form fields

   <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:disabled").val("data");
       });
   </script>
 </head>
 <body>
   <form>
      <input name="email" disabled="disabled" />
      
   </form>
 </body>

</html></source>


Get enabled form fields

   <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:enabled").val("data");
       });
   </script>
 </head>
 <body>
   <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
   </form>
 </body>

</html></source>


image() matches all input elements of type image.

   <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($(":image").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>


input() matches all input, textarea, select and button 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(){
           alert($(":input").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>


password() matches all input elements of type password.

   <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($(":password").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>


radio() matches all input elements of type radio.

   <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($(":radio").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>


reset() matches all input elements of type reset.

   <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($(":reset").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>


selected() matches all elements that are 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(){
               $("select").change(function () {
                 var str = "";
                 $("select option:selected").each(function () {
                       str += $(this).text() + " ";
                 });
                 $("div").text(str);
               })
               .trigger("change");
     
       });
   </script>
 </head>
 <body>
   <body>
   <select name="garden" multiple="multiple">
       <option>A</option>
   
       <option selected="selected">B</option>
       <option>C</option>
       <option selected="selected">D</option>
       <option>E</option>
       <option>F</option>
   </select>
   
   </body>

</html></source>


Shows all hidden divs and counts hidden inputs.

   <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);
           $(":hidden").show(3000);
       });
   </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>


submit() matches all input elements of type submit.

   <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($(":submit").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>


text() matches all input elements of type 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(){
           alert($(":text").length);
     
       });
   </script>
 </head>
 <body>
   <body>
   <form>
       <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>
   </form>    
   </body>

</html></source>