Skip to content

Instantly share code, notes, and snippets.

@avelops

avelops/index.html

Created July 30, 2023 19:41
Show Gist options
  • Save avelops/41bebce321b42408d6e05e102e5e0c88 to your computer and use it in GitHub Desktop.
Save avelops/41bebce321b42408d6e05e102e5e0c88 to your computer and use it in GitHub Desktop.
Download ZIP
jquery events
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1 class="header">jQuery Tutorial</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo sit adipisci sapiente cumque quaerat vero, quae repellendus earum debitis eius porro quo nihil cum modi voluptatibus voluptas incidunt mollitia itaque.</p>
<h1>Another Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto omnis provident soluta quia minus molestiae et laborum unde praesentium perferendis, facilis similique nobis in dolores rem, nihil vero exercitationem.</p>
<div class="orderedList">
<ol>
Great Coder is:
<li>Me!</li>
<li>Me!!</li>
<li>Me!!!</li>
</ol>
</div>
<form>
<textarea name="review" class="inputbox" style="height: 300px; width: 300px; text-align: left"> </textarea>
<br />
<button type="submit">I Agree</button>
</form>
<script src="example.js"></script>
</body>
</html>
Raw
script.js
// prettier-ignore
$(document).ready(function () {
const addstyle = function (selectorStr,newstyle) {
return function () {
let currentStyle = $(`${selectorStr}`).attr('style')
if (currentStyle !== undefined) {
// console.log(`no style is applied on: ${selectorStr}`);
// console.log(`style received: ${newstyle}`);
$(`${selectorStr}`).attr('style',`${currentStyle} ${newstyle}`)
} else {
// console.warn(`the following style is applied: ${selectorStr}`);
// console.warn(`style received: ${newstyle}`);
$(`${selectorStr}`).attr('style',`${newstyle}`)
}
};
};
const removestyle = function (selectorStr,newstyle) {
return function () {
let currentStyle = $(`${selectorStr}`).attr('style')
if (currentStyle !== undefined) {
// console.log(`no style is applied on: ${selectorStr}`);
// console.log(`style received: ${newstyle}`);
$(`${selectorStr}`).attr('style',currentStyle.replace(newstyle,''))
} else {
// console.warn(`the following style is applied: ${selectorStr}`);
// console.warn(`style received: ${newstyle}`);
$(`${selectorStr}`).attr('style',currentStyle.replace(newstyle,''))
}
};
};
$("body")
.prepend("<Button id=btn>green</Button>")
.prepend("<Button id=btn2>red</Button>")
.prepend("<Button id=btn3>orange</Button>")
.prepend("<Button id=btn4>blue</Button>");
const buttons = '#btn,#btn2,#btn3,#btn4'
$(`${buttons}`).each(function(){
const buttonColor = $(this).text();
$(this).attr("style",`color: ${buttonColor};`)
})
$('body').on('click',`${buttons}`, function () {
// console.log(`color: ${event.target.textContent};`);
$('.header').attr('style',`color: ${event.target.textContent};`)
// addstyle('.header',`color: ${event.target.textContent};`);
});
$('.header')
.on("mouseenter", addstyle('.header','font-style: italic;'))
.on("mouseleave", removestyle('.header','font-style: italic;'));
$('p')
.on('mouseenter',addstyle('p','color: white;'))
.on('mouseleave',removestyle('p','color: white;'))
$(".orderedList ol")
.on("mouseenter", addstyle('.orderedList ol','font-style: italic; color: white; background-color: orange;'))
.on("mouseleave", removestyle('.orderedList ol','font-style: italic; color: white; background-color: orange;'))
.before("<hr>")
.after("<h3>Done!");
$('.inputbox')
.on("focus", addstyle('.inputbox','font-style: italic; color: white; background-color: grey;'))
.on("blur", removestyle('.inputbox','font-style: italic; color: white; background-color: grey;'))
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment