জেকুয়েরী

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<button>ক্লিক করুন</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").css("background", "pink");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<button>ক্লিক করুন</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
$(document).ready(function(){
  $("button").dblclick(function(){
    $("div").css("background", "pink");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<button>ক্লিক করুন</button>

<script>
$(document).ready(function(){
  $("button").mousedown(function(){
    $(this).text("চাপুন");
  });

  $("button").mouseup(function(){
    $(this).text("ছাড়ুন");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<button>ক্লিক করুন</button>

<script>
$(document).ready(function(){
  $("button").mousedown(function(){
    $(this).text("চাপুন");
  });

  $("button").mouseup(function(){
    $(this).text("ছাড়ুন");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="ইনপুট ক্লিক করুন এবং তারপর বাইরে ক্লিক করুন">

<script>
$(document).ready(function(){
  $("input").blur(function(){
    $(this).css("background", "pink");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<select>

  <option>বাংলাদেশ</option>
  <option>নেদারল্যান্ড</option>
  <option>আফগানিস্তান</option>
  <option>বাংলাদেশ</option>

</select>

<p></p>

<script>
$(document).ready(function(){
  $("select").change(function(){
    $("p").text("পরিবর্তন করা মানটি হচ্ছে : " + $(this).val());
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<div style="padding:30px;">

এখানে রাইট ক্লিক করুন

</div>

<script>
$(document).ready(function(){
  $("div").contextmenu(function(event){
    event.preventDefault();
    alert("কনটেক্সট মেনু নিষ্ক্রিয় করা হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="এখানে ক্লিক করুন">

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background", "lightgreen");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="কিছু লিখুন">

<p></p>

<script>
$(document).ready(function(){
  $("input").on("input", function(){
    $("p").text($(this).val());
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<form>

  <input value="আরিফ">

  <button type="reset">রিসেট</button>

</form>

<p></p>

<script>
$(document).ready(function(){
  $("form").on("reset", function(){
    $("p").text("ফর্ম রিসেট হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input value="এই লেখাটি নির্বাচন করুন">

<p></p>

<script>
$(document).ready(function(){
  $("input").select(function(){
    $("p").text("লেখা নির্বাচন করা হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<form>

  <input placeholder="নাম">

  <button type="submit">সাবমিট</button>

</form>

<p></p>

<script>
$(document).ready(function(){
  $("form").submit(function(event){
    event.preventDefault();
    $("p").text("ফর্ম জমা দেওয়া হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="একটি কি-ওয়ার্ড প্রেস করুন">

<p></p>

<script>
$(document).ready(function(){
  $("input").keydown(function(event){
    $("p").text("আপনি প্রেস করেছেন: " + event.key);
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="একটি কি-ওয়ার্ড প্রেস করুন">

<p></p>

<script>
$(document).ready(function(){
  $("input").keypress(function(event){
    $("p").text("আপনি প্রেস করেছেন: " + event.key);
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="একটি কী ছেড়ে দিন">

<p></p>

<script>
$(document).ready(function(){
  $("input").keyup(function(event){
    $("p").text("আপনি ছেড়েছেন: " + event.key);
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<div style="height:100px; background:lightgray;">

মাউস এখানে নিয়ে আসুন

</div>

<p></p>

<script>
$(document).ready(function(){
  $("div").mousemove(function(event){
    $("p").text(event.clientX + ", " + event.clientY);
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<div style="padding:30px; background:lightgray;">

মাউস বাইরে নিয়ে যান

</div>

<script>
$(document).ready(function(){
  $("div").mouseout(function(){
    $(this).css("background", "pink");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<div style="padding:30px; background:lightgray;">

মাউস ওপরে আনুন

</div>

<script>
$(document).ready(function(){
  $("div").mouseover(function(){
    $(this).css("background", "lightgreen");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<div style="height:100px; overflow:auto; background:lightgray;">

এখানে মাউসের চাকা স্ক্রল করুন

</div>

<p></p>

<script>
$(document).ready(function(){
  $("div").on("wheel", function(event){
    $("p").text(event.originalEvent.deltaY);
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">

এই লেখাটি টেনে নিন

</p>

<p></p>

<script>
$(document).ready(function(){
  $("p[draggable]").on("drag", function(){
    $("body > p:last").text("");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">

এই লেখাটি টেনে নিন

</p>

<p></p>

<script>
$(document).ready(function(){
  $("p[draggable]").on("dragend", function(){
    $("body > p:last").text("টেনে নেওয়া শেষ হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">আমাকে টেনে নিন</p>

<div style="padding:30px; background:lightgray;">

ছেড়ে দেওয়ার স্থান

</div>

<script>
$(document).ready(function(){
  $("div").on("dragenter", function(){
    $(this).css("background", "lightgreen");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">আমাকে টেনে নিন</p>

<div style="padding:30px; background:lightgray;">

এই স্থান থেকে বের হয়ে যান

</div>

<script>
$(document).ready(function(){
  $("div").on("dragleave", function(){
    $(this).css("background", "pink");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">আমাকে টেনে নিন</p>

<div style="padding:30px; background:lightgray;">

এই স্থানের ওপর টেনে আনুন

</div>

<script>
$(document).ready(function(){
  $("div").on("dragover", function(event){
    event.preventDefault();
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">

এই লেখাটি টেনে নিন

</p>

<p></p>

<script>
$(document).ready(function(){
  $("p[draggable]").on("dragstart", function(){
    $("body > p:last").text("টেনে নেওয়া শুরু হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p draggable="true">

আমাকে টেনে নিন

</p>

<div style="padding:30px; background:lightgray;">

এখানে ছেড়ে দিন

</div>

<script>
$(document).ready(function(){
  $("p[draggable]").on("dragstart", function(event){
    event.originalEvent.dataTransfer.setData(
      "text",
      $(this).text()
    );
  });

  $("div").on("dragover", function(event){
    event.preventDefault();
  });

  $("div").on("drop", function(event){
    event.preventDefault();

    $(this).text(
      event.originalEvent.dataTransfer.getData("text")
    );
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<div style="height:100px; overflow:auto;">

  <div style="height:300px;">

    <h1>প্রোগ্রামিং শিখুন</h1>

    <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

  </div>

</div>

<script>
$(document).ready(function(){
  $("div").first().scroll(function(){
    $(this).css("background", "pink");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<p>

এই লেখাটি কপি করুন

</p>

<p></p>

<script>
$(document).ready(function(){
  $("p").first().on("copy", function(){
    $("p").last().text("লেখা কপি হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input value="এই লেখাটি কাটুন">

<p></p>

<script>
$(document).ready(function(){
  $("input").on("cut", function(){
    $("p").text("লেখা কাটা হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<input placeholder="এখানে পেস্ট করুন">

<p></p>

<script>
$(document).ready(function(){
  $("input").on("paste", function(){
    $("p").text("লেখা পেস্ট হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<video
  controls
  width="300"
  src="/videos/rain.mp4">
</video>

<script>
$(document).ready(function(){
  $("video").on("pause", function(){
    alert("ভিডিওটি থামানো হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<video
  controls
  width="300"
  src="/videos/rain.mp4">
</video>

<script>
$(document).ready(function(){
  $("video").on("play", function(){
    alert("ভিডিও শুরু হয়েছে");
  });

});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>

<video
  controls
  width="300"
  src="/videos/rain.mp4">
</video>

<p></p>

<script>
$(document).ready(function(){
  $("video").on("volumechange", function(){
    $("p").text("Volume: " + this.volume);
  });

});
</script>
</body>
</html>