Skip to content

Instantly share code, notes, and snippets.

@swapnilshrikhande

swapnilshrikhande/event_bubble_demo.html

Last active July 26, 2016 10:35
Show Gist options
  • Save swapnilshrikhande/2d304391d11b60f79e0746913121f90d to your computer and use it in GitHub Desktop.
Save swapnilshrikhande/2d304391d11b60f79e0746913121f90d to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Demo Snippets
Raw
event_bubble_demo.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>-->
<script src="./jquery-1.11.3.js"></script>
</head>
<style type="text/css">
.target{
border: 5px groove black;
padding : 50px;
}
</style>
<body>
<div class="target largest">
<div class="target large">
<div class="target medium">
<div class="target small">
<div class="target tiny">
<div class="target micro">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var en = en || {};
en.getRandomColor = function(){
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
$(document).ready( function(){
$(".target").click(function(event){
//stops event bubble
//event.stopPropagation();
$(this).css("background-color",en.getRandomColor());
console.log("clicked");
//return false; //stops event bubble
return true;
});
});
</script>
</body>
</html>
Raw
jquery_agenda.js
1. Selecting Elements
1.1. Id
1.2. Class
2. Selector Operators
#
.
space
,
>
3. Traversing the dom tree
1. closest
2. find : Search in all children
3. parents
4. filter : Filter in selected elements
4. Creating new element
Attaching it to dom
append() function
before()
after()
5. remove() deleting an element
6. Getting value from element
val()
html()
text()
7. Setting value to element
val('value')
html()
text()
8. Updating elements
detach()
attr()
css()
append()
9. Event Handling
1. Simple Event Handling
2. Closure Demo
3. Event Bubbling
Raw
jquery_events_demo.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Selectors</title>
<script type="text/javascript" src="./jquery-1.11.3.js"></script>
<style type="text/css">
div{
width: 700px;
border : 1px solid black;
}
#lucy_aunty{
color: white;
background-color: green;
font-size:45px;
}
.ben {
height: 50px;
}
#lucy_aunty .ben{
background-color: brown;
}
#maria_aunty .ben{
background-color: snow;
}
.martha{
color: black;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<!-- mummy -->
<div class="parent white" id="lucy_aunty">
<!-- sons -->
<div class="son ben" id="moore">
ben moore
</div>
<div class="son ben" id="johnson">
ben Johnson
</div>
<div class="son ben" id="williams">
ben williams
</div>
<div class="son ben" id="jones">
ben jones
</div>
<div class="son ben" id="brown">
ben brown
</div>
<!-- daughters -->
<div class="daughter martha" id="moore">
martha moore
</div>
<div class="daughter martha" id="taylor">
martha taylor
</div>
<div class="daughter martha" id="anderson">
martha anderson
</div>
<div class="daughter martha" id="thomas">
martha thomas
</div>
<div class="daughter martha" id="jackson">
martha jackson
</div>
</div>
<!-- mummy -->
<div class="parent white" id="maria_aunty">
<!-- sons -->
<div class="son ben" id="moore">
ben moore
</div>
<div class="son ben" id="johnson">
ben Johnson
</div>
<div class="son ben" id="williams">
ben williams
</div>
<div class="son ben" id="jones">
ben jones
</div>
<div class="son ben" id="brown">
ben brown
</div>
<!-- daughters -->
<div class="daughter martha" id="moore">
martha moore
</div>
<div class="daughter martha" id="taylor">
martha taylor
</div>
<div class="daughter martha" id="anderson">
martha anderson
</div>
<div class="daughter martha" id="thomas">
martha thomas
</div>
<div class="daughter martha" id="jackson">
martha jackson
</div>
</div>
<script>
$(document).ready(function(){
$(".ben").on("click mouseover",function(event){
var parentElem = $(this).closest(".parent");
console.log(parentElem);
});
$(".martha").on("click",function(event){
console.log("Clicked on Martha...");
console.log("...Event Object :",event);
alert("clicked on Martha");
});
});
</script>
</body>
</html>
Raw
jquery_selectors_demo.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Selectors</title>
<script type="text/javascript" src="./jquery-1.11.3.js">
</script>
<style type="text/css">
div{
width: 700px;
border : 1px solid black;
}
#lucy_aunty{
color: white;
background-color: green;
font-size:21px;
}
.ben{
height: 50px;
background-color: brown;
}
.martha{
color: black;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<!-- mummy -->
<div class="white" id="lucy_aunty">
<!-- sons -->
<div class="son ben" id="moore">
ben moore
</div>
<div class="son ben" id="johnson">
ben Johnson
</div>
<div class="son ben" id="williams">
ben williams
</div>
<div class="son ben" id="jones">
ben jones
</div>
<div class="son ben" id="brown">
ben brown
</div>
<!-- daughters -->
<div class="daughter martha" id="moore">
martha moore
<div class="grand-daughter martha" id="moore">
martha moore
</div>
</div>
<div class="daughter martha" id="taylor">
martha taylor
</div>
<div class="daughter martha" id="anderson">
martha anderson
</div>
<div class="daughter martha" id="thomas">
martha thomas
</div>
<div class="daughter martha" id="jackson">
martha jackson
</div>
</div>
<script>
$(document).ready(function(){
console.log('DOM Tree Initialized Here..');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment