Getting Started with jQuery - 14

Download this episode

Download Video

Description

We've said several times how jQuery helps smooth over JavaScript's rough edges. In this lesson, Bob shows how to include and reference the jQuery library in your web page as well as explaining how to get a reference to the jQuery object, demonstrating the use of the .ready method as a means of bootstrapping the onload event, and more.

Tag:

JavaScript

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      AdiTao

      Another great video, thanks. 

    • User profile image
      Andy

      Where are the source downloads? It is not here at the C9 site.

      Thanks!

    • User profile image
      BobTabor

      @Andy: Take a look at the "series" page:

      http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

      ... specifically, under the text paragraph: "Download the entire series source code."   Hope that helps!

    • User profile image
      rena

      Hello Bob,
      Thank you for the great video series. While following you on the video 14, I included the reference
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js"></script> in my html file, yet it gives me an error when i run it:

      SCRIPT5009: 'jQuery' is undefined
      script14.js, line 1 character 1

      I wonder if that's something related to not downloading the jQuery. So I tried to download the minimized version of jQuery from jQuery.com, but i keep getting the error:

      'window' is undefined

      I could not figure out what it meant. I appreciate for any help in this regard.

    • User profile image
      rena

      Hello Bob,

      I was able to get this into work. Just incase if anybody else runs into same problem:: I saved the min.js file and copied the code into another .js file and referenced it in the html file.

      Thanks much!!!

    • User profile image
      BobTabor

      @rena: Good to hear you got it sorted out!

    • User profile image
      wdownload

      Hello Bob I a, having issue with append and prepend it doesn't works i downloaded the latest version of jquery and i am using dreamwaver CS5 with html5 pack i did as same you did 

      $first("#first").append("<h2>This is what happen after</h2>");
      });

      thanks for help

    • User profile image
      Roberto Delgado

      Hellow Bot , I follow your Videos and they are a good example of a good teaching.

      I learned a lot of your Videos


      Thanks

      Roberto Delgado

    • User profile image
      BobTabor

      @wdownload: Sorry for the delay ... I may need to see more of your code to uncover the issue.  Can you post it?

    • User profile image
      Stephanie Hughes

      Thanks Bob for again providing an excellent course.

      As was the case HTML5 and CSS3 and JS. This is also a great course on jQ.

      I use full Adobe CS6 apps inc Dreamweaver CS6 and prefer to use DW as my main dev environment! As you can tell I am a graphic designer/web designer.

      Thanks for all that you do!

      Stephanie

    • User profile image
      Sashi

      Great article. I struggled for some time setting JQuery up and running on my machine, but then I quickly found that there are some great online tools that would help you get started.

      here is how I did it.
      use online tool called JSFiddle at http://jsfiddle.net/
      It has 4 windows on the screen HTML, CSS, JS and the last window to render your results
      I copy/pasted all your examples right into these windows (you dont need to make a reference of your code .js file, since it assumes its right within the code.
      rest of it works like a charm. This is especially good for newbees to get started quickly.

      Hope this is helpful

    • User profile image
      BobTabor

      @Sashi: Great advice.  I think I use JSFiddle later in this series ... near the end.  It's a helpful workbench for experimenting.

    • User profile image
      Bob Daniels

      Hi Bob,

      I come from the Ruby world and Im a somewhat new programmer. Having just gone through learning Ruby programming from the ground up, and after watching 14 of your videos, I just wanted to drop you a note to compliment you. I WISH I had videos like this to learn Ruby. You are a great online teacher; I especially appreciate how you are very thorough about explaining syntax and the little quirky things that can trip up new programmers. Your explanation of arrays, hashes, strings, etc. were fantastic. Thanks again for putting this all together as I feel I am really understanding Javascript and can't wait to finish the series.

    • User profile image
      BobTabor

      @Bob Daniels: Ah, very nice feedback ... thank you for the compliments.  I think I may try my hand at learning Ruby someday (like most developers, I have a list a mile long of things I would love to learn).  Honestly, there's so much opportunity here in the C# / .NET space that in 18 years I've never needed to venture far from Microsoft's ecosystem.  Hope you continue to enjoy this series!

    • User profile image
      Iba

      Dear Bob.
      By trying to download jQuery, it gave a warning ("This type of file could harm your computer"). How can you help ? Thank you again.

    • User profile image
      jonbrwn

      Bob,

      Thanks for the labor of love you provide. It doesn't go unnoticed.

    • User profile image
      BobTabor

      @Iba:  The gas pipe running into my house could harm me and my family if I break off the valve and light a match.  Smiley  jQuery will not harm your computer unless you do something crazy.  If you're still worried, do this: http://jsfiddle.net/

    • User profile image
      BobTabor

      @jonbrwn: Thank you!  Let's hope it doesn't go unnoticed by some crazy rich investor someday.  Tongue Out

    • User profile image
      BobTabor

      Re-opening this closed thread ...

    • User profile image
      Minowar

      I'm still confused about single quote and double quote. I see in the previous lessons, we can use it interchangeably. What's the most difference  between them?

    • User profile image
      BobTabor

      @Minowar: You can use them interchangeably.  I prefer double quotes in most cases, but I accidentally use either one.  I know it's confusing ... just pick one and use it consistently!  (Do as I say not as I do.  Smiley

      Check this out:

      http://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript

    • User profile image
      Will

      hi Bob,

      great course! am v. new to web development and think i'm finally getting the hang of it thanks to you're videos.

      got a question: i'm using Visual Studio Express 2012 to complete the examples... up to now
      (on HTML/CSS3 course and Javascript course so far) the VS's been offering an auto-completion list for most
      inputs but it doesnt seem to do so for jQuery objects - is there a way of fixing that? i believe it
      may have something to do with the IntelliSense function of Visual Studio but dont want to mess around with
      VS without guidance.

      Cheers!
      Will

    • User profile image
      BobTabor
    • User profile image
      DharmaRao

      Nice to have videos to learn Jquery. Its amazing demonstration by Bob

    • User profile image
      Hemima

      Hi BobTabor

      Excellent videos from scratch ,for beginners will be very useful thanq soo much

    • User profile image
      starforce

      Only problem I had was my pop up blocker  was preventing the "This works" box from coming up on IE10

    • User profile image
      BobTabor

      @starforce: I think that's a good point ... JavaScript / jQuery does have it's limitations insomuch that there might be other factors on the user's computer that could prevent it's proper function.  Therefore, it is always best on real websites to limit its use to "nice to have features" and not "must have features".  The exception would be a jQuery-based app.

    • User profile image
      john

      Thanks for the great videos Bob. Was having some trouble getting JQuery to work and did some googling ... Found out that I need to be referencing the JQuery library first for it to work. Not sure if you mentioned that or if I just missed it. Anyway, thanks again for the great instruction.

    • User profile image
      Steve Larson

      Hi Bob,
      Thanks for the great videos on JavaScript. I tried the download link for the code files, and was not able to access them. I am now a member of LearnVisualStudio.Net, and tried to access the files there, but no luck. Can you perhaps forward them to my email address? Additionally, can I access the JavaScript lessons from LVS.Net? Thanks, Steve :)

    • User profile image
      BobTabor

      @john: I can't recall either, but that is a good point.  It has to be BEFORE your code.

      @Steve Larson: Please try this link (from this series' home page):  Download the entire series source code.

    • User profile image
      Matt

      Hi Bob,
      Firstly, greatly appreciate the videos - very clear and help even for a beginner like me.
      I'm am looking for some guidance installing a homepage slideshow using javascript jquery and feel I have gotten about 90% of the way there but have hit a wall getting it fully functional. In the lesson above you speak about the CDN which is where I suspect my problem is stemming from (not having it properly installed, that is). My question is how do I know which jquery library I need to be using (I downloaded the external file from the website I got the slideshow from and it says 1.3.js - do I need to match up the library to this one I suppose? Greatly appreciate the help

    • User profile image
      BobTabor

      @Matt: The first 90% is always easy ... it's that last 90% that's hard.  Smiley

      When I face these sorts of things, I always try to revert back and get the author's example to work in my own environment.  Can you get THEIR examples working?

      It's possible that it's simply not working LOCALLY but would work when deployed to a live URL somewhere.  I circumvent this by using a local web server mapping a live domain like www.example.com to 192.168.1.1 via my hosts file.

      Most of the CDNs have *all* the old versions of jQuery to be backwards compatible, even if they don't advertise it.

      And finally, there are dozens of slideshow plugins for jQuery.  If I can't easily get one working, I bolt and try another.

      If you have any other specifics, I might be able to help further.  Any progress?

    • User profile image
      DavidDilley

      I realize you are trying to keep it simple and not mix it with ASP.NET so all the GUI control you use in your examples are basic HTML, but I am wondering how you would access an ASP.NET or AJAX web GUI control. Although I have not tried it from code yet, I am guessing that the way to access ASP.NET and AJAX controls on the DOM is by using the attr property of the jquery object with something like:
      $('#aspnet_textbox_id').attr("text" ,"Put this text in the control");
       Would that be correct?

       

    • User profile image
      csaborio

      I am loving these courses, thank you! Smiley

      I think I found an error on C9JS_15.html, the unordered list tag is not closed:

      http://j.mp/14cAQhr

    • User profile image
      Clint

      @csaborio: just looked at the series' ZIP file with all the samples, it is closed.

    • User profile image
      Clint

      @DavidDilley: This is a pure JavaScript series aimed at beginners.  For questions like that, I suggest heading over to channel 9 forums, www.stackoverflow.com or http://www.asp.net/ or look at some of the samples on ASP.NET.  Sorry

    • User profile image
      Maarten

      Hi

      First of all: thanks for the very informative series :)

      Second: when I try to execute your code around the 27:26 mark (and I changed #myFirstParagraph into #first (because there was no tag with the ID myFirstParagraph as far as I could tell), I couldn't get it to work. The browser only showed the popup, not the fading.

      How can this problem be solved?

      Thank you !

    • User profile image
      Maarten

      Regarding my last comment:

      when I insert all these 'actions' into a function (like here under) it works.

      $(function() {

      $('#first').fadeOut(500).fadeIn(500);
      }
      );

      Does this mean that it is necessary to insert all statements into a function that gets executed when the document is ready? ($ = $(document).ready , not?)

      Thanks.

    • User profile image
      BobTabor

      @Maarten: Hi Maarten, I'm not sure I completely understand your question.  You put code in that structure that you want to execute when the page loads.  Sometimes, you are REGISTERING an event that the user may kick off later somehow (like a click event, but there are many other possibilities).  There are techniques where you can attach a method call AFTER the page load (again, in response to some user action) but I don't talk about those in depth in this series (actually, honestly, it's been a couple of years since I recorded this so my memory is foggy on exactly what I do talk about in this series) but for more information check this out:

      http://api.jquery.com/category/events/event-handler-attachment/

      Did that answer your question?  If not, could you rephrase and I'll take another pass at answering.  Smiley

    • User profile image
      Maarten

      Hi

      Thanks for taking the time to answer.

      What I meant was that if I make a .js file, with just the following line of code in it (like you do in this video around the 27:30 mark), it doesn't work:


      jQuery('#first').fadeOut(500).fadeIn(500);


      Does that mean that, if you want something to execute on your page, you have to write it as follows (or in a similar way, but with another event), or did I do something wrong?

      $(function() {
      jQuery('#first').fadeOut(500).fadeIn(500);
      }
      );

      Could it be that you forgot to do that or is it not necessary at all?

      I hope this is clearer :)

      Thank you,

      Maarten

    • User profile image
      BobTabor

      @Maarten: Yes, JavaScript needs to be triggered by something.  Otherwise, it just sits there and never gets executed.  Don't take my word for it ... try it yourself.  Big Smile

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.