Tuesday, May 27, 2014

jQuery Syntax For Event Methods

1) click() : The function is executed when the user clicks on the HTML element.
 $("p").click(function(){
  $(this).hide();
});

2)dblclick() : The function is executed when the user double-clicks on the HTML element.
 $("p").dblclick(function(){
  $(this).hide();
});

3)mouseenter() : The function is executed when the mouse pointer enters the HTML element.
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

4)mouseleave() : The function is executed when the mouse pointer leaves the HTML element
$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

5)mousedown() : The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element
$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

6)mouseup() : The function is executed, when the left mouse button is released, while the mouse is over the HTML element

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

7) hover() : The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element

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

8) focus() : The function is executed when the form field gets focus
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
$('#tblCadastro input').focus();

9)blur() : The function is executed when the form field loses focus
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
}); 
 


What are events in JQuery

1) Examples:
  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element
2) Mouse Events
  • click
  • dblclick
  • mouseenter
  • mouseleave
3) Keyboard Events
  • keypress
  • keydown
  • keyup
4) Form Events
  • submit
  • change
  • focus
  • blur
5) Documents and Windows Events
  • load
  • resize
  • scroll
  • unload


Select all even tr elements

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("tr:even").css("background-color","yellow");//Try odd for all odd tr elements
});
</script>

2) <table border="1">
<tr>
  <th>Company</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

HIde all button elements and input elements of type="button"

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(":button").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

HIde all a elements with a target attribute value NOT equal to "_blank"

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("a[target!='_blank']").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>


Hide all a elements with a target attribute value equal to "_blank"

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("a[target='_blank']").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>

3) 

Hide all elements with an href attribute using jquery

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("[href]").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>