jQuery Built-in Function: Syntax, ব্যবহার, উদাহরণ ও Best Practices

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices নিয়ে ভাবছেন? আপনি কি jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices সম্পর্কে জানতে চান? jQuery একসময় ওয়েব ডেভেলপমেন্টের সবচেয়ে জনপ্রিয় JavaScript লাইব্রেরিগুলোর একটি ছিল এবং এখনও অনেক পুরোনো ও মাঝারি আকারের প্রজেক্টে এটি ব্যবহৃত হয়। এর প্রধান শক্তি হলো Built-in Function বা পূর্বনির্ধারিত ফাংশন,

যেগুলোর মাধ্যমে অল্প কোড লিখেই HTML Element নির্বাচন, Event পরিচালনা, Animation, AJAX এবং DOM Manipulation করা যায়। শুধু Vanilla JavaScript ব্যবহার করলে যে কাজ করতে অনেক লাইন কোড লাগতে পারে, jQuery এর Built-in Function ব্যবহার করে একই কাজ কয়েক লাইনে সম্পন্ন করা সম্ভব। আজকের আর্টিকেল এ jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices সম্পর্কে জানবো।

পোস্ট সূচিপত্র

jQuery Built-in Function কী?
Built-in Function কেন গুরুত্বপূর্ণ?
Built-in Function-এর প্রধান বিভাগ
Built-in Function ব্যবহারের সুবিধা
jQuery-এর Built-in Function
DOM Manipulation Functions
Best Practices
সাধারণ ভুল
Traversing Functions
AJAX Built-in Function
বাস্তব Mini Project
Interview Questions
HSC / ডিপ্লোমা / বিশ্ববিদ্যালয় পরীক্ষার গুরুত্বপূর্ণ প্রশ্ন
FAQ

jQuery Built-in Function কী?

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices হলো jQuery লাইব্রেরিতে আগে থেকেই তৈরি থাকা ফাংশন, যা নির্দিষ্ট কাজ সম্পন্ন করার জন্য ব্যবহৃত হয়। উদাহরণঃ

$("#title").hide();

এখানেঃ

• $("#title") → Element নির্বাচন করছে।
• .hide() → Built-in Function, যা Element লুকিয়ে দেয়।

Built-in Function কেন গুরুত্বপূর্ণ?

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices ব্যবহারের সুবিধাঃ

• কম কোডে বেশি কাজ
• সহজ Syntax
• Cross-browser Compatibility
• দ্রুত DOM Manipulation
• Event Handling সহজ
• Animation তৈরি সহজ
• AJAX ব্যবহারে সুবিধা

Built-in Function-এর প্রধান বিভাগ

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices গুলো সাধারণত নিচের বিভাগে ভাগ করা যায়ঃ

• Selector Functions
• Event Functions
• Effect Functions
• DOM Manipulation Functions
• CSS Functions
• Traversing Functions
• Attribute Functions
• AJAX Functions
• Utility Functions

১. Selector Function

Selector Function HTML Element নির্বাচন করতে ব্যবহৃত হয়।

ID Selector

$("#title");

id="title" Element নির্বাচন করবে।

Class Selector

$(".menu");

class="menu" এর সব Element নির্বাচন করবে।

Tag Selector

$("p");

সব Paragraph নির্বাচন করবে।

Universal Selector

$("*");

সব HTML Element নির্বাচন করবে।

Multiple Selector

$("h1,p,div");

একাধিক ধরনের Element একসঙ্গে নির্বাচন করবে।

আরো পড়ুনঃ জাভাস্ক্রিপ্টের গঠন (Structure of JavaScript): পূর্ণাঙ্গ গবেষণাভিত্তিক বাংলা গাইড

২. Event Function

Event Function ব্যবহারকারীর কার্যকলাপ শনাক্ত করে।

click()

$("#btn").click(function(){
    alert("Button Clicked");
});

dblclick()

$("#box").dblclick(function(){
    alert("Double Click");
});

mouseenter()

$("#menu").mouseenter(function(){
    console.log("Mouse Enter");
});

mouseleave()

$("#menu").mouseleave(function(){
    console.log("Mouse Leave");
});

hover()

$("#box").hover(function(){
    console.log("Hover");
});

৩. Keyboard Event

keydown()

$("input").keydown(function(){
    console.log("Key Pressed");
});

keyup()

$("input").keyup(function(){
    console.log("Released");
});

keypress()

$("input").keypress(function(){
    console.log("Typing");
});
দ্রষ্টব্যঃ আধুনিক ওয়েব ডেভেলপমেন্টে keypress() ধীরে ধীরে পরিত্যক্ত (deprecated) হয়েছে। নতুন কোডে সাধারণত keydown() বা keyup() ব্যবহার করার পরামর্শ দেওয়া হয়।

৪. Form Event

submit()

$("form").submit(function(){
    alert("Submitted");
});

change()

$("select").change(function(){
    console.log("Changed");
});

focus()

$("input").focus(function(){
    console.log("Focused");
});

blur()

$("input").blur(function(){
    console.log("Blur");
});
আরো পড়ুনঃ HTML5, মার্কআপ ল্যাঙ্গুয়েজ, HTML Tag ও Attribute: সম্পূর্ণ বাংলা গাইড

Built-in Function ব্যবহারের সুবিধা

• কোড ছোট হয়।
• পড়তে সহজ হয়।
• রক্ষণাবেক্ষণ সহজ হয়।
• ব্রাউজারভেদে কম সমস্যা হয়।
• দ্রুত ডেভেলপমেন্ট সম্ভব হয়।

বাস্তব উদাহরণ

<button id="hideBtn">
Hide
</button>
<p id="text">
Hello World
</p>

$("#hideBtn").click(function(){
    $("#text").hide();
});

বাটনে ক্লিক করলে Paragraph লুকিয়ে যাবে।

jQuery-এর Built-in Function

১. Effect Functions

jQuery এর সবচেয়ে জনপ্রিয় Built-in Function এর মধ্যে Effect Functions অন্যতম। এগুলোর মাধ্যমে কোনো HTML Element সহজেই লুকানো, দেখানো বা অ্যানিমেশন করা যায়। এজন্য jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices সম্পর্কে জানতে হবে।

hide()

hide() একটি Element লুকিয়ে দেয়।

$("#box").hide();

সময় নির্ধারণ করেঃ

$("#box").hide(1000);

এখানে ১০০০ মিলিসেকেন্ড (১ সেকেন্ড) ধরে Element ধীরে ধীরে অদৃশ্য হবে।

show()

লুকানো Element পুনরায় দেখাতে ব্যবহৃত হয়।

$("#box").show();

Animation সহঃ

$("#box").show(800);

toggle()

Element দৃশ্যমান থাকলে লুকাবে, লুকানো থাকলে দেখাবে।

$("#box").toggle();

Fade Functions

Fade Effect ধীরে ধীরে Element এর স্বচ্ছতা (Opacity) পরিবর্তন করে।

fadeIn()

$("#box").fadeIn();

fadeOut()

$("#box").fadeOut();

fadeToggle()

$("#box").fadeToggle();

fadeTo()

নির্দিষ্ট Opacity সেট করতে ব্যবহৃত হয়।

$("#box").fadeTo(1000,0.5);

Slide Functions

slideDown()

$("#panel").slideDown();

slideUp()

$("#panel").slideUp();

slideToggle()

$("#panel").slideToggle();

animate()

কাস্টম Animation তৈরির জন্য ব্যবহৃত হয়।

$("#box").animate({
    left:"250px",
    opacity:0.5,
    height:"200px"
});

stop()

চলমান Animation বন্ধ করে।

$("#box").stop();

DOM Manipulation Functions

DOM পরিবর্তনের জন্য jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices সম্পর্কে জানতে হবে। কারণঃ jQuery তে অনেক Built-in Function রয়েছে।

text()

শুধু Text পরিবর্তন করে।

$("#title").text("Welcome");

html()

HTML পরিবর্তন করে।

$("#title").html("<b>Welcome</b>");

val()

Input Field এর Value পড়তে বা পরিবর্তন করতে ব্যবহৃত হয়।

$("#name").val();

Value সেট করতে:

$("#name").val("Rahim");

append()

Element এর শেষে নতুন Content যোগ করে।

$("#list").append("<li>Apple</li>");

prepend()

Element এর শুরুতে Content যোগ করে।

$("#list").prepend("<li>Orange</li>");

after()

Element এর পরে নতুন Content যোগ করে।

$("#title").after("<p>New Paragraph</p>");

before()

Element এর আগে Content যোগ করে।

$("#title").before("<hr>");

remove()

Element সম্পূর্ণ মুছে ফেলে।

$("#box").remove();

empty()

Element রেখে ভিতরের Content মুছে দেয়।

$("#box").empty();

CSS Functions

css()

CSS Property পড়া বা পরিবর্তন করা যায়।

$("#box").css("color","red");

একাধিক Property:

$("#box").css({
color:"white",
background:"blue",
fontSize:"20px"
});

addClass()

$("#box").addClass("active");

removeClass()

$("#box").removeClass("active");

toggleClass()

$("#box").toggleClass("dark");

hasClass()

$("#box").hasClass("active");

Boolean Value প্রদান করে।

Attribute Functions

attr()

Attribute পড়তেঃ

$("#img").attr("src");

Attribute পরিবর্তন করতেঃ

$("#img").attr("src","photo.jpg");

removeAttr()

$("#img").removeAttr("alt");

Dimension Functions

width()

$("#box").width();

height()

$("#box").height();

innerWidth()

Padding সহ Width প্রদান করে।

$("#box").innerWidth();

outerWidth()

Border সহ Width প্রদান করে।

$("#box").outerWidth();
আরো পড়ুনঃ HTML Element, HTML Tag এবং CSS Selector: সম্পূর্ণ বাংলা গাইড

বাস্তব উদাহরণ

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices এর বাস্তব উদাহরণ নিচে দেওয়া হলোঃ

<button id="btn">
Hide / Show
</button>
<div id="box">
Hello
</div>

$("#btn").click(function(){
    $("#box").fadeToggle(800);
});

Best Practices

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices আছে। নিচে দেওয়া হলোঃ

• $(document).ready() ব্যবহার করুন (যদিও jQuery 3.x এ অনেক ক্ষেত্রে স্ক্রিপ্ট শেষে রাখলেও কাজ হয়)
• অপ্রয়োজনীয় Selector বারবার ব্যবহার করবেন না
• Animation অতিরিক্ত ব্যবহার করবেন না
• Event Delegation ব্যবহার করুন
• DOM Manipulation কম করুন
• অর্থবহ Class Name ব্যবহার করুন

সাধারণ ভুল

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices এর কিছু সাধারণ ভূল নিচে দেওয়া হলোঃ

• একই Selector বারবার লেখা
• অপ্রয়োজনীয় Animation
• HTML এর পরিবর্তে সব জায়গায় .html() ব্যবহার
• remove() ও empty() এর পার্থক্য না জানা
• CSS Inline Style অতিরিক্ত ব্যবহার

Traversing Functions

Traversing Function ব্যবহার করে DOM Tree এর Parent, Child এবং Sibling Element সহজে নির্বাচন করা যায়। এজন্য jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices এর কিছু সাধারণ বিষয় নিচে দেওয়া হলোঃ

parent()

বর্তমান Element এর Parent নির্বাচন করে।

$("#item").parent();

children()

সরাসরি Child Element নির্বাচন করে।

$("#menu").children();

find()

নির্দিষ্ট Selector অনুসারে Descendant Element খুঁজে বের করে।

$("#content").find("p");

first()

প্রথম Element নির্বাচন করে।

$("li").first();

last()

শেষ Element নির্বাচন করে।

$("li").last();

eq()

নির্দিষ্ট Index এর Element নির্বাচন করে।

$("li").eq(2);

next()

পরবর্তী Sibling নির্বাচন করে।

$("#title").next();

prev()

পূর্ববর্তী Sibling নির্বাচন করে।

$("#title").prev();
আরো পড়ুনঃ UI ও UX ডিজাইন কী? একজন ডিজাইনারের জানা উচিত সবকিছু

AJAX Built-in Function

AJAX এর মাধ্যমে সম্পূর্ণ পেজ রিলোড না করেই সার্ভার থেকে তথ্য আদান-প্রদান করা যায়। jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices এর কিছু গুরুত্বপূর্ণ বিষয় নিচে দেওয়া হলোঃ

load()

$("#content").load("about.html");

$.get()

$.get("data.php", function(data){
    console.log(data);
});

$.post()

$.post("save.php",
{
name:"Rahim",
age:25
},
function(response){
console.log(response);
});

$.ajax()

সবচেয়ে শক্তিশালী AJAX Function।

$.ajax({
url:"data.json",
method:"GET",
success:function(result){
console.log(result);
}
});

Utility Functions

$.each()

Loop করার জন্য ব্যবহৃত হয়।

$.each(
["A","B","C"],
function(index,value){
console.log(value);
});

$.trim()

String এর অতিরিক্ত Space সরায়।

$.trim(" Hello ");

$.type()

Variable এর Type জানায়।

$.type(100);

Output:

number

$.isArray()

$.isArray([1,2,3]);

Output:

true

$.now()

বর্তমান Timestamp প্রদান করে।

$.now();

বাস্তব Mini Project

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices এর কিছু বাস্তব ছোট প্রোযেক্ট নিচে দেওয়া হলোঃ

HTML

<button id="btn">
Load Data
</button>
<div id="result"></div>

JavaScript

$("#btn").click(function(){
$("#result").load("news.html");
});

Button চাপলে news.html-এর Content result Div-এ লোড হবে।

Interview Questions

jQuery Built-in Function Syntax, ব্যবহার, উদাহরণ ও Best Practices এর কিছু সাধারণ প্রশ্ন নিচে দেওয়া হলোঃ

jQuery Built-in Function কী?

jQuery Library তে আগে থেকেই তৈরি থাকা Function কে Built-in Function বলা হয়।

hide() কী?

Element লুকানোর জন্য ব্যবহৃত হয়।

fadeOut() কী?

ধীরে ধীরে Element অদৃশ্য করে।

append() কী?

Element এর শেষে নতুন Content যোগ করে।

attr() কী?

Attribute পড়া ও পরিবর্তনের জন্য ব্যবহৃত হয়।

css() কী?

CSS Property পরিবর্তনের জন্য ব্যবহৃত হয়।

$.ajax() কী?

AJAX Request পাঠানোর সবচেয়ে শক্তিশালী jQuery Function।

parent() কী?

Parent Element নির্বাচন করে।

children() কী?

Child Element নির্বাচন করে।

load() কী?

AJAX ব্যবহার করে অন্য Page এর Content Load করে।

HSC / ডিপ্লোমা / বিশ্ববিদ্যালয় পরীক্ষার গুরুত্বপূর্ণ প্রশ্ন

• jQuery কী?
• Built-in Function কী?
• Selector কী?
• Event Function কী?
• hide() কী?
• show() কী?
• fadeIn() কী?
• slideToggle() কী?
• css() কী?
• attr() কী?
• html() কী?
• text() কী?
• val() কী?
• AJAX কী?
• $.ajax() কী?
• Traversing Function কী?
• parent() কী?
• children() কী?
• append() কী?
• remove() কী?

FAQ

jQuery Built-in Function কী?

jQuery Library তে পূর্বনির্ধারিত Function গুলোকে Built-in Function বলা হয়, যা কম কোডে বিভিন্ন DOM, Event, Effect ও AJAX অপারেশন সম্পন্ন করতে সাহায্য করে।

jQuery এর সবচেয়ে বেশি ব্যবহৃত Function কোনগুলো?

• hide()
• show()
• toggle()
• css()
• html()
• text()
• attr()
• val()
• append()
• remove()
• click()
• $.ajax()

AJAX কি jQuery-তে সহজ?

হ্যাঁ। $.ajax(), $.get(), $.post() এবং load() ব্যবহারের মাধ্যমে AJAX তুলনামূলকভাবে সহজে বাস্তবায়ন করা যায়।

jQuery কি এখনও ব্যবহার হয়?

হ্যাঁ। যদিও নতুন প্রজেক্টে Vanilla JavaScript, React, Vue বা Angular বেশি ব্যবহৃত হয়, তবুও অসংখ্য বিদ্যমান ওয়েবসাইট, CMS (যেমন WordPress) এবং লেগেসি প্রজেক্টে jQuery এখনও ব্যবহৃত হয়।