Skip to main content

pelatihan.orgLearn. Practice. Grow.

Sign in Sign up

pelatihan.org

Learn web development with a clear roadmap, code practice, and quizzes with instant feedback.

Catalog Sign in Subscription

jQuery Curriculum: 8 Chapters, 34 Lessons — pelatihan.org

Home/Catalog/jQuery/Curriculum

Curriculum

jQuery Curriculum

Learn jQuery online with 34 structured lessons, code examples, and 170 quiz questions.

34 lessons 8 chapters 170 questions

Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.

01

jQuery Tutorial

6 lessons

01jQuery HOMEThe jQuery homepage serves as the navigation hub for all library materials, from basic syntax and selectors to effects, DOM manipulation, AJAX, and learning plans. From this page…

02jQuery IntroThe introduction of jQuery explains what a JavaScript library is, the reasons it came about, and how it works by selecting elements and then applying the action. The concept is…

03jQuery Get StartedStarting jQuery means putting a library file into a page and then writing code once the document is ready. The code should be placed inside the $(document).ready() so that the…

04jQuery SyntaxjQuery syntax always follows the $(selector) pattern: a function that contains a selector to select elements, followed by the method that implements the action. The dollar sign…

05jQuery SelectorsThe jQuery selector determines which elements a method will process. You can use tag names, class with dot marks, id with hash, attribute, to a combination of CSS selectors such…

06jQuery EventsjQuery events are a way of handling user interactions like clicks, mouse movements, and keyboard buttons. Each event has a special method such as click() and keydown(), and all…

02

jQuery Effects

7 lessons

01jQuery Hide/ShowThe hide(), show(), and toggle() methods are used to hide, display, or exchange the look of an element. All three receive the speed parameter in milliseconds and the callback…02jQuery FadeThe fade effect regulates the visibility of the element through oscillating oscillations, resulting in a smoother look than hide(). Available fadeIn(), fadeOut(), fadeToggle(),…03jQuery SlideThe slide effect shifts the height of the element up or down to make it look like closing or opening the panel. The three main methods are slideUp(), slideDown(), and…04jQuery AnimateThe animate() method allows you to animate CSS properties such as position, size, and opacity against new values. You just have to define the property and its value, then the…05jQuery stop()The stop() method is used to stop animation running on an element. Without stop(), overlapping animations can make the moving elements uncontrollable when users interact quickly.…06jQuery CallbackCallback is a function that is executed after a method is completed, especially on animation effects. With the callback, you can set the sequence of actions so they don't…07jQuery ChainingChaining allows you to stack multiple jQuery methods into one line of expression. Each method returns the same jQuery object, so the next method can be called immediately. The…

03

jQuery HTML

7 lessons

01jQuery GetThe Get method group is used to read the content or attributes of a selected element. Text() is available for plain text, html() for markup in it, val() for input values, as well…02jQuery SetA set method group is used to change the content, value, or attribute of an element. By giving an argument to text(), html(), val(), or attr(), you convert the data into a new…03jQuery AddThe Add method is used to insert new content into or around an existing element. append() and prepend() add content inside, while after() and before() place it outside the…04jQuery RemoveThe Remove method is used to remove elements or content from a page. remove() removes elements and all content from the DOM, whereas empty() only empties the content inside. The…05jQuery CSS ClassesThe CSS class method allows you to add, delete, or exchange classes on elements without touching the style properties one by one. addClass(), removeClass(), and toggleClass()…06jQuery css()The css() method is used to read or set the direct style property on selected elements. When given one property name, css() returns its value; when given two arguments, css()…07jQuery DimensionsThe group of Dimensions methods is used to measure and change the size of elements, such as width(), height(), innerWidth(), and outerWidth(). The difference lies in the…

04

jQuery Traversing

5 lessons

01jQuery TraversingTraversing is a technique of moving from one element to another element in a DOM tree structure, for example to a parent, descendant, or sibling. jQuery provides special methods…02jQuery AncestorsThe ancestor method is used to move over the DOM structure, that is, towards the parent and ancestor of an element. Navigation upwards is useful when you need to sort out the…03jQuery DescendantsThe descendant method is used to move under the DOM structure towards the child and the offspring of the element. The combination of the two makes interior selection much more…04jQuery SiblingsThe siblings method is used to move sideways, i.e. elements that are one level with selected elements. Available to all brethren, downwards and upwards. This pattern is very…05jQuery FilteringFiltering is used to filter selection results so that only certain elements are processed. Methods such as first(), last(), eq(n), filter(), and not() narrow down the selection…

05

jQuery AJAX

3 lessons

01jQuery AJAX IntroAJAX allows pages to send or receive data from servers without reloading entire pages. jQuery packs the capability with compact APIs such as $.ajax(), $.get(), and .load(). With…02jQuery LoadThe load() method takes the file from the server and inserts the result into the selected element. The syntax is very concise, quite $(selector) .load(url). You can also add a…03jQuery Get/PostThe $.get() and $.post() methods are two shortcuts for requesting data with their respective HTTP methods. $.get() is used to read data, while $.post() is used to send data as a…

06

jQuery Misc

2 lessons

01jQuery noConflict()The noConflict() method is used when the $ symbol clashes with other libraries that also use it, such as a graphics library or an old framework. This method removes the $…02jQuery FiltersPseudo-filter selectors expand the capabilities of jQuery selectors with rules based on position and content. For example:first, last, even, odd, and working on the element…

07

jQuery Examples

4 lessons

01jQuery ExamplesA collection of examples shows how different jQuery concepts are incorporated into real pieces of code, from displays, animations, to form interactions. Learning from examples…02jQuery EditorThe jQuery editor allows you to write and run code directly on the experimental page without setting up a local project. You can change HTML, CSS, and JavaScript all at once and…03jQuery SyllabusThe jQuery syllabus maps a list of topics that need to be mastered in sequence, from introductions, syntax, selectors, and events to effects, DOM manipulation, traversing, and…04jQuery Study PlanThe jQuery learning plan sets how much material you learn each day so that it's consistent and doesn't break down quickly. The key is to combine the concept reading, the example…

All-course subscription

$5.00 / 30 days

Access every course, lesson, and quiz. Progress is saved automatically.

This curriculum is free to browse. Activate a subscription to unlock full lessons, code examples, and quizzes.

Activate subscription Back to course