jQuery is a JavaScript Library that will help you change the way we manipulate html objects, javascript events, and much more. In my experience, any given JavaScript can be taken, and simplified via jQuery; One of the main advantages is the use of selectors, which act a little like CSS, we will get to that later.
jQuery Homepage has many examples that can get you started, additionally, i have found this data sheet quite useful too. I will create an initial example of jQuery, although, on the next entries i will mainly focus on a little more complicated issues, which i once found myself looking for a solution, so maybe it will help someone in the future.
The first thing we are going to do will be to add the jQuery Script, for which we got two ways, one is adding it directly from google with the following code. Just add the Following lines on the <head> </head> portion of your file.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>"src" may be replaced for any other source for the jQuery library.
Let's now create some basic example; lets say we have the following really simplified code.
<input id="event" type="button" value="Click Me" />Let's take a close look at the Entry we just wrote.
<div id="output"></div>
<script type="text/javascript">
$("#event").click(function() {
$("#output").html("Hello World!");
});
</script>
the "$" means it is a jQuery input, the following part, ("#event"), will be our "Selector" what is inside it may look familiar to you if you have used CSS, the "#" means we are looking for an element with the id "event".
after that, we will add a ".", and an action, in this case, it will be "click" which will execute the code in it when the element or elements added on the selector are clicked.
As you may see, a whole function is crammed in this event, which is what will be executed when the click is made. html method will change the html that is inside an element, so, in this case we are changing the inner contents of the div we created for the message we are writing.
The code up there will add a button with the id "event". which will trigger and event when clicked. changing the internal html of the div "output". Try it Out!
Thanks for Reading, Promise i will improve next time!
Interesting, I want to learn more about javascript so I will be sure to keep track of this blog. Good post!
ReplyDelete