Tips & Tricks : jQuery Methods

What is jQuery?

“jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.” – jQuery

  • Difference between .append() and .appendTo()It’s very easy to mix the two methods since the differentiation between them is a soft one (To). Here is what I ask myself when at the crossroads of append: “What’s my content and what’s my target?”Once I determine that very important question I can easily go about deciding which method will be the most useful for what I’m attempting to achieve.

    For example, It’s early December, and it’s time to start getting ready for Christmas celebrations. One of my favorite things about the holidays is adding the new decorations to my gorgeous tree. With this scenario in mind, let’s code.

    I can either think of appending my decorations with my tree:
    ChristmasTree.append(decorations)

    Or
    I want to take my decorations and append it to my Christmas tree:
    Decorations.appendTo(ChristmasTree)

    The simplest clarification on these two methods for me was found on a code academy forum, stating that .append() is when you are adding something that already exists to something new, and .appendTo() is attaching something new to something that already exists. Don’t forget, always use whatever method that will be the most valuable for what you are trying to accomplish. For the particular example above, appendTo will make the most sense.  Here is a link to elaborate on this method further.

  • .css() Method
    The .css() method allows you to directly set the style property for the selected element or return the property. The following example is from a recent lab I completed while at Flatiron School. Below I use the .css() method to change the background color, color, and padding.

    $("#b5").click(function(){
        $("#p2").css('background-color', "rgb(0, 0, 255)").css('color', "rgb(255, 255, 255)").css('padding', "5px");
    });

    Aside from what the method is actually doing, take a look at they syntax. Notice that you can chain on several .css() method’s together. Method chaining is the ability to link together multiple tasks, events and selectors. As with most programming language, this isn’t the only way to go about setting a CSS property, simply just one way.

  • One of my most precious tips so far in working with jQuery methods are to pay close attention to what the directions call for. I use direction here, because you may be in school like me, or you may be about to go into a job interview. Stay calm, You got this! By the directions alone you will be able to pick up quickly on what you should do first. Here are a few examples:
    describe(‘#b3 button’, function() { it(‘should toggle the paragraph when Toggle Paragraph is clicked’,
    Now it might be obvious what I’m about to say here, but sometimes you may need a little encouragement to listen to that inner voice in your head that is saying, focus on the word “Toggle”.Always trust that voice! This example came straight from another recent lab I worked on. And the first thing I did was look for a toggle method. Below is my answer:

    $("#b3").click(function(){
        $("#p1").toggle();
    });

    Aside from receiving directions from a homework, or lab assignment, you’ll also have to pay close attention to directions or say questions at an interview. A possible question your future employer may ask you is:

    How do you retrieve the attribute of an HTML tag using jQuery half of links?
    Answer:

    $("a").each(function(){alert($(this).attr('href'));});

    The direction itself will always be your best guide of finding the correct answer, look for the clues in it.

I have really enjoyed working with jQuery for the past few days, and hopefully with some of the few tips & tricks I listed you will to. As always, happy coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s