How do I get started with jQuery? [closed]


Tags: jquery,css

Problem :

I’m new to jQuery, so I want to know how I can get started with it, or where to start from.

I have good knowledge of HTML, CSS, DHTML and JavaScript.



Solution :

As others have mentioned, there are a bajillion tutorials out there. They're all good choices, but the way I decided to learn was by doing it.

These are the steps I took:

  1. Decide what you want to add to the page using jQuery (specifically look at jQuery UI, maybe accordian, tabs, etc... for examples of what I've done with TABS and jQ take a look at http://itsalldiet.com/tools)

  2. From there, go to the jQueryUI documentation (as mentioned by so many others) but in my example, I'd say go exactly here: http://jqueryui.com/demos/tabs/

  3. Click on "View Source"

  4. Copy and Paste the source onto your own website.

  5. Change it a little to meet your purposes

  6. Decide that it still doesn't quite do exactly what you want it to do

  7. Read about the other options you can play with.

  8. Get close but not quite close enough....

  9. Start reading about accessing the DOM directly and looping through every element on the page using CCS Selector Syntax (it's here: http://www.w3.org/TR/css3-selectors/ once you start to get the hang of it, you're basically a ninja) :

    $('a[href~=foo][display=none]').each(function(a){a.slidetoggle()});

jQuery, as with any new language may seem overwhelming at first. It is, however, once you get the hang of it, quite a bit of fun. I also really like prototype too. You might want to check that one out too.


    CSS Howto..

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How to prevent dynamically appended div from overflowing?

    How to change the label color by its id with css?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    How to make an inline element appear on new line, or block element not occupy the whole line?

    How can you align all the cells to the left with css [closed]

    how to make a box of nxn given in a url?

    How to change the width of a CSS flex-box column?

    How to alter hover effects for image button and embedded text?

    How to reset css in middle of html document?

    How to prevent CSS table-cell content expanding to full height of row

    How to use the Xpath and CSS selector in for function

    How to add head section in a page that has layout template

    How can I scale element height and width using CSS?

    How to dynamically create '@-Keyframe' CSS animations

    How to wait a while before adding elements in css? javascript?

    CSS Image size, how to fill, not stretch?

    how to center UL in my page?

    how to Design a vista like button using CSS

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    In CSS, how to make the window non-scrollable when an element overflows?

    How to? CSS “Position:Absolute” constant Margin-Top? Possible?

    How do I have the div displayed without having text content?

    How to set negative z-index with jQuery?

    How to pass JavaFX variable into CSS style?

    How to make a rollover div clickable?

    How to css this?