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

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

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

attributeContains(attribute, value) matches specified attribute

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


attributeEndsWith(attribute, value): have the specified attribute and it ends with a certain value.

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


attributeEquals(attribute, value) matches elements with the specified attribute

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


attributeHas(attribute) matches elements that have the specified attribute.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div[id]").one("click", function(){
              var idString = $(this).text() + " = " + $(this).attr("id");
              $(this).text(idString);
            });
        });
    </script>
  </head>
  <body>
    <body>
      <div>no id</div>
      <div id="hey">with id</div>
    </body>
</html>


attributeMultiple(selector1, selector2, selectorN) matches elements with specified attribute

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


attributeNotEqual(attribute, value) matches elements that don"t have the specified attribute

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


Get by attribute

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("div[id]").one("click", function(){
              var idString = $(this).text() + " = " + $(this).attr("id");
              $(this).text(idString);
          });
    });
    </script>
  </head>
  <body>
      Click to see.
      <div>div</div>
      <div id="hey">div</div>
  </body>
</html>


match all of the specified attribute filters

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("input[id][name$="data"]").val("data");

    });
    </script>
  </head>
  <body>
      <input id="end-data" name="data" />
  </body>
</html>


Select attribute and it ends with a certain value

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("input[name$="Abc"]").val("data");
    });
    </script>
  </head>
  <body>
      <input name="Abc" />
      <input name="Bcd" />
      <input name="Cde" />
  </body>
</html>


Select attribute by value

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("input[name="me"]").next().text(" changed");

    });
    </script>
  </head>
  <body>
      <div>
        <input type="radio" name="me" value="A" />
        <span>data</span>
      </div>
      <div>
        <input type="radio" name="me" value="B" />
          <span>data</span>
      </div>
      <div>
        <input type="radio" name="me" value="C" />
        <span>data</span>
      </div>
  </body>
</html>


Select attribute: not equals

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("input[name!="me"]").next().text(" changed");

    });
    </script>
  </head>
  <body>
      <div>
        <input type="radio" name="you" value="A" />
        <span>data</span>
      </div>
      <div>
        <input type="radio" name="me" value="B" />
          <span>data</span>
      </div>
      <div>
        <input type="radio" name="me" value="C" />
        <span>data</span>
      </div>
  </body>
</html>


Select attribute: start with

<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("data");
    });
    </script>
  </head>
  <body>
      <input name="Abc" />
      <input name="Bcd" />
      <input name="Cde" />
  </body>
</html>


Select attribute value

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("div[id]").one("click", function(){
              var idString = $(this).text() + " = " + $(this).attr("id");
              $(this).text(idString);
          });
    });
    </script>
  </head>
  <body>
      Click to see.
      <div>div</div>
      <div id="hey">div</div>
  </body>
</html>


Select attribute value: match value

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("input[name*="Abc"]").val("Abc");

    });
    </script>
  </head>
  <body>
      <input name="Abc" />
      <input name="Bcd" />
      <input name="Cde" />
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector_Attribute&oldid=9711»