JQuery .Click() Example

For most people, this is a no fucking brainer  but you got to start somewhere like I did and probably all those people who need to see stuff by example. It’s not that hard if you already know Javascript. People don’t even bother with Javascript and go straight to JQuery.  Before you start, you know that you have to make sure that your JQUERY script is available and you have it ready. If you don’t know here it is.  Also every year there is an update so this 1.9.1 will probably be 1.11 or 1.13 and eventually phase out ie9 or ie10 so you can move on to 2.1 or 3.1 in the future.


<!-- make sure you put it on the bottom of the page so the
  the page loads faster. This is recommended. Although I'm putting the script on the top I'm just showing for the sake of the order, place the script on the bottom.

  for Javascript:     document.getElementById('ninja');
  for JQuery:         $('#ninja');
  You can also mix and match but be careful.

--> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/myninjascript.js">
<div id="ninja">

<p> This sentence will turn green when the ninja is clicked</p>
<span> this sentence will disappear when the ninja is clicked </span>
</div>

Now let’s go the script. Due to the Content Security Policy: inline scripts will be blocked so make sure this script is running on an external javascript folder or page.

 
  $(document).ready(function(){
    
       $('#ninja').click(function({
     
          $('.p').css('color','red');
          $('span').hide();  

   });
});


What the code is doing is waiting for JQuery to kick in, when it’s ready and you click on the div element with an id of ninja, it will change the css color of the  p tag and hide any span tags.  There are also other functions like adding classes or toggling for stuff.



if ($seattleninja) {
$seattleninja.mouseenter(function(){
$seattleninja.toggleClass("ninjaclick");
});
}


 

This case is testing if the seattleninja element exists, and when some enters their mouse over the div, it will add a class. You can then have a bunch of cool styles added to the css.

If you want to see an example of this I have a ninja star that you can click on and it will do some animation effects. Check it out here.  There are a lot more functions and cool effects that JQuery has but I still recommend learning Javascript even if JQuery makes your life easy, you got a walk before you run.

Share on FacebookShare on Google+Pin on PinterestShare on RedditTweet about this on TwitterShare on TumblrShare on LinkedInEmail this to someonePrint this page

Leave a Reply