Skip to content

Instantly share code, notes, and snippets.

@palaniichukdmytro

palaniichukdmytro/index.html

Created December 23, 2015 13:54
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 palaniichukdmytro/0525fb5d964816483d11 to your computer and use it in GitHub Desktop.
Save palaniichukdmytro/0525fb5d964816483d11 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Tutorial
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>jQuery Tutorial</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class ="container">
<div class ="jumbotron">
<center>
<h1>jQuery Tutorial</h1>
<button class = "btn btn-primary" id="button1">#button 1</button>
<button class = "btn btn-info" id="button2">#button 2</button>
<button class = "btn btn-danger" id="button3">#button 3</button>
<button class = "btn btn-warning" id="button4">#button 4</button>
</center>
</div> <!--/end jumbotron--->
<div class="row">
<div class="col-xs-3">
<div class="panel panel-primary" id="section1">
<div class="panel-heading">
#section 1
</div>
<div class="panel-body">
1.pick up by id section1 and change the body text inside pannel body<br>2.Change css with jquery ".css()"-method<br>3.We use camelCase in css it's jquery for shrothand workwlow
</div>
</div> <!--end the panel panel-primary-->
</div> <!--end col-xs-3-->
<div class="col-xs-3">
<div class="panel panel-info" id="section2">
<div class="panel-heading">
#section 2
</div>
<div class="panel-body">
1.#section2 with jquery "fadeOut()"method with 2000 ml-seconds<br>
2.#section2 with jquery "fadeIn()"method with 5000 ml-seconds.
</div>
</div> <!--end the panel panel-primary-->
</div> <!--end col-xs-3-->
<div class="col-xs-3">
<div class="panel panel-danger" id="section3">
<div class="panel-heading">
#section 3
</div>
<div class="panel-body">
<p>1. #section3 with jquery "slideUp()"method with 3000 ml-seconds.<br>
2. #section3 with jquery "slideDown()"method with 500 ml-seconds.</p>
</div>
</div> <!--end the panel panel-primary-->
</div> <!--end col-xs-3-->
<div class="col-xs-3">
<div class="panel panel-warning" id="section4">
<div class="panel-heading">
#section 4
</div>
<div class="panel-body">
1.#section4 with jquery "hide()"method with 4000 ml-swceonds<br>
2. #section4 with jquery "show()"method with 4000 ml-swceonds.
</div>
</div> <!--end the panel panel-primary-->
</div> <!--end col-xs-3-->
</div> <!----end row--->
</div> <!--end continer-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
<!--YOU CAN PUT jQuery script inside html document here-->
</script>
</body>
</html>
Raw
jQuery Tutorial.markdown

jQuery Tutorial

jQuery Turorial is example of using some jQuery methods with bootstrap classes and ID

A Pen by Dmytro on CodePen.

License.

Raw
script.js
//pick up by id section1 and change the body text inside pannel body
$("#section1 .panel-body").html("This update Text of section1");
//change css with jquery ".css()"-method
// We use camelCase in css it's jquery for shrothand workwlow
$("#section1").css({
color:"red",
fontWeight: "500", //or 'font-weight':'bold' same result-->
fontSize: "40px"
});
//#section2 with jquery "fadeOut()"method with 2000 ml-seconds
//#section2 with jquery "fadeIn()"method with 5000 ml-seconds-->
$("#section2").fadeOut(2000).fadeIn(5000);
//#section3 with jquery "slideUp()"method with 3000 ml-swceonds
//#section3 with jquery "slideDown()"method with 500 ml-swceonds
$("#section3").slideUp(3000).slideDown(500);
//#section4 with jquery "hide()"method with 4000 ml-swceonds
//#section4 with jquery "show()"method with 4000 ml-swceonds
$("#section4").hide(4000).show(3000);
/*--- To see how it's work, coment script above-------------------------
//#section2 "fadeToggle();"-method
$("#section2").fadeToggle();
//#section3 "slideToggle()"-method;
$("section3").slideToggle();
--------------------------------------------------------------*/
/*-----------------To see how it's work, coment all jquery script above--------
//"fadeToggle()" method for all div elements
with 5000 ml-seconds
$("div").fadeToggle(5000);
-------------------------------------------------------------*/
/*-------------To see how it's work, coment all jquery script above-----------------
//Any element has "id = section" do application
//and "slideUp" - method for each "id=button"
//$("[id*='section']").fadeToggle(5000);
//$("[id^='button']").slideUp(5000);
---------------------------------------------------------------------------------*/
/*------------------To see how it's work, coment all jquery script above------------
//pick up by id which contain "1"
$("[id$='1']").slideToggle(5000);
---------------------------------------------------------------------------------*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment