JQuery For Beginers


Information

jQuery: beginner’s tutorial

Today I’ll try to explain this magical jQuery everybody is talking about. Why on this blog? Because it can help you create many awesome things. :D
If you want to learn jQuery you’ll have to know the basics of JavaScript because jQuery is a framework for this language. And because JavaScript never goes alone you have to know the basics of HTML and CSS.
 What is jQuery?
From my point of view it’s a customized way of writing JavaScript code. Why use it if you have the old one? Easy question … jQuery is shorter, flexible and  it works in every browser. Is that enough for you? :)
Let’s get started! The easiest way to learn is to show you some code and explain what it does. Here it is:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        $("button").click(function(){
          $("#test").animate({width:500},1500);
          $(".testText").fadeIn(1500);
        });

        $("button").mouseout(function(){
          $(".testText").fadeOut(1000);
          $("#test").animate({width:50}, 1000);
        });
      });
    </script>
  </head>
<body>
  <button>Start Animation</button>
  <div id="test" style="background:#8CC63F; height:100px;width:50px;position:relative">
    <span class="testText" style="display:none;">This is a test text ... :D  </span>
  </div>
</body>
</html>
Don’t panic! I’ll guide you one step at a time. First let’s see what the code does. Below is the effect.

First thing is first … you need to import the jQuery file for all of this to work. You can download it or you can use the available Google link like I did in this line:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
As you can see all the JavaScript code in the example looks like this $(selector).function(); . Every jQuery code will start with $ unless you change it ( but this is not important now :D ).
As you can see the selector works just like in CSS with some minor improvements.
  • $(document) – selects the entire document
  • $(“button”) – selects all the button HTML elements ( in our example there is just one ) … this works for any other element: $(“div”) , $(“p”), $(“li”) and so on
  • $(“#test”) – selects the element with the id “test”
  • $(“.testText”) – selects all elements that have the class “testText”
… and now some that are not in this example:
  • $(this) – selects the current element
  • $(“li:first”) – selects the first li element
  • $(“[href$='.png']“) – selects all elements with a href attribute ending in .png
I’m not going to put here all the variations. For more selectors visit the documentation at their website. :D
What’s that after the selector? Well … it can be 2 things: a trigger or an effect.
A trigger is an event that interacts with the user. Here are some examples: .click(), .mouseover(), mouseout(), .change(), .keypress(), .ready(), .load() and many more. The name of every trigger is very suggestive of what it does. For a full list of events/triggers visit the official jQuery documentation.
Now let’s get back to the example … let’s translate what was written:
$(document).ready(function(){
        $("button").click(function(){
          $("#test").animate({width:500},1500);
          $(".testText").fadeIn(1500);
        });
“When the document is ready … if the button is clicked … animate the #test element by setting his width to 500 in 1500 milliseconds … and fade in all the elements with the .testText class in 1500 milliseconds” :D
I know! I know! I didn’t tell you about animate and fade in and other effects like that. Well you know what? I’m not going to. I believe that by translating the example you kind of got the point.
There are many effects and you can manipulate any element in any way you can think of. Here is a full list of effects.
As I said in the title … this is a beginners tutorial. I hope you liked it and I’m not going to fill your head with more in this post.
It’s up to you to navigate trough the links above and test what you learn. Try it for yourself and if you think it’s worth sharing leave a comment with your work.
See you next time :D

JQuery Controls:

  • $('*'): This selector selects all elements in the document.
  • $("p > *"): This selector selects all elements that are children of a paragraph element.
  • $("#specialID"): This selector function gets the element with id="specialID".
  • $(".specialClass"): This selector gets all the elements that have the class of specialClass.
  • $("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
  • $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
  • $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
  • $("ul li:first"): This selector gets only the first <li> element of the <ul>.
  • $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
  • $("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
  • $("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
  • $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
  • $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
  • $("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
  • $(":empty"): Selects all elements that have no children.
  • $("p:empty"): Selects all elements matched by <p> that have no children.
  • $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
  • $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
  • $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
  • $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
  • $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
  • $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar
  • $("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
  • $("li:even"): Selects all elements matched by <li> that have an even index value.
  • $("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
  • $("li:first"): Selects the first <li> element.
  • $("li:last"): Selects the last <li> element.
  • $("li:visible"): Selects all elements matched by <li> that are visible.
  • $("li:hidden"): Selects all elements matched by <li> that are hidden.
  • $(":radio"): Selects all radio buttons in the form.
  • $(":checked"): Selects all checked boxex in the form.
  • $(":input"): Selects only form elements (input, select, textarea, button).
  • $(":text"): Selects only text elements (input[type=text]).
  • $("li:eq(2)"): Selects the third <li> element
  • $("li:eq(4)"): Selects the fifth <li> element
  • $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
  • $("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
  • $("li:gt(1)"): Selects all elements matched by <li> after the second one.
  • $("p:gt(2)"): Selects all elements matched by <p> after the third one.
  • $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
  • $("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
  • $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
  • $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
  • $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
  • $(":parent"): Selects all elements that are the parent of another element, including text.
  • $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)