JQuery Kicks Ass like a Ninja

jQuery is a fast, lightweight, and bad motherfucking JavaScript library. It makes things like HTML document event handling, animation, and Ajax EASY-AS-FUCK.  I know some poeple just ignored learning Javascript and went straight to JQuery.  Thanks to John Resig, life just got better and easier.  I would recommend that you learn Javascript before getting yourself into JQuery.

I would recommend going straight to the JQuery site to learn about it. Here’s some basics before you start. I recommend downloading the code. Put it in your header or footer (recommended) as a long as it comes before your regular scripts. So here’s what it should look like.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.ninja-go").toggle();
  });
});
</script>
</head>
<body>

<button>Toggle this Ninja Button</button>
<p class="ninja-go">I'm a lazy Ninja.</p>
<p class="ninja-go">I'm a toggle Seattle Ninja.</p>
</body>
</html>


This should toggle the p tags with a class of ninja go.


I’m a lazy Ninja.

I’m a toggle Seattle Ninja.

So the .toggle function is pretty sweet. If you did that with that plain vanilla javascript, you would have to do a bunch of if else statements and shit.

Ain’t nobody got time for that

So let’s move on the to other ones. One of my favorite ones is the fade in. Of course they have fade out as well but I’ll keep this post short. Make sure you know some of the rules that apply for the css. For example. When it fades in, that means the style should be display none. It would be pointless to have something fade it when it is already visible. check the logic and css at jquery.com

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#ninja_fade1").fadeIn("slow");
    $("#ninja_fade2").fadeIn("7000");
  });
});
</script>
</head>

<body>

<button>Click to fade in Ninjas</button>
<br><br>
<p id="ninja_fade1" style="width:300px;height:300px;display:none;background-color:black; color:white; font-size:2em">Seattle Ninja</p>
<br/>
<p id="ninja_fade2" style="display:none;font-size:1.5em">Another Ninja appears</p> 

</body>
</html>

It will probably do something like this.


 

 

There’s so many different things you can do. You should experiment and have fun.

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