blog@mcZen

Software, life, and leisure

Learning JQuery

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

September 29, 2007 7:55 AM

mike

So it's been a few days playing in with jquery and I just wanted to post some of the exciting things I've run across/created. First off, there is a news group where you can ask questions, get answers and search (because it's in google groups)
http://groups.google.com/group/jquery-en?lnk=li

Here are just some of the simple things I've done to become more efficient:
  1. Read the Code!

    You wouldn't believe how much this helps. I keep having to go back to the code to understand what it's doing and see what else it can do. I haven't even touched some parts of the code yet, but I keep reading.

  2. Try mini tests!

    Try little code samples in a plain old text/html file. You get to see what you can and cannot do very quickly!
    Try things like:

    • Select things

      $('*') // select everything!
      $('A') // selects all anchor tags in the document
      $('#id') // selects the element with id="id" *Notice the similarity to CSS*
      $('*[@id="id"]') // selects the element with id="id" *Notice the similarity to XPATH*
      $('.class') // selects all elements that have the class="class" *Notice the similarity to CSS*
      $('.class, .anotherClass') // selects all elements that have the class="class" or class="anotherClass" *Again notice the similarity to CSS*
      $('INPUT', document.form[0]) // select all input tags under the given tag

    • Try Events binding

      $('input[@type="button"]').click(function() {alert('you clicked a button')}); // ties an event all buttons that alerts you've clicked it.
      $('input[@type="text"]').bind('click', function() { alert('you clicked a textbox'}) // ties an event all textboxes that alerts you've clicked it.
      $('input[@type="text"]').bind('click.keyup.change.blur.focus', function() { alert('you've done something'}) // ties several events all textboxes that alerts you've done something.

    • Try Chaining

      $('input[@type="button"]').click(function() {alert('you clicked a button')}).val('sets text');
      $('input[@type="text"]').css('width', 400).css('height', 30)

    • Try hiding and animating

      $('input[@type="button" and @id="b1"]').click(function() {$('div#mydiv').show()})
      $('input[@type="button" and @id="b2"]').click(function() {$('div#mydiv').hide()})
      $('input[@type="button" and @id="b3"]').click(function() {$('div#mydiv').slideUp()})
      $('input[@type="button" and @id="b4"]').click(function() {$('div#mydiv').slideDown()})

  3. Write an extension

    Ok, so I was trying to disable some input boxes and I just wanted to call $('#myinput').disabled(true); so I wrote a little extension. It helped me learn some interesting things in jquery. Anyway here it is:

    jQuery.fn.extend({
      filterDisabled : function(){ return this.filter(
        function(){return (typeof(this.disabled)!=undefined)})
      },
      disabled: function(h) {
        if (h!=undefined)
          return this.filterDisabled().each(function(){this.disabled=h});
        this.filterDisabled().each(function()
          {h=((h||this.disabled)&&this.disabled)});
        return h;
      },
      toggleDisabled: function() { return this.filterDisabled()
          .each(function(){this.disabled=!this.disabled});}
    });
    So, with the piece of code above, you can do the following:

    $("#myButton").disabled(true);
    or use it with multiple objects:
    $(".button").disabled(true);
    or just toggle states
    $(".button").toggleDisabled();
    or get the state of a control
    if ($("#myButton").disabled()) { /*we are disabled*/}

    This will also chain like other calls:
    $(".button").disabled(true).val("disabled!");

  4. Have Fun with JQuery!

    It's all in the name of learning to be a better developer and enjoying some fun.

5 emotional states of JQuery

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

September 21, 2007 12:52 PM

mike

So there has been a lot of buzz about JQuery lately. I've heard it from several people including coworkers and Scott Hinselman's blog. At first, I didn't really think too much about because I just didn't have the time. But after further review, this piece of javascript zen is too fabulous. Although, with anything this great, I found myself going through the 5 states of emotional recovery.

Step #1: Curiosity

So everyone is talking about it. It must be good and I'm like curious george the capricorn, so I'll just take it for a spin and see if it's worth the extra bits flying across the internet. I'm always looking for something new to throw into the ole repository of code snippets I've found across the years. Of course, curiosity killed the cat.

Step #2: Denial

I have almost always used my own javascript for anything and everything. I like to think it's good, but I now feel like I know nothing about javascript. I feel like I need the javascript equivalent of "The C++ Programming Language". It's not that I can't read it, rather I just can't believe the breadth of what I am reading. Someone has some serious understanding of both javascript, the DOM, css, events, etc, etc. Bravo for you, but now I pity myself.

Step #3: Anger

Why Didn't I have this years ago? Why didn't I write this? I probably wouldn't have shared it anyway! I would have coveted it like a child. I could have just used all my code snippets again and again in the same ole bloated fashion. I don't need this, it's too much to learn. It has too many moving parts. I hate moving parts cause it generally means I have to work on it at some point.

Step #4: Confusion

How do I do this and that? How did it do this and that? What made this work but not that? Can't I just do this? That didn't work... Why? Ok, look at the source again. Search. ok. Now how in the $#%@! ok. That's something new. I'll try to remember that tomorrow after I get this to work. Now where did that come from? I am confused.

Step #4.5: Bargaining/Depression

Insert more code reading and searching and trying to extend it so I now have a stronger knowledge of javascript. There are still pages of code I haven't even needed to see yet. I am tired and blurry eyed. I'll just look at more tomorrow if I can just figure out what I need to do now.

Step #5: Acceptance

I can't believe it does this. This is fabulously cool. I will insert this reference into every page I write from now on. The power of it is immense. I love the how it selects everything and applies what I want so quickly and it uses the same notation that I am familiar with - CSS AND XPATH! I am happy and efficient now. So many lines of code in one single line. Clean html... mmmmm...

Ok, so there you have it. If you haven't checked it out, you should. I will say there are lots of examples out there, if you can find them. I still have more code to read, but I am at least excited about what I am doing. It was one of those days where you look at the clock and your late again. sweet. I'll see if I can get some of my own examples up!

Powered by BlogEngine.NET 1.4.5.7