• Home
  • jQuery for Beginners

jQuery for Beginners

The 6 Line Starter Template

<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script>  
$(function(){
    // jQuery Code Here  
});  
</script>

Paste these lines right above the </body> of your page and you have access to all of jQueries abilities!

Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to “query (or find)” HTML elements (same as a CSS selector)
  • A jQuery action() to be performed on the element(s) (like hiding)

Example:

$(this).hide() //- hides the current element.

$("p").hide() //- hides all <p> elements.

$(".test").hide() //- hides all elements with class="test".

$("#test").hide() //- hides the element with id="test".

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

Actions

Let’s hide all paragraphs on a page:

$("p").hide();

What are Events?

All the different user’s actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

  • moving a mouse over an element
  • scrolling the page
  • resizing the browser
  • clicking on an element

The term “fires/fired” is often used with events. Example: “The click event is fired, the moment you click with the mouse”.

Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){
  // action goes here!!
});

Common Events and Actions

click()

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the current <p> element:

Example:

$("p").click(function(){
    $(this).hide();
});

jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example:

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

Shown elements are hidden and hidden elements are shown:

Example

$("button").click(function(){
    $("p").toggle();
});

See the Pen backToBasics by Angel Grablev (@agrublev) on CodePen.32466

Full list of actions

Traversing the dom

Often you need to get creative with selecting the right element. jQuery offers a huge selection of actions to traverse (navigate the dom) from the current selector.

For example, if we want to click on a dropdown button and activate the closest dropdown content element we can:

$(".open-dropdown").click(function(){  
    $(this).closest(".dropdown-content").slideToggle();  
});

Other useful traverse actions:

  • parents(“selector of parent to find”)
  • find(“selector of ethe lement to find inside currently selected element)
  • parent() // selects immediate parent element
  • siblings() // selects all of the siblings of the selected element (like all other list items)
  • children() // selects all immediate children of the element

Full list with examples

Checking things (filtering)

We can also filter the results from our selector. For example if we want to get all .button elements but only get the ones with a class .email.

$(".button").is(".email").addClass("email_icon");

Some other filters:

  • first() // get the first matched
  • last() // get the last
  • not(“selector to ignore”)

Full list of filters

Manipulating the dom

Sometimes we want to remove or add new elements to the page.

For example, after the user registers we may want to add a profile image in the header:

See the Pen appendMe by Angel Grablev (@agrublev) on CodePen.32466

Append adds the new element right before the closing of the selected element. There are other methods like:

It can be a nightmare to write HTML inside of the append(“STRING”). Especially because you have to constantly remember to use double or single quotes depending on what you use to wrap the entire html element with. But we do have some options! First, let’s review the issues:

  • Need to use single quotes around the element and double quotes inside where you add attributes
  • To write the HTML on multiple lines so it’s legible we need to use the string concatenation ‘+’
  • To add any variables from javascript we need to also use string concatenation ‘+variable+’
  • It’s hard to edit the HTML

Advanced variable usage:

We can use some JavaScript hacks to make it easier to support multiple lines and easier to work with code. But it’s not ideal!

See the Pen templates by Angel Grablev (@agrublev) on CodePen.32466

Using a script tag:

One option is to use a script tag with a special type so the page doesn’t try to run the code. Then select the script tag and get its HTML content with jQuery. Then we can go about changing text or attributes.

See the Pen templates by Angel Grablev (@agrublev) on CodePen.32466

We can achieve a similar effect by adding an html element with our template, hiding it, then using jQuery to duplicate it and append it everytime we need to use the template.

Literals:

We can use the special ` slanted quote to define the HTML and even add multiple lines, it’s called Template Literals and of course, Internet Explorer does not support it!

There are hundreds of plugins/libraries that actually make working with templates into a fun experience.

https://github.com/BorisMoore/jquery-tmpl

https://github.com/janl/mustache.js

http://handlebarsjs.com/

http://idangero.us/template7/#.WxCKsFMvyOE

And of course it comes built into Angular/Vue/React and other libraries.

Examples of using what we learned

Plugins

jQuery plugins allow us to do a lot of amazing things without having to write almost any code!

http://vanity.enavu.com/

https://jqueryui.com/

Voting time http://x.co/votejs

https://alvarotrigo.com/pagePiling/

https://alvarotrigo.com/fullPage

http://www.thepetedesign.com/demos/tiltedpage_scroll_demo.html

http://git.blivesta.com/animsition/

http://scrollme.nckprsn.com/

https://www.adchsm.com/slidebars/

http://rubentd.com/gifplayer/

http://vodkabears.github.io/vide/

https://mntn-dev.github.io/t.js/

Modals

http://izimodal.marcelodolce.com/#modal-default

http://jquerymodal.com/

Dropdowns

https://www.jqueryscript.net/menu/jQuery-Plugin-To-Create-Multi-level-Bootstrap-Dropdowns-Bootstrap-Submenu.html

https://www.jqueryscript.net/menu/jQuery-Plugin-To-Toggle-Bootstrap-Dropdowns-On-Hover.html

Many ways to find them!

Popular jQuery Plugins List Directory (A-Z)