JavaScript Tutorial/jQuery/jQuery

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

Adds two functions into the jQuery namespace.

   <source lang="javascript">

jQuery.extend({

 min: function(a, b) { return a < b ? a : b; },
 max: function(a, b) { return a > b ? a : b; }

});</source>


Adds two plugin methods.

   <source lang="javascript">

jQuery.fn.extend({

 check: function() {
   return this.each(function() { this.checked = true; });
 },
 uncheck: function() {
   return this.each(function() { this.checked = false; });
 }

});</source>


Create Text node from query list

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           
           var list = $("div,p,span").map(function () {
             return this.tagName;
           }).get().join(", ");
           
           
           $("b").append(document.createTextNode(list));
       });
   </script>
 </head>
 <body>
   <body>
         span

p

div
         span
   </body>

</html></source>


If jQuery is installed and running

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

if ($) {

 $(document).ready(
   function() {
     $("p").addClass("Loaded");
     $("p").text("jQuery loaded and running!");
   }
 );

}

   </script>
   <style type="text/css">

p.Loaded {

   color: green;
   border: 1px solid green;

}

   </style>
 </head>
 <body>

jQuery is not loaded.

 </body>

</html></source>


Is jQuery ready

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
     var $ = "Hi!";
     jQuery(function($){
       alert("$ = "+ $);
     });
       });
   </script>
 </head>
 <body>
   <body>

Follow me!

   </body>

</html></source>


Pass array returned from jQuery to a function

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              function disp(divs) {
                 var a = [];
                 for (var i = 0; i < divs.length; i++) {
                   a.push(divs[i].innerHTML);
                 }
                 alert(a.join(" "));
              }
               
              disp( $("p").get().reverse() );
       });
   </script>
 </head>
 <body>
   <body>

A

B

   </body>

</html></source>


Show the order in the jQuery object.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           
           var list = $("div,p,span").map(function () {
             return this.tagName;
           }).get().join(", ");
           
           
           $("b").append(document.createTextNode(list));
       });
   </script>
 </head>
 <body>
   <body>
         span

p

div
         span
   </body>

</html></source>