04. jQuery Event Methods

-


jQuery Event Methods


<script>
//.....................................................................

$("p").click(function(){
  $(this).hide();
});

//.....................................................................

$("p").dblclick(function(){
  $(this).hide();
});

//.....................................................................

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

//.....................................................................

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

//.....................................................................

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

//.....................................................................

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

//.....................................................................

The hover() method takes two functions and is a combination of the mouseenter() and 
mouseleave() methods.

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

//.....................................................................

The focus() method attaches an event handler function to an HTML form field. 
The function is executed when the form field gets focus:

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

The function is executed when the form field loses focus:

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

//.....................................................................

The on() method attaches one or more event handlers for the selected elements.

$("p").on("click", function(){
  $(this).hide();
});

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});       
</script>

Comments

Post a Comment

Popular posts from this blog

09.Data Binding.

-
Image
Data Binding. Data binding ආකාර 2 කි. One-way Data Binding - component to view (DOM) or view to the component Two-way Data Binding - component to view and view to the component. One-way Data Binding in Angular Component to view (DOM) or view to component One-way data binding will bind the data from the component to the view (DOM) or from view to the component. One-way data binding is unidirectional. You can only bind the data from component to the view or from view to the component. a). From Component to View      01.   Interpolation Binding      02.   Property Binding      03.   Attribute Binding      04.   Class Binding      05.   Style Binding b). From View to Component      01.  Event binding  From Component to View     Style and Class Binding Directives – Directives are nothing but custom html element that angular provi...
Read more

Database - Topics

-
Image
 Topics  01. Steps in SQL Query Execution 02. How does the database create a query plan 03. How Query Plan Caching Works 04. What is the need for an execution plan? 05. How Do Query/ Query Plan Execute (Inside MySQL Server) 06. Importance Of Undo Log 07. How Row Lock Is Handle When Query On The Table Row 08. Technique to recover the committed changes 09. Auditing technique 10. Query cache 11. DB connection pool 12. What is ACID? 13. Optimizing SQL queries
Read more

02. Spring – Creating spring project clone it with GIT step by step.

-
Image
  Creating spring project clone it with GIT step by step. 01. Create an empty GIT repository and select a repository name. 02.   Check to add README.md and technology to add it inside the gitignire file0- it will include all the generated class when we complete the application. 03.      Copy the github repository URL. 04 . Open eclipse and go to,             Window – Show View – Other - Type git on the folder and select git repositories. 05.   Now clone this repository at your desired location in which we are going to keep the project specific file . a)         a)  Step One.             b)  Step  Two .          c)    Step Three. Both projects are generated as bellows           d) Step Four  Open the gitingnore file and ignore the target folder of the project. All the class files which are ...
Read more