Skip to content

Instantly share code, notes, and snippets.

@siakaramalegos

siakaramalegos/practice_js.html

Created September 3, 2015 13:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save siakaramalegos/4003d08b49f5e3533a46 to your computer and use it in GitHub Desktop.
Save siakaramalegos/4003d08b49f5e3533a46 to your computer and use it in GitHub Desktop.
Download ZIP
Practicing JQuery
Raw
practice_js.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
.special {
color: pink;
}
</style>
</head>
<body>
<div id="my-element">Hello</div>
<div id="bye">Goodbye</div>
<a href="#">link</a>
<script type="text/javascript">
// Get an attribute's value
// var id = $("div").attr("id");
// console.log(id); // "my-element"
// // Set an attribute's value
// // $("div").attr('id', "your-element");
// // Add a class
// $("div").addClass("special");
// // Remove a class
// // $("div").removeClass("special");
// // Add or remove a class depending on whether it's already present
// $("div").toggleClass("special")
// check whether a class is present
// if ($("div").hasClass("special")){
// alert("it's special!");
// } else {
// alert("it's normal");
// }
// When we click on the div, an alert will pop up showing the div's text
// $(function (){
// $("#my-element").click(function (e){
// var text = $(e.target).text();
// alert(text);
// });
// });
// Animation!
$(function (){
$("#my-element")
.show()
.addClass('selectable');
//.click(function(e){
//alert("You clicked me!");
// })
$("#bye").hide();
$("#my-element").click(function (e){
$(e.target).slideUp();
$("#bye").slideDown();
});
});
// $("a") // all anchor <a> elements
// $("li a") // only <a> elements that are descendants of an <li>
// $(".special") // anything with a class="special"
// $("#heading") // anthing with an id="heading"
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment