A silly code of JQuery
Info: This code show how a class rohan and id rita is used for hiding.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js">
</script>
<script>
$(document).ready(function(){
$("p#rita").click(function(){
$(this).hide();
});
$("p.rohan").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="rita">If you click on me, I will disappear.</p>
<p class="rohan">Click me away!</p>
<p class="rohan">Click me too!</p>
<div class="rohan">My father</div> //In this case it can not be disappeared bcoz it is
// div#rohan
</body>
</html>
1.First Step
$(document).ready();
2.Second Step
$(document).ready(function(){
});
এই second bracket er moddhe amra function body likhbo
3.Third Step
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});ekhane shokol p te click korle p gulo hide hoye jabe.
Issue1.0:
<p>My name is khan</p>
<button>Click Me</button>
$(“button”).click(function(){
$(“p”).hide();
});
ekhane button ta k click korle p er moddhe thaka(my name is khan) part ta hide hoye jabe.
Info:
$(":button")
Selects all <button> elements and <input> elements of type="button"
এখানে কোলন ব্যবহার করা হয়েছে।যা <button></button> এবং
<input type=”button” value=”Press Me!”>
দুই জায়গাতেই কাজ করতে পারে।
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Various type of events are used in jquery are given below:
Mouse Events
|
Keyboard Events
|
Form Events
|
Document/Window Events
|
click
|
keypress
|
submit
|
load
|
dblclick
|
keydown
|
change
|
resize
|
mouseenter
|
keyup
|
focus
|
scroll
|
mouseleave
|
blur
|
unload
|
$("input").focus(function(){
$(this).css("background-color","red");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
এখানে focus() method টা হল যদি কেউ input এর উপর click করে, তবে red রঙ দেখাবে।আর ওই field ছাড়া অন্য কোথাও click করলে white(#ffffff) show করবে।
hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
####################################################
hide() and show() method using speed 1000ms
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button#hide").click(function(){
$("p").hide(1000);
});
$("button#show").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Output:
Hide Show
This is a paragraph with little content.
This is another small paragraph.
এখানে Hide button e click korle 1000ms somoy niye ei text ta hide hoye jabe..
আবার Show button এ ক্লিক করলে ১০০০মিলিসেকেন্ডের মধ্যে text টা show করবে।
এটা না করে আমরা toggle() method টা ব্যবহার করতে পারি।
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the toggle() method completes.
ekhane speed ta use hosse koto millisecond dhore kaj ta hobe sheta bujhanor jonno.
ar callback method ta call hosse, j toggle ta 1000 ms dhore hobar pore kon method call hobe ba ki kaj korbe.?
1.$("button").click(function(){
$("p").hide(1000);
});
jQuery has the following fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
********************************************************
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
********************************************************
1.$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
2.$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
3.$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() Method
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The optional callback parameter is the name of a function to be executed after the function completes.
The following example demonstrates the fadeTo() method with different parameters:
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
***************************************************************
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
এখানে animate() এর ভিতরে {} ব্যবহার করা হয়।
{} এর মাঝে
left:’250px’
এই ফরম্যাট এ লেখা হয়।
ending কোন (;) sign ব্যবহার করা হয় না।
**********************************************************
No comments:
Post a Comment