Step 1: Open notepad++ and linking the jquery file in "<head>"
we link jquery file two way....
1st way : download jquery file and linking jquery file in your html file in "<head>" tag like this
<script src=" jquery-3.0.0.min.js"></script>
2nd way : you don't want to download this file. you can linking CDN file like this
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Step 2 : The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
step 3 :
Example :1 jQuery effects, including ".hide()", use for hide some element then the link on click like as video.
Example :2 jQuery effects, including ".show()" use for show hidden element then the link on click like as video.
Example :3 jQuery effects, including ".slideToggle()" use for hide and show like as video.
Example :4 jQuery effects, including ".alert();" use for show message like as video.
<html>
<head>
<title>test error.com</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="icon/assets/css/font-awesome.css" rel="stylesheet">
<script src="jquery-3.0.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").hide();
});
</script>
<!-- <script>
$(document).ready(function(){
$("#show").click(function(){
$("#hide").show();
});
});
</script> -->
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#hide").slideToggle();
});
});
</script>
<script>
$(document).ready(function(){
$(".alert").click(function(){
alert("Enter the name");
});
});
</script>
</head>
<body>
<div class="main-div">
<div class="header">
<div class="logu">
<h1>company</h1>
</div>
<div class="menu">
<ul>
<li><a href="#" class="active">HOME</a><li>
<li><a href="#">ABOUT US</a><li>
<li><a href="#">SOLUTIONS</a><li>
<li><a href="#">PARTNERS</a><li>
<li><a href="#">SERVICES</a><li>
<li><a href="#">CONTACTS</a><li>
<ul>
</div>
</div>
<div class="baner">
<i class="fa fa-globe"></i><h1>Global</h1><h2>cominication</h2>
<p id="hide" >This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.?</p>
<a id="show" href="#">more</a>
</div>
<div class="contant">
<div class="business-strategies">
<i class="fa fa-cog fa-fw" ><i class="fa fa-cog fa-fw" id="icon2" ></i></i>
<h3>Business strategies</h3>
<p>This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.</p>
</div>
<div class="business-planing">
<i class="fa fa-calendar-check-o" ></i>
<h3>Business planing</h3>
<p>This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.</p>
</div>
<div class="sing-up">
<i class="fa fa-envelope-o" ></i>
<h3>Newsletter sing-up</h3>
<input type="text" value="Name" onfocus="if(this.value=='Name')this.value='';"></input> <button class="alert">submit</button>
<p>This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.</p>
</div>
</div>
<div class="footer">
<p>© Global comunications All Rights Reserved</p>
<span>Developed by Tofael</span>
</div>
</div>
</body>
</html>
About Teacher
Comments
