Did you know FaceySpacey is the creator of Redux-First Router and Universal?
The Startup Incubator.
Your one stop social media shop
1. Speccing
2. Branding
3. Coding
4. Marketing
Resource Categories:
Technical
Non-Technical
Refer A Friend
DEVELOPMENT TOOLS 1 - VERSION CONTROL (Mercurial)
CONTRACTING 2 - TOP 10 EASY SITE CREATOR TOOLS
Subscribe
JQUERY 1 - INTRODUCTION TO JQUERY
As is the style of these tutorials, we’re going to jump you to productivity immediately. So rather than learn all the ins and outs of Javascript--and basically waste time--we’re going to look at a framework built on top of it that makes it a lot easier: jQuery. jQuery is the most popular, most maintained, and basically most advanced Javascript framework.
Since Javascript was very much like PHP in its basic syntax, I didn't have to study Javascript as much to get productive. So the way I learned Javascript and jQuery was by jumping straight to installing ready-made jQuery plugins, modifying them a bit, and then writing my own jQuery code. After that I went back and learned a little bit more about Javascript to really understand what was going on. Javascript does have some unique and powerful aspects that won’t be clear at the beginning as it’s quite different from a classical language like PHP (i.e. it's object oriented style of programming is based on "class" templates"), but jQuery makes it so you don’t have to know them.
Ok, so the first thing to note is that jQuery shares a lot in common with CSS, specifically selectors. Understanding selectors, which you should already by now if you read the CSS tutorials, is the crux of mastering jQuery. jQuery has its own format for writing selectors, but they look very similar to CSS selectors. And more importantly, it lets you do more with these selectors than just style elements (though you can do that too): you can trigger events when your selected elements are clicked for example, and you can move a selected element across the page. We’ll start with these two examples.
Firstly, for jQuery to work, you have to embed it on your page. You can simply add the following line within your <head> element:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
That will load the jQuery framework code into all browsers viewing your website. It will load the code from google’s servers, and they’ll pay for its hosting.
After that’s installed you can write jQuery code within <script> tags anywhere on your page.
Let’s cover some jQuery selectors:
- $("#header") = get the element with id="header"
- $("h3") = get all <h3> elements
- $(".photo") = get all element with class="photo"
- $("div#content .photo") = get all element with class="photo" nested in the <div id="content">
- $("ul li") = get all <li> element nested in all <ul>
- $("ul li:first") = get only the first <li> element of the <ul>
Capiche. Therefore, here’s how you would do what you saw can be done in CSS with jQuery:
$(".photo").css('color', 'blue');
That’s the equivalent of:
.photo {color: blue;}
Capiche. Not so difficult. Now you’re probably asking why do I need jQuery to do this when CSS can? Well obviously because you can do a lot more. Here we’re just building on similarties between the new material I’m teaching you and the CSS stuff you already know.
Let’s make it so when you click any elements with class “photo” they trigger a simple alert on the page that says “you clicked me!”:
$(“.photo”).click(function() {
alert(“you clicked me!”);
});
So here we obviously “selected” all elements with class photo, and then called the click() function provided by jQuery, and then told it to call the function we passed into the click() function when the actual click is performed. There are 2 things to note here:
1) that jQuery selectors are actually objects, and have methods, which are separated with a period (rather than “->” like in PHP). Once you have one of these objects--usually built with a selector like this--you can call methods like click() to trigger all the event-driven stuff that CSS selectors can’t do.
2) the click() function is passed a parameter in the form of a function that will be called at a later point in time.
In this case that function parameter simply triggers the built-in browser function, alert(). The parameter we passed to the click() function is actually called an “anonymous function,” which means it does not have a name. In PHP you don’t use them much, but in Javascript and jQuery, you use them non-stop. The idea is that the code doesn’t really need a name because you’re not going to use it any other places. If you were, you could write this:
$(“.photo”).click(alertUser);
function alertUser() {
alert(“you clicked me!”);
}
So does that make it clear how click() is really a function passed another function as a parameter. That relatively large block of code called an “anonymous” function is really just a big parameter passed to the click() function. What I’m trying to point out is simply that alertUser as shown in the first line above is a parameter, and that it’s the same as the anonymous function from the first example. This is a key concept to get.
SMM 3 - FORMULA TO FIND INFLUENCERS