Cacher is the code snippet organizer for pro developers

// Toggle button 
$('button').click(function () {
  $('.box').toggleClass('box-rotate');
});

// get html code of an element and display it on the page

$("#content").text($("#code").html());

//selects the first list item within the gallery
$("#gallery li").eq(0)
 
//selects the second list item within the gallery
$("#gallery li").eq(1)
 
//selects the last list item within the gallery
$("#gallery li").eq(-1)
 
// selects the list item containing a word 'dolor'
$("li:contains('dolor')")
 
// selects all links to https://www.ihatetomatoes.net
$("a[href='https://www.ihatetomatoes.net']")
 
// selects link who's href starts with https://www.ihatetomatoes.net
$("a[href^='https://www.ihatetomatoes.net']")
 
// selects all links inside any ol on the page
$("#page-content ol").find("a")
 
// this would select li and p elements
$(".highlight").parent()
 
// this would select ul which is a parent of span with class highlight
$(".highlight").parents("ul")

// select parent $( "p:has(a)" )
$( "p:has(a)" ).addClass( 'border');

// scroll event listener
window.addEventListener('scroll', function() {

});

<script src="https://unpkg.com/axios@0.16.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

// length of the path

// pure JS
var path = document.querySelector('path#road');
console.log(path.getTotalLength());

$(function () {
  // executes when the page is ready
  
  // change text inside all h1
  $('h1').text('Hello again');
  
  // change html
  $(item).html('<span>Hello, world!!</span>');
  
  // attribute matching a specified value
  $('h1[custom="banner"]').text('I am a custom banner');
  
  $('[class^="col"]').text('My class starts with col');
  
  $('[class*="md"]').text('My class contains md');
  
  // positional selectors
  // Selects all a elements that are direct descendants nav element - Parent > child
  $('nav > a')
  
  // Selects all a elements that are descendants nav element
  // The elements can appear anywhere inside of the element listed first
  $('nav a')
  
  
  // add class
  currentElement.addClass('class-name');
  
  // remove class
  currentElement.removeClass('class-name another');
  
  // modify attribute value
  $('selector').attr('attribute-name', 'new value');
  $('selector').attr('style', 'color:blue;');
  
  // retrieve attribute value
  console.log($('selector').attr('attribute-name'));
  
  // remove attribute
  
  $('selector').removeAttr('style');
  
  // Event handlers
  
  // click event
  // raised when the item is clicked
  $(item).click(function() {
      alert('clicked!!');
      // convert element to jQuery object
      $(this).text('Clicked');
  });
  
  // hover event
  // raised when the user moves their mouse over the item
  $(item).hover(function() {
      alert('hover!!');
  });
  
  // mouseout
  // raised when the user moves their mouse away from an item
  $(item).mouseout(function() {
      alert('mouse out');
  });
  
  
  
  
  // select the nav element by its ID
var navigation = $('#navigation');

// select all a elements with an href that starts with http://
navigation.find('a[href^="http://"]')


// text allows you to modify the text in an element
curentInput.next().text('error message');
  
  
})

<!-- Firstly link to the core jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
 

// Detect when the document is ready:

document.addEventListener('DOMContentLoaded', function () {
    //do something
});

// save button as variable
var button = document.getElementById("toggle");

// add event listener
button.addEventListener("click", function() {
  // do something
});

// axios
// <script src="https://unpkg.com/axios@0.16.2/dist/axios.min.js"></script>


axios
        .get(url)
        .then(response => {
          app.posts = response.data;
        })
        .catch(error => {
          app.log(error);
        });

function display( content ) {
  var paragraph = document.createElement( 'p' );
  var textnode = document.createTextNode( content );
  
  // add text node to paragraph
  paragraph.appendChild( textnode );
  
  // append to existing id
  document.getElementById( "content" )
    .appendChild( paragraph );
}

$( document ).ready( function () {
    init();
} );

$('p').children('ul').attr('style', 'color:goldenrod; background:rgba(255, 0, 0, .3)');
$('p').children('em').attr('style', 'background: red;')

var parent = $('li .alert').parent();