index.html ফাইল
01.<!doctype html>02. 03.<head>04. 05.<title>Webcoachbd Jquery tutorials!</title>06.<link rel="stylesheet" href="/style.css" type="text/css"/>07. 08.<script src="/jquery_latest.js" type="text/javascript"></script>09.<script src="/script.js" type="text/javascript"></script>10.</head>11.<body>12.<h2 class="myheader">JQUERY tutorials</h2>13.<p>Webcoachbd is nice tutorial site</p>14.</body>15.</html>1..changeColor{2.background:#ddd;3.color:#000;4.font-weight:bold;5.}1.$(document).ready(function(){2.$('.myheader').bind('click mouseenter mouseleave',function(){3.$(this).toggleClass('changeColor');4.});5.});JQUERY tutorials
Webcoachbd is nice tutorial siteব্যাখ্যা:myheader ক্লাস সম্বলিত হেডারে এখন মাউস হোভার,ক্লিক বা মাউস সরিয়ে নিয়ে আসলে changeColor নামে একটি টগল ক্লাস যুক্ত হবে।আপনি চাইলে আরও ইভেন্ট এভাবে স্পেস দিয়ে সবগুলির জন্য এই ফাংশনটি চালাতে পারেন।
*এই মেথডের বড় সুবিধা হচ্ছে কোড কম লিখতে হয়।যদি উপরের কোডটুকুই নিচের মত লিখতেন তাহলে এখানে তিনটি ইভেন্টের জন্য তিনবার একই কোড লিখতে হত।
1.$(document).ready(function(){2.$('.myheader').click(function(){3.$(this).toggleClass('changeColor');4.});5.});unbind() মেথড:
bind মেথড দিয়ে যে হ্যান্ডলার টি যুক্ত হয়, unbind মেথড দিয়ে সেটা সরানো যায়।যেমন
index.html
01.<!doctype html>02. 03.<head>04. 05.<title>Webcoachbd Jquery tutorials!</title>06.<link rel="stylesheet" href="/style.css" type="text/css"/>07. 08. 09.<script src="/jquery_latest.js" type="text/javascript" ></script>10.<script src="/script.js" type="text/javascript"></script>11.</head>12.<body>13.<h2>JQUERY tutorials</h2>14.<p class="myPara">Webcoachbd provide massive tutorials on Web Development</p>15.<button id="buttonA">Binder</button>16.<button id="buttonB">UnBinder</button>17.</body>18.</html>1..changeColor{2.background:#ddd;3.color:#000;4.font-weight:bold;5.}01.$(document).ready(function(){02.function handlerFn(){03.$('.myPara').toggleClass('changeColor');04.}05.$('#buttonA').click(function(){06.$('.myPara').bind('click mouseenter mouseleave',handlerFn);07.});08.$('#buttonB').click(function(){09.$('.myPara').unbind('click mouseenter mouseleave',handlerFn);10.});11.});
0 comments:
Post a Comment