Wednesday, August 13, 2014

jquery install + basics

Why JQuery you say?  24 million + websites out there use it (source : http://www.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-aspiring-web-developers/)
Also add javascript library functionality (aka you don't have to invent the wheel) which can speed up your dev time.  Kind of a win/win situation to me.

So you want to use some JQuery on your site eh.  You have a couple of options: go download and host the file itself (Option 1) or trust in Google's up-time and let them host it.

Option 1:
To start, go to www.jquery.com/download and snag the jQuery 2.1x code.  Why you ask?  IE 6/7/8 are deader than fried chicken, that's why.

As small as the .js file is (242kb) short of being on dialup you shouldn't have any issues downloading the uncompressed version.

your code would look something like:
    <script src="~/scripts/jquery-2.1.1.js"></script>

Option 2:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

So now we have something hooked into our code to do a little bit of work with JQuery, lets do a little bit of generic type coding for fun.  What i want to do is hide some paragraph text based on clicking on it as well as changing the link color and font size based on a button click.  to do so, coding time:





Try the code out for yourself: here's what it looks like rendered:














Lets click the line Delete me!.  here's the result:










After clicking Delete me too!.:








Lets hit the button to change colors/font size:







Tune in next time where we try some more of the advanced features available to us.

No comments:

Post a Comment