স্যাট একাডেমী
শিক্ষা নিয়ে বাণিজ্য নয়, আসুন শিক্ষা বাণিজ্যকে "না" বলি।
Facebook Twitter Google LinkedIn
☰ জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
টিউটোরিয়াল
 

জেকুয়েরি addClass()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p:last").addClass("test1 test2");
    });
});
</script>
<style>
.test1 {
    color: blue;
}
.test2 {
    font-size: 30px;
}
</style>
</head>
<body>
<h3>এটি একটি হেডার</h3>

<p>এটি একটি অনুচ্ছেদ</p>
<p>এটি অন্য একটি অনুচ্ছেদ।</p>

<button>প্রথম p এলিমেন্টে দুইটি ক্লাস যুক্ত করুন।</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").addClass(function(a){
            return "test_" + a;
        });
    });
});
</script>
<style>
.test_0 {
     color: blue;
}
.test_2 {
    font-size: 30px;
}
</style>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>p এলিমেন্টে ক্লাস যুক্ত করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p:last").removeClass("test").addClass("main");
    });
});
</script>
<style>
.test {
    color: green;
}
.main {
    font-size: 30px;
}
</style>
</head>
<body>

<h3>এটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="test">এটিও প্যারাগ্রাফ।</p>

<button>প্রথম p এলিমেন্টের ক্লাস নাম পরিবর্তন করার জন্য এখানে ক্লিক করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি after()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
function afterText() {
    var txt1 = "<b>আমার </b>";    // এইচটিএমএলের সাহায্যে এলিমেন্ট তৈরি
    var txt2 = $("<i></i>").text("জেকুয়েরি! ");    // জেকুয়েরির সাহায্যে তৈরি
    var txt3 = document.createElement("b");   // DOM এর সাহায্যে তৈরি
    txt3.innerHTML = "শিখতে অনেক ভালো লাগে!";
    $("img").after(txt1, txt2, txt3);  // img এলিমেন্টের পর নতুন এলিমেন্ট তৈরি
}
</script>
</head>
<body>

<img src="../images/satt.png" alt="logo" width="140" height="140">

<p>ইমেজের পর টেক্সট অন্তর্ভূক্ত করার জন্য ক্লিক করুন</p>

<button onclick="afterText()">শেষে অন্তর্ভূক্ত করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").after(function(n){
            return "<div>উপরের p এলিমেন্টের ইনডেক্স " + n + "</div>";
        });
    });
});
</script>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>প্রতিটি p এলিমেন্টের পরে কন্টেন্ট ইনসার্ট করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি append()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
function appendText() {
    var txt1 = "<p>টেক্সট</p>";              
    var txt2 = $("<p></p>").text("টেক্সট");  
    var txt3 = document.createElement("p");
    txt3.innerHTML = "টেক্সট";              
    $("body").append(txt1, txt2, txt3); 
}
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<button onclick="appendText()">Append টেক্সট</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").append(function(n){
            return "<b>এই p এলিমেন্টের ইন্ডেক্স " + n + "</b>";
        });
    });
});
</script>
</head>
<body>

<h1>এটি একটি হেডিং</h1>

<p>এটি একটি প্যারাগ্রাফ </p>
<p>এটি অন্য একটি প্যারাগ্রাফ</p>

<button>প্রতিটি p এলিমেন্ট শেষে কন্টেন্ট অন্তর্ভুক্ত করুন </button>

</body>
</html>

ফলাফল

জেকুয়েরি appendTo()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").appendTo("p");
    });
});
</script>
</head>
<body>

<h1>এটি একটি হেডিং</h1>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>

<button>প্রত্যেক p এলিমেন্টের পরে h1 এলিমেন্ট ইনসার্ট করি</button>

</body>
</html>

ফলাফল

জেকুয়েরি attr()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Image width: " + $("img").attr("width"));
    });
});
</script>
</head>
<body>

<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>

<button> ইমেজের width রিটার্ন করে</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr("width",function(n, v){
            return v - 50;
        });
    });
});
</script>
</head>
<body>

<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>

<button> ইমেজের width 50px কমিয়ে দেয়</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr({width: "150", height: "100"});
    });
});
</script>
</head>
<body>

<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>

<button>ইমেজের width এবং height এট্রিবিউট সেট করুন।</button>

</body>
</html>

ফলাফল

জেকুয়েরি before()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
function beforeText() {
    var txt1 = "<b>আমি </b>";                    // এইচটিএমএলের মাধ্যমে এলিমেন্ট তৈরি
    var txt2 = $("<i></i>").text("জেকুয়েরি ");     // জেকুয়েরির মাধ্যমে তৈরি
    var txt3 = document.createElement("b");    // DOM এর মাধ্যমে তৈরি
    txt3.innerHTML = "পছন্দ করি!";
    $("img").before(txt1, txt2, txt3);    // ইমেজের পূর্বে নতুন এলিমেন্ট অন্তর্ভূক্ত করা
}
</script>
</head>
<body>

<img src="../../images/satt.png" alt="jQuery" width="100" height="140">

<p>ইমেজের পূর্বে টেক্সট অন্তর্ভূক্ত করার জন্য নিচের বাটনে ক্লিক করুন।</p>

<button onclick="beforeText()">টেক্সট অন্তর্ভূক্ত করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").before(function(n){
            return "<div>উপরের p এলিমেন্টের ইনডেক্স " + n + "</div>";
        });
    });
});
</script>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>প্রতিটি p এলিমেন্টের পূর্বে কন্টেন্ট  ইনসার্ট করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি clone()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("body").append($("p:first").clone(true));
    });
    $("p").click(function(){
        $(this).animate({fontSize: "+=1px"});
    });
});
</script>
</head>
<body>

<p>টেক্সটের আকার বড় করার জন্য প্যারাগ্রাফটিতে ক্লিক করুন।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>

<button>প্রথম p এলিমেন্টটিকে কপি  করে (ইভেন্ট হ্যান্ডলারসহ), body এলিমেন্টে সাথে সংযুক্ত করি</button>

</body>
</html>

ফলাফল

জেকুয়েরি css()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("p").css("color"));
    });
});
</script>
</head>
<body>

<button>p এলিমেন্টের সিএসএস color ভ্যালু রিটার্ন</button>

<p style="color:green">এটি একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css("border-width", function(i){
        return i + 25;
        });
    });
});
</script>
</head>
<body>

<button>p এলিমেন্টের border-width প্রোপার্টি পরিবর্তন করুন</button>

<p style="border: 1px solid black;">এটি একটি প্যারগ্রাফ।</p>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({
            "color": "red",
            "background-color": "#ffadad",
            "font-family": "Arial",
            "font-size": "25px",
            "padding": "4px"
        });
    });
});
</script>
</head>
<body>

<button>সকল p এলিমেন্টের জন্য একাধিক সিএসএস প্রোপার্টি সেট করুন</button>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

জেকুয়েরি detach()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    var x;
    $("#test1").click(function(){
        x = $("p").detach();
    });
    $("#test2").click(function(){
        $("body").prepend(x);
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button id="test1">p এলিমেন্ট রিমুভ করুন</button>
<button id="test2">p এলিমেন্ট রিস্টোর করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("#test1").click(function(){
        $("body").append($("#p1").detach());
    });
    $("#test2").click(function(){
        $("body").append($("#p2").remove());
    });
    $("p").click(function(){
        $(this).animate({fontSize: "+=1px"})
    });
});
</script>
</head>
<body>

<p id="p1">মুভ হওয়ার পরে প্যারাগ্রাফটি ক্লিক করুন - ক্লিক ইভেন্ট এখনো কাজ করবে।</p>

<p id="p2">মুভ হওয়ার পরে প্যারাগ্রাফটি ক্লিক করুন - ক্লিক ইভেন্ট এখনো কাজ করবে না।</p>

<button id="test1">p এলিমেন্ট যুক্ত করে এবং বিছিন্ন করে</button>
<button id="test2">p এলিমেন্ট যুক্ত করে এবং রিমুভ করে</button>

</body>
</html>

ফলাফল

জেকুয়েরি height()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("#test1").click(function(){
        $("div").height(500);
    });
    $("#test2").click(function(){
        $("div").height("10em");
    });
    $("#test3").click(function(){
        $("div").height("200pt");
    });
});
</script>
</head>
<body>

<button id="test1"> ডিভ(div)-এর উচ্চতা 500px সেট </button>
<button id="test2"> ডিভ(div)-এর উচ্চতা 10em সেট</button>
<button id="test3">ডিভ(div)-এর উচ্চতা 200pt সেট </button>

<p><b>নোটঃ</b>  em, pt ইত্যাদির জন্য ব্যবহার করুন</p>

<div style="height:100px;border:1px solid blue;background-color:lightblue;"></div><br>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").height(function(n,c){
        return c+200;
        });
    });
});
</script>
</head>
<body>

<button> div উচ্চতা 200 px এ বৃদ্ধি করুন</button><br><br>

<div style="height:100px;border:4px solid;"></div>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("#span1").text($(window).height());
        $("#span2").text($(document).height());
    });
});
</script>
</head>
<body>

<p>এই উইন্ডোটির উচ্চতা হলো <span id="span1">...</span> px।</p>
<p>এই ডকুমেন্টটির উচ্চতা হলো <span id="span2">...</span> px।</p>

<button>উইন্ডো এবং ডকুমেন্ট এলিমেন্টের উচ্চতা রিটার্ন করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  $("button").click(function(){
      var txt = "";
      txt += "Width of div: " + $("#div1").width() + "</br>";
      txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
      txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";
      txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>" + "</br>";
  
      txt += "Height of div: " + $("#div1").height() + "</br>";
      txt += "Inner height of div: " + $("#div1").innerHeight() + "</br>";
      txt += "Outer height of div: " + $("#div1").outerHeight() + "</br>";
      txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true) + "</br>";
      $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:180px;width:300px;padding:10px;margin:4px;border:2px solid blue;background-color:lightblue;"></div>
<br>

<button>div এর dimensions প্রদর্শণ</button>

<p>width() - এলিমেন্টের width রিটার্ন করে।</p>
<p>innerWidth() - এলিমেন্টের width রিটার্ন করে (পেডিং সহ)।</p>
<p>outerWidth() - এলিমেন্টের width রিটার্ন করে (পেডিং এবং বর্ডার সহ)।</p>
<p>outerWidth(true) - এলিমেন্টের width রিটার্ন করে  (পেডিং, বর্ডার এবং মার্জিন সহ)।</p>
<hr>

<p>height() - এলিমেন্টের height রিটার্ন করে।</p>
<p>innerHeight() - এলিমেন্টের height রিটার্ন করে (পেডিং সহ)।</p>
<p>outerHeight() - এলিমেন্টের height রিটার্ন করে (পেডিং এবং বর্ডার সহ)।</p>
<p>outerHeight(true) - এলিমেন্টের height রিটার্ন করে (পেডিং, বর্ডার এবং মার্জিন সহ)।</p>

</body>
</html>

ফলাফল

জেকুয়েরি html()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("p").html());
    });
});
</script>
</head>
<body>

<button>p এলিমেন্টের কন্টেন্ট রিটার্ন করুন </button>

<p>এটি একটি <b>প্যারাগ্রাফ</b>।</p>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").html(function(n){
            return "এই p এলিমেন্টের ইন্ডেক্স- " + n;
        });
    });
});
</script>
</head>
<body>

<button>p এলিমেন্টের কন্টেন্ট পরিবর্তন করুন</button>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

জেকুয়েরি insertAfter()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("h3").insertAfter("p");
    });
});
</script>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>প্রতিটি p এলিমেন্টের পরে h1 এলিমেন্ট মুভ এবং  ইনসার্ট করুন।</button>

</body>
</html>

ফলাফল

জেকুয়েরি insertAfter()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").insertBefore("p");
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<div>হ্যালো বাংলাদেশ!</div>

<button>div এলিমেন্টকে প্রত্যেক p এলিমেন্টের পূর্বে নেওয়ার জন্য এখানে ক্লিক করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি offset()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        newPos = new Object();
        newPos.left = "0";
        newPos.top = "100";
        $("p").offset(newPos);
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button>একটি অব্জেক্ট ব্যবহার করে p এলিমেন্টের অফসেট  কো-অর্ডিনেট সেট করুন।</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").offset({top: 200, left: 200});
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ</p>

<button>p এলিমেন্টের অফসেট কো-অর্ডিনেট সেট করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").offset(function(n, c){
            newPos = new Object();
            newPos.left = c.left + 100;
            newPos.top = c.top + 100;
            return newPos;
        });
    });
});
</script>
</head>
<body>

<p style="background-color: green; color: white;">এটি একটি প্যারাগ্রাফ।</p>

<button>p এলিমেন্টের অফসেট স্থানাঙ্ক রিটার্ন করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        newPos = new Object();
        newPos.left = "0";
        newPos.top = "100";
        $("p").offset(newPos);
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button>একটি অব্জেক্ট ব্যবহার করে p এলিমেন্টের অফসেট  কো-অর্ডিনেট সেট করুন।</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").offset($("span").offset());
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button>p এলিমেন্টের অফসেট স্থানাঙ্ক span এলিমেন্টের সমান করার জন্য এখানে ক্লিক করুন</button>

<span style="position:absolute;left:100px;top:150px;">এটি span এলিমেন্ট।</span>

</body>
</html>

ফলাফল

জেকুয়েরি outerHeight()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        var txt = "";
        txt += "outerHeight() of div: " + $("div").outerHeight() + "</br>";
        txt += "outerHeight(true) of div: " + $("div").outerHeight(true) + "</br>";
        $("div").html(txt);
    });
});
</script>
</head>
<body>

<div style="height:120px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>

<button>div এলিমেন্টের বাহ্যিক উচ্চতা প্রদর্শন করুন</button>

<p>outerHeight() - একটি এলিমেন্টের বাহ্যিক উচ্চতা রিটার্ন করে (যার মধ্যে প্যাডিং এবং বর্ডার যুক্ত থাকে)।</p>
<p>outerHeight(true) - একটি এলিমেন্টের বাহ্যিক উচ্চতা রিটার্ন করে (যার মধ্যে প্যাডিং, বর্ডার এবং মার্জিন যুক্ত থাকে।</p>

</body>
</html>

ফলাফল

জেকুয়েরি outerWidth()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
    var txt = "";
    txt += "outerWidth() of div: " + $("div").outerWidth() + "</br>";
    txt += "outerWidth(true) of div: " + $("div").outerWidth(true) + "</br>";
        $("div").html(txt);
    });
});
</script>
</head>
<body>

<div style="height:120px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>

<button>div এর আউটার width প্রদর্শণ</button>

<p>outerWidth() - এলিমেন্টের outer width রিটার্ন করে (পেডিং এবং বর্ডার সহ)।</p>
<p>outerWidth(true) - এলিমেন্টের outer width রিটার্ন করে (পেডিং বর্ডার এবং মার্জিন সহ)।</p>

</body>
</html>

ফলাফল

জেকুয়েরি position()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        x = $("p").position();
        $("#span1").text(x.top);
        $("#span2").text(x.left);
    });
});
</script>
</head>
<body>

<div style="border:1px solid black;padding:80px;margin:30px;">
  <p>এই প্যারাগ্রাফের অবস্থান (parent এলিমেন্টের সাথে সম্পর্কযুক্ত)  <span id="span1">x</span> উপরে এবং <span id="span2">x</span> বামে।</p>
  <button>অবস্থান দেখুন</button>
</div>

</body>
</html>

ফলাফল

জেকুয়েরি prepend()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
function prependText() {
    var txt1 = "<p>টেক্সট</p>";              // এইচটিএমএল দ্বারা টেক্সট তৈরি
    var txt2 = $("<p></p>").text("টেক্সট");  // জেকুয়েরি দ্বারা টেক্সট তৈরি
    var txt3 = document.createElement("p");
    txt3.innerHTML = "টেক্সট";               // ডোম দ্বারা টেক্সট তৈরি
    $("p").prepend(txt1, txt2, txt3);
}
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button onclick="prependText()">প্রিপেন্ড টেক্সট</button>
</div>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").prepend(function(n){
            return "<b>এই p এলিমেন্টের ইন্ডেক্স " + n + "</b>. ";
        });
    });
});
</script>
</style>
</head>
<body>

<h3>এটি একটি হেডার</h3>

<p>এট একটি অনুচ্ছেদ</p>
<p>এটি অন্য একটি অনুচ্ছেদ।</p>

<button>প্রত্যেক p এলিমেন্টের শুরুতে কন্টেন্ট ইন্সার্ট করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি prependTo()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").prependTo("p");
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটিও অন্য একটি প্যারাগ্রাফ।</p>
<div>হ্যালো বাংলাদেশ!</div>

<button>div এলিমেন্টটিকে মুভ এবং প্রত্যেক p এলিমেন্টের শুরুতে অন্তর্ভূক্ত করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি prop()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").html("attr('checked'): " + $("input").attr('checked')
        + "<br>prop('checked'): " + $("input").prop('checked'));
    });
});
</script>
</head>
<body>

<p><b>নোট:</b> চেকবক্সকে চেক এবং আন-চেক করুন এবং তারপর কন্টেন্টকে রিফ্রেশ করার জন্য বাটনে ক্লিক করুন</p>
<button>attr() এবং prop() এর চেক ভ্যালু</button>
<br><br>

<input id="check1" type="checkbox" checked="checked">
<label for="check1">চেক করুন</label>
<p id="p1"></p>

</body>
</html>

ফলাফল

জেকুয়েরি remove()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").remove(".test");
    });
});
</script>
<style>
.test {
    color: green;
    font-size: 25px;
}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="test">এটি অন্য একটি প্যারাগ্রাফ।</p>
<p class="test">এটি অন্য একটি প্যারাগ্রাফ।</p>

<button> class="test" দিয়ে সকল p এলিমেন্টকে সরান</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").remove(".test1, .test2");
    });
});
</script>
<style>
.test1 {
    color: green;
    font-size: 20px;
}

.test2 {
    color: purple;
    font-size: 30px;
}
</style>
</head>
<body>

<p>এটি সাধারণ একটি প্যারাগ্রাফ।</p>
<p class="test1">class="test1" যুক্ত p এলিমেন্ট।</p>
<p class="test1">class="test1" যুক্ত p এলিমেন্ট।</p>
<p class="test2">class="test2" যুক্ত p এলিমেন্ট।</p>

<button>class="test1" এবং class="test2" যুক্ত সকল p এলিমেন্টকে রিমুভ করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি removeAttr()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").removeAttr("id class");
    });
});
</script>
<style>
#p1 {
    color: white;
    background-color: green;
    font-size: 20px;
    padding: 5px;
}

.purple {
    color: white;
    background-color: purple;
    font-size: 20px;
    padding: 5px;
}
</style>
</head>
<body>

<h1>এটি হেডিং</h1>

<p id="p1">এটি একটি প্যারাগ্রাফ।</p>
<p class="purple">এটি অন্য একটি প্যারাগ্রাফ।</p>

<button>সকল p এলিমেন্ট থেকে class এবং id এট্রিবিউট রিমুভ করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি removeClass()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p:first").removeClass("test").addClass("main");
    });
});
</script>
<style>
.test {
    color: purple;
}
.main {
    background-color: green;
    color: white;
}
</style>
</head>
<body>

<h3>এটি হেডিং</h3>

<p class="test">এটি একটি প্যারাগ্রাফ।</p>
<p>এটিও প্যারাগ্রাফ।</p>

<button>প্রথম p এলিমেন্টের ক্লাসনাম পরিবর্তন করার জন্য এখানে ক্লিক করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("li").removeClass(function(n) {
        if (n==0||n==1) {return "listitem"}
        else {return ""}
        });
    });
});
</script>
<style>
.listitem {
    color:green;
}
</style>
</head>
<body>

<h3>এটি হেডিং</h3>

<ul>
<li class="listitem">Tiger</li>
<li class="listitem">Lion</li>
<li class="listitem">Elephant</li>
</ul>

<button>ইন্ডেক্স ০ ও ১ সহ li এলিমেন্ট "listitem" হতে রিমুভ করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p, h1").removeClass("head test main");
    });
});
</script>
<style>
.head {
    font-size: 2em;
    color: green;
}

.test {
    font-size: 120%;
    color: purple;
}

.main {
    font-size: 20px;
    color: red;
}
</style>
</head>
<body>

<h1 class="head">এটি একটি হেডিং</h1>

<p class="test">ঙ্গেটি একটি প্যারাগ্রাফ।</p>
<p class="main">এটি আরেকটি প্যারাগ্রাফ।</p>

<button>নির্বাচিত এলিমেন্ট থেকে "head", "test" and "main" ক্লাসগুলো রিমুভ করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি replaceAll()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("<span><b>হ্যালো বাংলাদেশ!</b></span>").replaceAll("p:last-child");
    });
});
</script>
</head>
<body>

<button>যে সকল p প্যারেন্ট এলিমেন্টের শেষ চাইল্ড, সেগুলোকে একটি বোল্ড span এলিমেন্টে দ্বারা রিপ্লেস করুন</button><br><br>

<div style="border:1px solid">
  <p>div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
  <p>div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div><br>

<div style="border:1px solid">
  <p>অন্য একটি div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
  <p>অন্য একটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

জেকুয়েরি replaceWith()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").replaceWith(function(n){
            return "<h3>এই এলিমেন্টটির ইনডেক্স হলো " + n + "।</h3>";
        });
    });
});
</script>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটিও একটি প্যারাগ্রাফ।</p>
<p>এটিও একটি প্যারাগ্রাফ।</p>

<button>প্রতিটি p এলিমেন্টকে রিপ্লেস করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি scrollLeft()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").scrollLeft(100);
    });
});
</script>
</head>
<body>

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
ইংরেজি ডিকশনারিতে সবচেয়ে দীর্ঘতম শব্দ হলো: pneumonoultramicroscopicsilicovolcanoconiosis.
</div><br>

<button>আনুভূমিক স্ক্রলবারটি ১০০ পিক্সেলে সেট করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি scrollTop()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").scrollTop(100);
    });
});
</script>
</head>
<body>

<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি। </div><br>

<button>100px উল্লম্ব স্ক্রলভার(scrollbar) অবস্থান সেট করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 45) {
      $("p").addClass("test");
    } else {
      $("p").removeClass("test");
    }
  });
});
</script>
<style>
.test {
    background-color: yellow;
}
</style>
</head>
<body style="height:1550px;">

<p>পেজটিকে নিচের দিকে স্ক্রল করুন।</p>

<p style="position:fixed;">যখন আপনি উপর থেকে নিচের দিকে 45px স্ক্রল করবেন, তখন প্যারাগ্রাফে "test" ক্লাস যুক্ত হবে (হলুদ ব্যাকগ্রাউন্ড কালার)। ক্লাস রিমুভ করার জন্য পূনরায় উপরের দিকে স্ক্রল করুন।</p>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  // সকল লিংকে স্মুথ স্ক্রলিং যুক্ত
  $("a").on('click', function(event) {

    // ডিফল্ট আচর ওভাররাইট করার আগে নিশ্চিত হোন যে this.hash এ ভ্যালু আছে
    if (this.hash !== "") {
      // ডিফল্ট এংকর ক্লিক আচরন প্রতোরোধ
      event.preventDefault();

      // হ্যাশ স্টোর
      var hash = this.hash;

      // স্মুথ পেজ স্ক্রলের জন্য জেকুয়েরির animate() মেথডের ব্যবহার
      // অতিরিক্ত সংখ্যে (800) দ্বারা স্মুথ স্ক্রলিংয়ের সময়কে নির্ধারণ করা হয়
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // যখন স্ক্রলিং শেষ হয় তখন আবার URL এ  hash (#) যুক্ত করে (ডিফল্ট ক্লিক আচরন)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
 <style>
body, html, .main {
    height: 100%;
}

section {
    min-height: 100%;
}
</style>
</head>
<body>

<a href="#section2">নিচের ২ নাম্বার সেকশনে স্মুথভাবে স্ক্রলিং করার জন্য এখানে ক্লিক করুন</a>

<div class="main">
  <section></section>
</div>

<div class="main" id="section2">
  <section style="background-color:blue"></section>
</div>

</body>
</html>

ফলাফল

জেকুয়েরি text()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("p").text());
    });
});
</script>
</head>
<body>

<button>সকল p এলিমেন্টের টেক্সট কন্টেন্ট রিটার্ন</button>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি <b>অন্য</b> একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").text(function(n){
            return "এই p এলিমেন্টের ইন্ডেক্স হলোঃ " + n;
        });
    });
});
</script>
</head>
<body>

<button>p এলিমেন্টের কন্টেন্ট সেট করুন</button>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

জেকুয়েরি toggleClass()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggleClass("main");
    });
});
</script>
<style>
.main {
    font-size: 120%;
    color: green;
}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ</p>
<p class="main">এটি আরেকটি প্যারাগ্রাফ</p>

<button>p এলিমেন্টের জন্য "main"  টোগল ক্লাস ব্যবহার করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("li").toggleClass(function(n){
            return "listitem_" + n;
        });
    });
});
</script>
<style>
.listitem_1, .listitem_3 {
    color: green;
}

.listitem_0, .listitem_2 {
    color: pink;
}
</style>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<ul>
  <li>ইমরান</li>
  <li>জিহাদ</li>
  <li>শরীফ</li>
  <li>পরাণ</li>
</ul>

<button>লিস্ট আইটেমে ক্লাস যুক্ত বা রিমুভ করুন।</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("#add").click(function(){
        $("p").toggleClass("main",true);
    });
    $("#remove").click(function(){
        $("p").toggleClass("main",false);
    });
});
</script>
<style>
.main {
    font-size: 120%;
    color: green;
}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="main">এটি অন্য একটি প্যারাগ্রাফ।</p>

<button id="add"> "main" ক্লাস সংযোজন</button>
<button id="remove"> "main" ক্লাস বিয়োজন</button>

</body>
</html>

ফলাফল

জেকুয়েরি unwrap()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("#test1").click(function(){
        $("p").wrap("<div></div>");
    });
    $("#test2").click(function(){
        $("p").unwrap();
    });
});
</script>
<style>
div{background-color: green;}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>

<button id="test1">প্রতিটি p এলিমেন্টকে একটি div এলিমেন্টে মোড়ানো হয়</button>
<button id="test2">Unwrap</button>

</body>
</html>

ফলাফল

জেকুয়েরি val()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("input:text").val());
    });
});
</script>
</head>
<body>

নাম: <input type="text" value="জিহাদুল ইসলাম"><br>
বয়স: <input type="number" value="22"><br><br>

<button>প্রথম ইনপুট ফিল্ডের ভ্যালু রিটার্ন করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("input:text").val(function(n, c){
            return c + " ইসলাম";
        });
    });
});
</script>
</head>
<body>

<p>নাম: <input type="text" value="জিহাদুল"></p>

<button>ইনপুট ফিল্ডের ভ্যালু সেট করুন</button>

</body>
</html>

ফলাফল

জেকুয়েরি width()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("#test1").click(function(){
        $("div").width(500);
    });
    $("#test2").click(function(){
        $("div").width("10em");
    });
    $("#test3").click(function(){
        $("div").width("300pt");
    });
});
</script>
</head>
<body>

<button id="test1">div এলিমেন্টের প্রস্থ 500px সেট করুন</button>
<button id="test2">div এলিমেন্টের প্রস্থ 10em সেট করুন</button>
<button id="test3">div এলিমেন্টের প্রস্থ 300pt সেট করুন</button>

<p><b>নোট:</b> em, pt, ইত্যাদির ক্ষেত্র "" ব্যবহার করুন।</p>

<div style="height:80px;width:250px;border:1px solid blue;background-color:green;"></div><br>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").width(function(n, c){
        return c - 200;
        });
    });
});
</script>
</head>
<body>

<button>div এলিমেন্টের প্রস্থ 200px হ্রাস করুন</button><br><br>

<div style="height:100px;border:4px solid;"></div>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
       $("#span1").text($(window).width());
        $("#span2").text($(document).width());
    });
});
</script>
</head>
<body>

<p>এই উইন্ডোর প্রস্থ হলো <span id="span1">...</span> px।</p>
<p>এই ডকুমেন্টটির প্রস্থ হলো <span id="span2">...</span> px।</p>

<button>উইন্ডো এবং ডকুমেন্টের প্রস্থ রিটার্ন করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  $(window).resize(function() {
    if ($(this).width() < 728) {
      $("body").css("background-color", "green");
    } else {
      $("body").css("background-color", "red");
    }
  });
});
</script>
</head>
<body>

<p>background-color বদলানোর জন্য উইন্ডোটি রিসাইজ করুন (স্ক্রিনের width ছোট এবং বড় করুন)।</p>

</body>
</html>

ফলাফল

জেকুয়েরি wrap()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrap(document.createElement("div"));
    });
});
</script>
<style>
div {background-color: green;}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>

<button>নতুন একটি div এলিমেন্ট তৈরি করুন এবং প্রতিটি p এলিমেন্টের চারপাশে wrap করুন</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrap(function(){
              return "<div></div>"
        });
    });
});
</script>
<style>
div {
    background-color: green;
    padding: 10px;
}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>

<button>p এলিমেন্টের কাছাকাছি div এলিমেন্ট Wrap করুন।</button>

</body>
</html>

ফলাফল

জেকুয়েরি wrapAll()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapAll(document.createElement("div"));
    });
});
</script>
<style>
div{background-color: green;}
</style>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>সকল p এলিমেন্ট wrap করার জন্য একটি নতুন div খুলুন।</button>

</body>
</html>

ফলাফল

জেকুয়েরি wrap()মেথড

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner(document.createElement("b"));
    });
});
</script>
</head>
<body>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>একটি নতুন b এলিমেন্ট তৈরি করে  প্রতিটি p এলিমেন্টের কন্টেন্টের কাছে wrap করুন।</button>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner(function(){
            return "<b></b>"
        });
    });
});
</script>
</head>
<body>

<p>এটি একটি অনুচ্ছেদ</p>
<p>এটি অন্য একটি অনুচ্ছেদ</p>

<button>প্রত্যেক p এলিমেন্টের ভিতরে a b এলিমেন্টকে ঘিরে রাখে।</button>

</body>
</html>

ফলাফল

আমাদের টিউটোরিয়াল সমূহ


ক্লায়েন্ট সাইড টিউটোরিয়াল
HTML টিউটোরিয়াল
CSS টিউটোরিয়াল
BootStrap টিউটোরিয়াল
JavaScript টিউটোরিয়াল
jQuery টিউটোরিয়াল
AngualarJs টিউটোরিয়াল
সার্ভার সাইড টিউটোরিয়ায়াল
পিএইচপি টিউটোরিয়াল
এসকিউএল টিউটোরিয়াল ওয়ার্ডপ্রেস টিউটোরিয়াল
প্রোগ্রামিং টিউটোরিয়ায়াল
সি টিউটোরিয়াল
পাইথন টিউটোরিয়াল
অন্যান্য
চাকুরীর প্রশ্ন-উত্তর
ফোরাম
ব্লগ
© স্যাট একাডেমী