JavaScript DHTML/jQuery/css function

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

Add border to DIV

   <source lang="html4strict">
   

<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>
0
1
2
 </body>

</html>



 </source>
   
  


Add paragraph and set the style

   <source lang="html4strict">
   

<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>
asdf
asdf
 </body>

</html>



 </source>
   
  


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

   <source lang="html4strict">

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


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

   <source lang="html4strict">

<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>
asdf
   </body>

</html>

 </source>
   
  


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

   <source lang="html4strict">

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

asdf

   </body>

</html>

 </source>
   
  


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

   <source lang="html4strict">

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

Move the mouse over me.

   </body>

</html>

 </source>
   
  


Define CSS in an array and set

   <source lang="html4strict">
   

<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>
     
      Hello
   </body>

</html>



 </source>
   
  


Get CSS value

   <source lang="html4strict">
   

<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>
      Hello
   </body>

</html>



 </source>
   
  


Nested style setting

   <source lang="html4strict">
   

<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>
asdf
asdf
asdf
asdf
asdf
asdf
 </body>

</html>



 </source>
   
  


Set two CSS value in CSS function

   <source lang="html4strict">
   

<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>
     
      Hello
   </body>

</html>



 </source>
   
  


The basic CSS Selectors supported by jQuery

   <source lang="html4strict">

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

elements. $("tr:nth-child(1)"); selects the first row of each table. $("body > div"); selects direct

children of <body>.

$("a[href$=pdf]"); selects links to PDF files.

$("body > div:has(a)") selects direct
children of <body>-containing links.
 </source>
   
  


Use CSS value when creating new tag

   <source lang="html4strict">
   

<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("" + color + ".");
       });
   </script>
 </head>
 <body>
   <body>
      Highlight all to see me.
      Hello
   </body>

</html>



 </source>
   
  


Use the rgb function with JQuery

   <source lang="html4strict">
   

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