Slidedown:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
display: none; /* Hide the element */
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Slide down the element
$( "#slideMe" ).slideDown();
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Surprise!</p>
Slideup:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Slide up the element
$( "#slideMe" ).slideUp();
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Slide me up!</p>
Slidetoggle:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Toggle the element
$( "#slideMe" ).slideToggle();
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Slide me up!</p>
Slidetoggle fast:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Toggle the element
$( "#slideMe" ).slideToggle( "fast" );
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Slide me up!</p>
To See Output Copy The Whole Code And Past HERE
Slidetoggle slow:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Toggle the element
$( "#slideMe" ).slideToggle( "slow" );
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Slide me up!</p>
To See Output Copy The Whole Code And Past HERE
Slidetoggle really slow:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Toggle the element
$( "#slideMe" ).slideToggle( 2000 );
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Slide me up!</p>
To See Output Copy The Whole Code And Past HERE
Slidetoggle ease linear:
<!DOCTYPE html>
<title>My Example</title>
<style>
#slideMe {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Toggle the element
$( "#slideMe" ).slideToggle( "linear" );
});
});
</script>
<button>Slide it!</button>
<p id="slideMe">Slide me up!</p>
To See Output Copy The Whole Code And Past HERE
Jquery animate:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "#animation" ).animate({
fontSize: "3em",
letterSpacing: "0.3em"
}, 1000 );
});
});
</script>
<button>Run Animation!</button>
<div id="animation">Animation</div>
To See Output Copy The Whole Code And Past HERE
Jquery animate relative values:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "#animation" ).animate({
fontSize: "+=1.5em",
letterSpacing: "+=0.3em"
}, 1000 );
});
});
</script>
<button>Run Animation!</button>
<div id="animation">Animation</div>
<p>When we use relative values (e.g. <code>+=1.5em</code>) the animation effect will happen every time we run it. This wouldn't happen if we used absolute values (e.g. <code>1.5em</code>), as the absolute value would already have been achieved with the first iteration.</p>
To See Output Copy The Whole Code And Past HERE
Jquery animate toggle:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "p" ).animate({
width: "toggle"
}, 1000 );
});
});
</script>
<button>Toggle away!</button>
<p>Click the button... say... 3 times or more...</p>
To See Output Copy The Whole Code And Past HERE
Jquery animate chained:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "#animation" ).animate({
fontSize: "+=1.5em"
}, 500 );
$( "#animation" ).animate({
letterSpacing: "+=0.3em"
}, 1500 );
});
});
</script>
<button>Run Animation!</button>
<div id="animation">Animation</div>
<p>Chained animations is where a single event triggers multiple animations, and they run in order (one after the other).</p>
To See Output Copy The Whole Code And Past HERE
Jquery animate stop and start:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "#start" ).click( function() {
$( "#animation" ).animate({
fontSize: "+=1.5em",
letterSpacing: "+=0.3em"
}, 4000 );
});
$("#stop").click(function(){
$("#animation").stop();
});
});
</script>
<button id="start">Start Animation!</button>
<button id="stop">Stop Animation!</button>
<div id="animation">Animation</div>
To See Output Copy The Whole Code And Past HERE
Jquery hide current item:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Listen for a click event
$( "p" ).click(function() {
// Hide the current element
$( this ).hide();
});
});
</script>
<p>1. Click me to hide me.</p>
<p>2. Click me to hide me.</p>
<p>3. Click me to hide me.</p>
<p>4. Click me to hide me.</p>
To See Output Copy The Whole Code And Past HERE
Jquery hide another item:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Hide the element
$( "#hideMe" ).hide();
});
});
</script>
<button>Hide the element</button>
<p id="hideMe">Click the button to hide me.</p>
<p>I'll remain visible.</p>
To See Output Copy The Whole Code And Past HERE
Jquery show:
<!DOCTYPE html>
<title>My Example</title>
<style>
#showMe {
background: gold;
padding: 20px;
display: none; /* Hide the element */
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$("button").click(function() {
// Show the element
$( "#showMe" ).show();
});
});
</script>
<button>Display password</button>
<p>The password is...</p>
<p id="showMe">I'm not telling you my password!</p>
To See Output Copy The Whole Code And Past HERE
Jquery show and hide:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler for the 'hide' button
$("#hideContent").click(function() {
// Hide the element
$( "p" ).hide();
});
// Click event handler for the 'show' button
$("#showContent").click(function() {
// Show the element
$( "p" ).show();
});
});
</script>
<button id="hideContent">Hide</button>
<button id="showContent">Show</button>
<p>Look at me!</p>
To See Output Copy The Whole Code And Past HERE
Jquery fadeout current item:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Listen for a click event
$( "p" ).click(function() {
// Fade out the current element
$( this ).fadeOut();
});
});
</script>
<p>1. Click me to fade me out.</p>
<p>2. Click me to fade me out.</p>
<p>3. Click me to fade me out.</p>
<p>4. Click me to fade me out.</p>
To See Output Copy The Whole Code And Past HERE
Jquery fadetoggle reall slow:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler for the 'toggle' button
$( "#toggleContent" ).click(function() {
// Toggle the element
$( "p" ).fadeToggle( "slow" );
});
});
</script>
<button id="toggleContent">Toggle</button>
<p>Toggle me!</p>
To See Output Copy The Whole Code And Past HERE
Jquery fadeto:
<!DOCTYPE html>
<title>My Example</title>
<style>
p {
background: gold;
padding: 20px;
}
</style>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Use jQuery -->
<script>
// Wait for DOM to load and be ready
$(document).ready(function(){
// Click event handler
$( "p" ).click(function() {
// Fade out the element
$( this ).fadeTo( "slow", 0.5 );
});
});
</script>
<p id="fadeMe">Click me to fade me.</p>
To See Output Copy The Whole Code And Past HERE
Jquery add content before:
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
background: orange;
color: white;
width: 150px;
padding: 20px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$(this).before( "<div class='box'>New box</div>" );
});
});
</script>
<button>Create a box</button>
To See Output Copy The Whole Code And Past HERE
Jquery add content prepend:
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
background: orange;
color: white;
width: 150px;
padding: 20px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( ".box" ).prepend( "<p>Surprise!</p>" );
});
});
</script>
<button>Add Content</button>
<div class="box">
<p>Main content.</p>
</div>
To See Output Copy The Whole Code And Past HERE
Jquery add content clone and prependto:
<!DOCTYPE html>
<title>My Example</title>
<style>
div {
color: white;
padding: 10px;
margin: 20px;
}
.file {
background: limegreen;
}
.folder {
background: gold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( ".file" ).click( function() {
$( this ).clone().prependTo( ".folder" );
});
});
</script>
<div class="file">
File
</div>
<div class="folder">
Folder
</div>
To See Output Copy The Whole Code And Past HERE
Jquery remove content empty:
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
background: orange;
color: white;
width: 150px;
padding: 20px;
margin: 10px;
}
.inner,
.inner > p {
border: 1px dotted white;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( ".box" ).empty();
});
});
</script>
<button>Empty the Box!</button>
<div class="box">
<div class="inner">
<p>Main content.</p>
<p>More content.</p>
<p>Extra content.</p>
</div>
</div>
To See Output Copy The Whole Code And Past HERE
Jquery remove content remove:
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
background: orange;
color: white;
padding: 10px;
}
p {
border: 1px dotted white;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( ".box p" ).click( function() {
$( this ).remove();
});
});
</script>
<p>Click a paragraph to remove it.</p>
<div class="box">
<p>Main content.</p>
<p>More content.</p>
<p>Extra content.</p>
</div>
To See Output Copy The Whole Code And Past HERE
Jquery dom traversal find:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "ul" ).find( "li ul" ).css( "background-color", "yellow" );
});
});
</script>
<button>Highlight all nested lists</button>
<ul>
<li>Apples
<ul>
<li>Big ones</li>
<li>Juicy ones</li>
<li>Red ones</li>
</ul>
</li>
<li>Oranges</li>
<li>Papaya
<ul>
<li>Papaya carica</li>
<li>Carica</li>
<li>Carica pubescens</li>
</ul>
</li>
<li>Lychee</li>
<li>Rambutan</li>
<li>Passionfruit</li>
<li>Mango</li>
</ul>
To See Output Copy The Whole Code And Past HERE
Query dom traversal has:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "li" ).has( "ul" ).css( "background-color", "yellow" );
});
});
</script>
<button>Highlight all list items that have nested lists</button>
<ul>
<li>Apples
<ul>
<li>Big ones</li>
<li>Juicy ones</li>
<li>Red ones</li>
</ul>
</li>
<li>Oranges</li>
<li>Papaya
<ul>
<li>Papaya carica</li>
<li>Carica</li>
<li>Carica pubescens</li>
</ul>
</li>
<li>Lychee</li>
<li>Rambutan</li>
<li>Passionfruit</li>
<li>Mango</li>
</ul>
To See Output Copy The Whole Code And Past HERE
Jquery dom traversal eq:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "li" ).eq( 4 ).css( "background-color", "yellow" );
});
});
</script>
<button>Highlight the 5th list item</button>
<ul>
<li>Apples
<ul>
<li>Big ones</li>
<li>Juicy ones</li>
<li>Red ones</li>
</ul>
</li>
<li>Oranges</li>
<li>Papaya
<ul>
<li>Papaya carica</li>
<li>Carica</li>
<li>Carica pubescens</li>
</ul>
</li>
<li>Lychee</li>
<li>Rambutan</li>
<li>Passionfruit</li>
<li>Mango</li>
</ul>
To See Output Copy The Whole Code And Past HERE
Jquery dom traversal filter:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "li" ).filter( ":odd" ).fadeOut( "slow" );
});
});
</script>
<button>Fade out the odd list items</button>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Papaya</li>
<li>Lychee</li>
<li>Rambutan</li>
<li>Passionfruit</li>
<li>Mango</li>
</ul>
<p>Odd ones start at the second list item (zero-based indexing).</p>
To See Output Copy The Whole Code And Past HERE
Jquery dom traversal not:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "li" ).not( ":odd" ).fadeOut( "slow" );
});
});
</script>
<button>Fade out the even list items (i.e. the "non-odd" ones)</button>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Papaya</li>
<li>Lychee</li>
<li>Rambutan</li>
<li>Passionfruit</li>
<li>Mango</li>
</ul>
<p>Even ones start at the first list item (zero-based indexing).</p>
To See Output Copy The Whole Code And Past HERE
Jquery dom traversal siblings:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "li:nth-child(3)" ).siblings().css( "background-color", "yellow" );
});
});
</script>
<button>Highlight Siblings of the 3rd list items</button>
<ul>
<li>Apples
<ul>
<li>Big ones</li>
<li>Juicy ones</li>
<li>Red ones</li>
</ul>
</li>
<li>Oranges</li>
<li>Papaya
<ul>
<li>Papaya carica</li>
<li>Carica</li>
<li>Carica pubescens</li>
</ul>
</li>
<li>Lychee</li>
<li>Rambutan</li>
<li>Passionfruit</li>
<li>Mango</li>
</ul>
To See Output Copy The Whole Code And Past HERE
Jquery set content val:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "input" ).val( "Professor Farnsworth" );
});
});
</script>
<button>Add Name</button>
<input>
To See Output Copy The Whole Code And Past HERE
Jquery set content text:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( ".warning p" ).text( "Hey! I thought I warned you not to do that!" );
});
});
</script>
<button>Click me!</button>
<div class="warning">
<p>Don't do it!</p>
</div>
To See Output Copy The Whole Code And Past HERE
Jquery set content attr:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$( "img" ).attr( "src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlr74-yCEShCS4ML2GX0BpmnOAn3WFL9jKkHba1wUjKTNB0Qa4V7L7-XIjXKOqqYFkCC_ig78vDAegSZAoIAWdrINgnqEfwcPal7twTiP1F3AvY-MwXXD9zIX428nGAqnEvp-KUlkUy8w/s1600/images.jpg" );
});
});
</script>
<p><button>Change Image</button></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Y9Vz6QpU8lBbsn5iCGKwt9DPKRYY1XC9hIxsLetc4rqNBUpTIEK_Kuc5730EtZzhUJEb0AN88t7cQCvkB6OLaEHwsXynVHDSyAVsa5-o-juKM9HyPI3TA1o-mRK-6vuhyelONAino8E/s1600/13m.jpg" alt="Photo of bird">
To See Output Copy The Whole Code And Past HERE
Jquery get content val:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "input" ).keyup( function() {
$( "p" ).text( $("input").val() );
});
});
</script>
<input placeholder="Enter your name">
<p></p>
To See Output Copy The Whole Code And Past HERE
Jquery dimensions set width and height:
<!DOCTYPE html>
<title>My Example</title>
<style>
#resizeMe {
background: gold;
width: 40px;
height: 20px;
margin: 7px;
padding: 10px;
border: 5px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
$("#resizeMe").width( "+=20" ).height( "+=20" );
});
});
</script>
<button>Resize the Box</button>
<p>Does not include padding, margins, and borders.</p>
<div id="resizeMe">
</div>
To See Output Copy The Whole Code And Past HERE
Jquery dimensions get width and height:
<!DOCTYPE html>
<title>My Example</title>
<style>
#resizeMe {
background: gold;
width: 180px;
height: 220px;
margin: 7px;
padding: 10px;
border: 5px solid black;
overflow: auto;
resize: both;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
var msg = "";
msg = msg + "<p>Width: " + $( "#resizeMe" ).width();
msg = msg + "<p>Height: " + $( "#resizeMe" ).height();
msg = msg + "<p>Resize me, then 'Get Dimensions' again...";
$("#resizeMe").prepend(msg);
});
});
</script>
<button>Get Dimensions</button>
<p>Does not include padding, margins, and borders.</p>
<div id="resizeMe">
</div>
To See Output Copy The Whole Code And Past HERE
Jquery get window width and height:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "button" ).click( function() {
var msg = "";
msg = msg + "<p>Width: " + $( window ).width();
msg = msg + "<p>Height: " + $( window ).height();
$( "#msg" ).html( msg );
});
});
</script>
<button>Get Window Dimensions</button>
<div id="msg"></div>
To See Output Copy The Whole Code And Past HERE
Jquery+css get background color:
<!DOCTYPE html>
<title>My Example</title>
<style>
div {
background: limegreen;
color: white;
width: 200px;
padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "div" ).click(function() {
var theColor = $( this ).css( "background-color" );
$( "h1" ).html( theColor );
});
});
</script>
<div>Click me to find out what my (computed) background color is!</div>
<h1>Background color is...</h1>
To See Output Copy The Whole Code And Past HERE
Jquery+css set multiple declarations:
<!DOCTYPE html>
<title>My Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "p" ).click( function() {
$( this ).css( {
"background": "gold",
"font-size": "3em",
"padding": "40"
} );
});
});
</script>
<p>Click me</p>
To See Output Copy The Whole Code And Past HERE
Jquery+css set toggleclass:
<!DOCTYPE html>
<title>My Example</title>
<style>
div {
background: limegreen;
color: white;
padding: 10px;
margin: 20px;
}
.different {
border: 5px solid orange;
background: gold;
color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "div" ).click( function() {
$( this ).toggleClass( "different" );
});
});
</script>
<div>
Click me...
</div>
<div class="different">
No, click me!
</div>
No comments:
Post a Comment
Hey, It's Been Grabbed