Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/jq-events.html

Created June 11, 2019 22:54
Show Gist options
  • Save JoelCodes/aad566a63a0e007e47a098ef688fae5e to your computer and use it in GitHub Desktop.
Save JoelCodes/aad566a63a0e007e47a098ef688fae5e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jq-events.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM Events</title>
<style>
body, * {
font-size: 40px;
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<p>
<button>The Hardest Button To Button</button>
</p>
<p>
<form>
<input type='text' name='thoughts'/><br/>
<input type='submit' value="Whatcha thinkin' 'bout?"/>
</form>
</p>
<script>
var theButton = $('button')
.first()
.on('click', clickListener);
function clickListener(event){
console.log('Clicked');
theButton.off('click', clickListener);
}
var theTextInput = $('input[type=text]')
.keyup(function(e){
console.log(e);
console.log(this.value);
})
var theForm = $('form');
function onSubmit(event){
event.preventDefault();
var currentThoughts = event.target.elements.thoughts.value;
alert('You are thinking: ' + currentThoughts);
event.target.elements.thoughts.value = "";
}
theForm.on('submit', onSubmit);
</script>
</body>
</html>
Raw
jq-manipulation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM Manipulation</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<style>
body {
font-size: 40px;
}
.yelling {
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>DOM Manipulation</h2>
<ul id='dom-manipulation-aspect-list' class="red-list">
<li>Easy</li>
<li>Fun</li>
<li>Profitable</li>
</ul>
Some Text
<script>
var ulByQuerySelector = $('ul');
// CLASS MANIPULATION
// setTimeout(function(){
// ulByQuerySelector.addClass('yelling');
// }, 5000);
// setTimeout(function(){
// ulByQuerySelector.removeClass('yelling');
// }, 10000);
// setInterval(function(){
// ulByQuerySelector.toggleClass('yelling');
// }, 1000);
// INLINE STYLE MANIPULATION
console.log(ulByQuerySelector.style);
// setTimeout(function(){
// ulByQuerySelector.slideToggle().fadeToggle();
// // ulByQuerySelector.style.display = 'none';
// }, 2000);
// REMOVE DOM NODES
console.log(ulByQuerySelector.children);
var intervalID = setInterval(function(){
ulByQuerySelector.children().first().remove();
// ulByQuerySelector.children[0].remove();
if(ulByQuerySelector.children().length === 0){
clearInterval(intervalID);
console.log("All Done");
}
}, 5000);
// ADD DOM NODE
setInterval(function(){
$('<li>')
.text('Fresh!')
.appendTo(ulByQuerySelector);
}, 3000);
</script>
</body>
</html>
Raw
jq-puppies.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Puppies!</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<script>
// Pass code to jQuery document loaded
$(function(){
var puppyCounter = 1;
var $thePuppyList = $('#puppy-list');
var $thePuppyForm = $('#puppy-form');
$thePuppyList.on('click', '[data-send-to-farm]', function(e){
event.target.parentElement.remove();
});
$thePuppyForm.on('submit', function(e){
e.preventDefault();
var $puppyNameInput = $(e.target.elements.name);
var puppyName = $puppyNameInput.val();
$puppyNameInput.val("");
var $newPuppyLi = $('<li>').appendTo($thePuppyList);
$('<img>')
.attr('src', 'http://www.placepuppy.net/' + puppyCounter + 'p/400/250')
.appendTo($newPuppyLi);
$("<span>").text(puppyName).appendTo($newPuppyLi);
$('<br>').appendTo($newPuppyLi);
$('<button>')
.text("He's going to a better place")
.attr('data-send-to-farm', true)
.appendTo($newPuppyLi);
puppyCounter += 1;
});
});
</script>
<form id='puppy-form'>
<input type='text' name='name'/>
<input type='submit' value='Make Puppy'/>
</form>
<ul id='puppy-list'>
</ul>
</body>
</html>
Raw
jq-querying.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<title>Document</title>
<style>
/* ul {
color: tomato;
} */
/* .red-list {
color: tomato;
} */
#dom-manipulation-aspect-list {
color: deepskyblue;
}
</style>
</head>
<body>
<h2>DOM Manipulation</h2>
<ul id='dom-manipulation-aspect-list' class="red-list">
<li>Easy</li>
<li>Fun</li>
<li>Profitable</li>
</ul>
Some Text
<script>
var ul = document.body.children[1];
var ulByElementName = $('ul');
var ulByClassName = $('.red-list');
var ulById = $('#dom-manipulation-aspect-list');
var ulByQuerySelector = $('ul.red-list#dom-manipulation-aspect-list');
var liFind = ulById.find('li');
var liWithContext = $('li', ul);
console.log('UL', ul);
console.log('UL By Element Name', ulByElementName);
console.log('UL By Class Name', ulByClassName);
console.log('UL By Id', ulById);
console.log('UL By Query Selector', ulByQuerySelector);
console.log('LI with find', liFind);
console.log('LI with context', liWithContext);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment