JavaScript Tutorial/jQuery/css function

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

Add border to DIV

<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(){
    $("#myID\\.index\\[1\\]").css("border","3px solid red");
  });
    </script>
  </head>
  <body>
  <div id="myID.index[0]">0</div>
  <div id="myID.index[1]">1</div>
  <div id="myID.index[2]">2</div>

  </body>
</html>


Add paragraph and set the style

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("div").css("color", "red").add("p").css("background", "yellow");
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <div>asdf</div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
  </body>
</html>


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

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


css(name): Return a style property on the matched element.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("div").click(function () {
                  var color = $(this).css("background-color");
                  alert(color);
                });

        });
    </script>
  </head>
  <body>
    <body>
           <div style="background-color:blue;">asdf</div>
                 
    </body>
</html>


css(name, value): If a number is provided, it is automatically converted into a pixel value.

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


css(properties): set several style properties on matched elements.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                   $("p").hover(function () {
                      $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
                    }, function () {
                      var cssObj = {
                        backgroundColor: "#ddd",
                        color: "rgb(0,40,244)"
                      }
                      $(this).css(cssObj);
                    });
        });
    </script>
  </head>
  <body>
    <body>
           <p>Move the mouse over me.</p>
                 
    </body>
</html>


Define CSS in an array and set

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("b").hover(function () {
                   $(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
              }, function () {
                   var cssObj = {
                     "background-color" : "#ddd",
                     "font-weight" : "",
                     "color" : "red"
                   }
                   $(this).css(cssObj);
              });
        });
    </script>

  </head>
  <body>
    <body>
      
       <b>Hello</b>
    </body>
</html>


Get CSS value

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             var color = $("b").css("background-color");
             alert(color);


        });
    </script>

  </head>
  <body>
    <body>
       <b>Hello</b>
    </body>
</html>


Nested style setting

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("div").css("background", "yellow").filter(".blue").css("border-color", "red");
        });
    </script>
     <style>
     div { border:2px white solid;}
  </style>
  </head>
  <body>
    <body>
      <div class=blue>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
  </body>
</html>


Set two CSS value in CSS function

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("b").hover(function () {
                   $(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
              }, function () {
                   var cssObj = {
                     "background-color" : "#ddd",
                     "font-weight" : "",
                     "color" : "red"
                   }
                   $(this).css(cssObj);
              });
        });
    </script>

  </head>
  <body>
    <body>
      
       <b>Hello</b>
    </body>
</html>


The basic CSS Selectors supported by jQuery

Selector                  Description
*                         Matches any element.
E                         Matches element with tag name E.
E F                       Matches elements with tag name F that are descendents of E.
E>F                       Matches elements with tag name F that are direct children of E.
E+F                       Matches elements F immediately preceded by sibling E.
E~F                       Matches elements F preceded by any sibling E.
E:has(F)                  Matches elements with tag name E that have at least one descendent with tag name F.
E.C                       Matches elements E with class name C. Omitting E is the same as *.C.
E#I                       Matches element E with id of I. Omitting E is the same as *#I.
E[A]                      Matches elements E with attribute A of any value.
E[A=V]                    Matches elements E with attribute A whose value is V.
E[A^=V]                   Matches elements E with attribute A whose value begins with V.
E[A$=V]                   Matches elements E with attribute A whose value ends with V.
E[A*=V]                   Matches elements E with attribute A whose value contains V.

$("p:even");                    selects all even <p> elements.
$("tr:nth-child(1)");           selects the first row of each table.
$("body > div");                selects direct <div> children of <body>.
$("a[href$=pdf]");              selects links to PDF files.
$("body > div:has(a)")          selects direct <div> children of <body>-containing links.


Use CSS value when creating new tag

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             var color = $("b").css("background-color");
             alert(color);
            $("b").html("<span style="color:" +color + ";">" + color + "</span>.");

        });
    </script>

  </head>
  <body>
    <body>
       Highlight all to see me.
       <b>Hello</b>
    </body>
</html>


Use the rgb function with JQuery

<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/css_function&oldid=9506»