kowsheek/demo.html

## demo.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
  <section id="container">
    <button name="dog">Add Dog</button>
    <button name="cat">Add Cat</button>
    <button id="all">Add all</button>
    <div id="animals"></div>
  </section>

  <script src="script.js" type="text/javascript"></script>
</body>
</html>

## demo1.js
$(document).ready(function () {
    $('button').on('click', function (evt) {
        console.log(evt.offsetX, evt.offsetY);
        var $this = $(this);
        var $animals = $this.siblings('#animals');
        var name = $this.attr('name');
        console.log(name);
        $animals
            .append(`<strong>${name}</strong>`)
            .append('<br/>');
    });
});

## demo2.js
$(document).ready(function () {
    var $container = $('#container').append('<div id="animals"></div>');
    var $animals = $('#animals', $container);

    $('button').on('click', function (evt) {
        console.log(evt.offsetX, evt.offsetY);
        var $this = $(this);
        var name = $this.attr('name');
        console.log(name);
        $animals.append(name);
    });
});

## demo3.js
$(document).ready(function () {
    var $container = $('#container').append('<div id="animals"></div>');
    var $animals = $('#animals', $container);

    var animals = [
        {
            name: 'dog',
            age: 10
        },
        {
            name: 'cat',
            age: 30
        },
        {
            name: 'monkey',
            age: 18
        },
        {
            name: 'dog',
            age: 20
        }
    ];

    $('#all').on('click', function (evt) {
        animals.forEach(function (animal) {
            $('<article>')
                .append(`<strong>${animal.name}</strong>`)
                .append(' is ')
                .append(animal.age)
                .append(' years old.')
                .addClass('animal')
                .addClass(animal.name)
                .appendTo($animals);
        });
    });
});

## outline.md

      
    Raw
  

              outline.md
            
          
    Background


Browser's Javascript library
jQuery "syntactical sugar"
jQuery compatibility
Still very popular and useful
jQuery docs

jQuery


Event handling
Element manipulation
DOM manipulation

Case against jQuery


Large footprint
Version proliferation

Optimizations


Minification
Compression
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
	<section id="container">
	<button name="dog">Add Dog</button>
	<button name="cat">Add Cat</button>
	<button id="all">Add all</button>
	<div id="animals"></div>
	</section>

	<script src="script.js" type="text/javascript"></script>
	</body>
	</html>
	$(document).ready(function () {
	$('button').on('click', function (evt) {
	console.log(evt.offsetX, evt.offsetY);
	var $this = $(this);
	var $animals = $this.siblings('#animals');
	var name = $this.attr('name');
	console.log(name);
	$animals
	.append(`<strong>${name}</strong>`)
	.append('<br/>');
	});
	});
	$(document).ready(function () {
	var $container = $('#container').append('<div id="animals"></div>');
	var $animals = $('#animals', $container);

	$('button').on('click', function (evt) {
	console.log(evt.offsetX, evt.offsetY);
	var $this = $(this);
	var name = $this.attr('name');
	console.log(name);
	$animals.append(name);
	});
	});