JavaScript DHTML/jQuery/trigger

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

Display a "Hello World!" alert box.

   <source lang="html4strict">

$("p").bind("myEvent", function (event, message1, message2) {

 alert(message1 + " " + message2);

}); $("p").trigger("myEvent", ["Hello","World!"]);

 </source>
   
  


To submit the first form without using the submit() function

   <source lang="html4strict">

$("form:first").trigger("submit")

 </source>
   
  


Trigger a custom event

   <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").bind("myCustomEvent", function(e, myName, myValue){
                 $(this).text(myName + ", hi there!");
               });
               $("button").click(function () {
                 $("div").trigger("myCustomEvent", [ "asdf" ]);
               });
           
              
       });
   </script>

<style>

 div { width:50px; height:70px; float:left; margin:5px;
       background:rgb(255,140,0); cursor:pointer; }
 

</style>

 </head>
 <body>
   <body>
asdf
         <button>bn</button>
                
   </body>

</html>

 </source>
   
  


Trigger Another Event

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("h1").click(function () {
                 alert("h1");
              });
              $("button:last").click(function () {
                   $("h1").trigger("click");
                   
              });
       });
   </script>
 </head>
 <body>
   <body>

header 1

      <button value="asdf">asdf</button>
   </body>

</html>



 </source>
   
  


Triggered By Select Change Event

   <source lang="html4strict">
   

<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>
   <select name="A" multiple="multiple">
       <option>A</option>
       <option selected="selected">B</option>
       <option>C</option>
   </select>
 </body>

</html>



 </source>
   
  


Triggers the blur event of each 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(){
            $("input").blur(function () {
               $(this).next("span").css("color","red");
            });
       });
   </script>
 </head>
 <body>
   <body>

<input type="text" /> blur fire

<input type="password" /> blur fire

   </body>

</html>



 </source>
   
  


Trigger Submit Event

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       
           $("form").submit(function() {
               alert("submit");
                 return false;
           });
           $("form:first").submit();
       });
   </script>
 </head>
 <body>
   <body>
   <form action="javascript:alert("success!");">
         <input type="text" />
         <input type="submit" />
    </form>
   </body>

</html>



 </source>
   
  


trigger(type , data )

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       
           
           $("button:first").click(function () {
             update($("span:first"));
           });
           $("button:last").click(function () {
             $("button:first").trigger("click");
       
             update($("span:last"));
           });
       
           function update(j) {
             var n = parseInt(j.text(), 0);
             j.text(n + 1);
           }
              
       });
   </script>
 </head>
 <body>
   <body>
         <button>1</button>
         <button>2</button>
       
         0 /
         0 
                
   </body>

</html>

 </source>