A Pen by Maiah Macariola.

JQuery-Card.markdown

JQuery Card

A Pen by Maiah Macariola on CodePen.

License.

script.js

[Introduction to JQuery]

// selecting element by tag-name
// <span>Hello, Web!</span>
$('span');

// selecting element by id
$('#greeting');

// selecting element by class
$('.greeting');

// selecting descendant element(s)
<ul class="greeting">
  <li class="vacation america">
    <h1>Hello</h1>
  </li>
  <li class="vacation japan">
    <h1>Hey</h1>
  </li>
</ul>

$('.greeting .america'):

// selecting 'direct' descendant element(s)
$('.greeting > .america');

// multiple selection
$('.asia, .sale');

// selecting first descendant using 'pseudocode' selector
$('#tours :first');
// or
$('#tours li:first');

// selecting even descendant using 'pseudocode' selector
$('#tours > li:even');

// getting text value of element
$('span').text();

// setting text value of element
$('span').text('the new value');

// putting code inside the ready mode of the DOM
$(function () {
	// customs code goes here...
});


[Traversing the DOM]

// selecting descendant using traversal methods
$('#tours').find('.america');

// selecting first descendant using traversal method
$('#vacations li').first();
// or just
$('.vacation').first();

// selecting last descendant using traversal method
$('#vacations li').last();
// or just
$('.vacation').last();

// selecting previous descendant using traversal method
$('#vacations li').last().prev(); // with prev() method

// selecting the parent element
$('.featured').parent();

// selecting 'direct' descendant using traversal methods
$('#tours').children('li');


[Working with the DOM]

// creating DOM node
var message = $('<span></span>');

// adding node before the selected element
$('.book').before(message);

// adding node as a child element of the selected element
$('.book').append(message);

// removing node from DOM
$('.book').remove();

// adding 'click' event listener
$('button').on('click', function (event) {});

// referencing current element in the event listener using 'this'
$('button').on('click', function (event) {
  $(this).append('Hello');
});

// appending element right after the selected element
$('.book').after(someElement);

// finding specific closest parent element
<div class="container">
  <ul class="tasks">
    <li class="item">
    <li>
  <ul>
</div>

$('.item').closest('.container');

// getting 'data' attribute on element
<li class="item" data-price="50.7"></li>

$('.item').data('price');

// setting 'data' attribute on element
$('.item').data('price', '70.5');

// specifying specific el on event listener (e.g. only buttons under `tours class` element
$('.tours').on('click', 'button', function (event) {});

// filtering elements
$('.filters').filter('.on-sale');

// add css class
$('.filters').filter('.on-sale').addClass('highlight');

// remove css class
$('.highlight').removeClass('highlight');