Created
October 1, 2015 23:04
-
-
Save bmoren/cd9706749d3ff073e9a1 to your computer and use it in GitHub Desktop.
jQuery demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //init jQuery to do things once the DOM (page) is ready. | |
| $(function(){ // fucntion aka. do something NOW //dont comment me out! | |
| // alert("hi han solo") //a good way to check that everything is working properly at the start. | |
| /* | |
| //this is the first basic example, cool! | |
| $("#juju").hide(); //hide juju at the beginning | |
| $('#juju').fadeIn(10000); // fade in juju over 10 seconds | |
| $('#bebe').addClass('cool'); //add a css class to the selected element | |
| //change the html contents of a selected element | |
| $('#bebe').html("<img src='http://www.starwarshelmets.com/2009/MacsDP%20Deluxe%20Vad01.jpg' /><p>HEY DARTH YOU'RE COOL"); | |
| $('#juju').html(' <a href="http://starwars.com"> Star Wars </a> '); | |
| */ | |
| /* //EXAMPLE 2 | |
| //click handler | |
| $('#bang').click(function(){ //so something when someone clicks on bang | |
| $('#juju').fadeOut(10000); //fade juju out | |
| }); //closes bang clickhandler | |
| $('#bebe').mouseenter(function(){ //do something when someone mouseenters the selected element | |
| $('#bebe').addClass('cool'); // add the class cool to the selected element | |
| $('#bebe').html("this is so cool!"); | |
| $('#juju').addClass('flipngrow'); | |
| }); // closes the mouseenter handler | |
| */ | |
| //EX.3 A few basic generative ideas | |
| /* | |
| //A. do something every second | |
| setInterval(function(){ | |
| //put the things to do every second in here | |
| $('#bebe').append('<img src="https://s-media-cache-ak0.pinimg.com/736x/7a/f3/03/7af3035dd777c2fa81b1bc862f5c5a90.jpg" />') | |
| }, 1000); //chage the 1000 to how frequently you wnat it to happen (in MS). | |
| */ | |
| // // B. do something a bunch of times when the page loads | |
| // You can only use it once (for now). | |
| // var loops = 1000; //how many times to do it? change the number | |
| // for(var i =0; i < loops; i++){ | |
| // //what should we do X amount of times | |
| // $('#bebe').append('<img src="http://findicons.com/files/icons/512/star_wars/128/clone_old.png" />'); | |
| // } // close the loop | |
| // | |
| // EX.3 integration of 2 ideas | |
| $("#bebe").mouseenter(function(event) { | |
| var loops = 1000; //how many times to do it? change the number | |
| for(var i =0; i < loops; i++){ | |
| //what should we do X amount of times | |
| $('#bebe').append('<img src="http://findicons.com/files/icons/512/star_wars/128/clone_old.png" />'); | |
| } // close the loop | |
| }); //closes mouseenter event | |
| }) //closes jquery init |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Jquery Demo</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="juju">R2-d2 binks darth moff mustafar mara hutt. Hutt leia gamorrean windu darth. Darth darth k-3po antilles kit mon utapau ackbar solo. Wedge antilles solo kessel organa amidala chewbacca. Skywalker fett hutt kessel mustafar vader chewbacca.</div> | |
| <div id="bebe">Calrissian hutt mandalore jango endor wedge antilles mara vader. Darth mandalore darth solo mandalore fett. Sith solo antilles secura fett solo sebulba. Naboo organa wedge droid skywalker thrawn droid luke. Aayla solo hutt leia jade organa hutt jawa palpatine.</div> | |
| <a href="#" id="bang">DO SOME STUFF</a> | |
| <a href="#" id="punch">DO MORE THINGS!</a> | |
| <!-- These 2 things are the same! --> | |
| <script type="text/javascript" src="jquery-2.1.4.js"></script> <!-- Local linking --> | |
| <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- remote Linking --> | |
| <!-- Our linked js file that we will use jQuer in MUST be below jquery. --> | |
| <script type="text/javascript" src="app.js"></script> <!-- link to the JS file that we will use jQ in --> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div{ | |
| border: 1px dashed black; | |
| } | |
| #juju{ | |
| width: 150px; | |
| background-color: salmon; | |
| cursor: crosshair; | |
| } | |
| .cool{ | |
| background-color: purple; | |
| font-size: 20px; | |
| border: 3px dashed pink; | |
| } | |
| .flipngrow { | |
| -webkit-animation: cssAnimation 3.2853s 16 ease; | |
| -moz-animation: cssAnimation 3.2853s 16 ease; | |
| -o-animation: cssAnimation 3.2853s 16 ease; | |
| } | |
| @-webkit-keyframes cssAnimation { | |
| from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } | |
| to { -webkit-transform: rotate(113deg) scale(1.5) skew(-60deg) translate(16px); } | |
| } | |
| @-moz-keyframes cssAnimation { | |
| from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } | |
| to { -moz-transform: rotate(113deg) scale(1.5) skew(-60deg) translate(16px); } | |
| } | |
| @-o-keyframes cssAnimation { | |
| from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } | |
| to { -o-transform: rotate(113deg) scale(1.5) skew(-60deg) translate(16px); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment