জেকুয়েরী এইচটিএমএল সিএসএস
🌈জেকুয়েরী এইচটিএমএল সিএসএস কি?
📋জেকুয়েরী এইচটিএমএল সিএসএস হলো HTML ও CSS ব্যবহার করার পদ্ধতি।
⚒️জেকুয়েরী এইচটিএমএল সিএসএস HTML ও CSS ব্যবহার করতে ব্যবহৃত হয়।
জেকুয়েরী এইচটিএমএল সিএসএস সমূহ
জেকুয়েরী এইচটিএমএল সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ addClass - এলিমেন্টে CSS ক্লাস যুক্ত করা
- ➡️ after - এলিমেন্টের পরে কনটেন্ট যুক্ত করা
- ➡️ append - এলিমেন্টের শেষে কনটেন্ট যুক্ত করা
- ➡️ appendTo - নির্দিষ্ট এলিমেন্টের শেষে কনটেন্ট যুক্ত করা
- ➡️ attr - এলিমেন্টের অ্যাট্রিবিউটের মান নির্ধারণ বা সংগ্রহ করা
- ➡️ before - এলিমেন্টের আগে কনটেন্ট যুক্ত করা
- ➡️ clone - এলিমেন্টের অনুলিপি তৈরি করা
- ➡️ css - এলিমেন্টের CSS প্রপার্টির মান নির্ধারণ বা সংগ্রহ করা
- ➡️ detach - এলিমেন্টকে DOM থেকে অপসারণ করে তার ডেটা ও ইভেন্ট সংরক্ষণ করা
- ➡️ empty - এলিমেন্টের অভ্যন্তরীণ কনটেন্ট অপসারণ করা
- ➡️ hasClass - এলিমেন্টে নির্দিষ্ট CSS ক্লাস আছে কি না যাচাই করা
- ➡️ height - এলিমেন্টের উচ্চতা নির্ধারণ বা সংগ্রহ করা
- ➡️ html - এলিমেন্টের HTML কনটেন্ট নির্ধারণ বা সংগ্রহ করা
- ➡️ innerHeight - প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ উচ্চতা সংগ্রহ করা
- ➡️ innerWidth - প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ প্রস্থ সংগ্রহ করা
- ➡️ insertAfter - নির্দিষ্ট এলিমেন্টের পরে কনটেন্ট যুক্ত করা
- ➡️ insertBefore - নির্দিষ্ট এলিমেন্টের আগে কনটেন্ট যুক্ত করা
- ➡️ offset - ডকুমেন্টের সাপেক্ষে এলিমেন্টের অবস্থান নির্ধারণ বা সংগ্রহ করা
- ➡️ offsetParent - এলিমেন্টের নিকটতম অফসেট প্যারেন্ট সংগ্রহ করা
- ➡️ outerHeight - বর্ডারসহ এলিমেন্টের উচ্চতা সংগ্রহ করা
- ➡️ outerWidth - বর্ডারসহ এলিমেন্টের প্রস্থ সংগ্রহ করা
- ➡️ position - অফসেট প্যারেন্টের সাপেক্ষে এলিমেন্টের অবস্থান সংগ্রহ করা
- ➡️ prepend - এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করা
- ➡️ prependTo - নির্দিষ্ট এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করা
- ➡️ prop - এলিমেন্টের প্রপার্টির মান নির্ধারণ বা সংগ্রহ করা
- ➡️ remove - এলিমেন্টকে DOM থেকে অপসারণ করাসহ তার ডেটা ও ইভেন্ট মুছে ফেলা
- ➡️ removeAttr - এলিমেন্ট থেকে নির্দিষ্ট অ্যাট্রিবিউট অপসারণ করা
- ➡️ removeClass - এলিমেন্ট থেকে CSS ক্লাস অপসারণ করা
- ➡️ removeProp - এলিমেন্টের নির্দিষ্ট প্রপার্টি অপসারণ করা
- ➡️ replaceAll - নির্বাচিত এলিমেন্টগুলোকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করা
- ➡️ replaceWith - এলিমেন্টকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করা
- ➡️ scrollLeft - অনুভূমিক স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করা
- ➡️ scrollTop - উল্লম্ব স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করা
- ➡️ text - এলিমেন্টের টেক্সট কনটেন্ট নির্ধারণ বা সংগ্রহ করা
- ➡️ toggleClass - এলিমেন্টে CSS ক্লাস যুক্ত বা অপসারণ করা
- ➡️ wrap - প্রতিটি নির্বাচিত এলিমেন্টকে পৃথক HTML কাঠামো দিয়ে মোড়ানো
- ➡️ wrapAll - নির্বাচিত সব এলিমেন্টকে একটি HTML কাঠামো দিয়ে মোড়ানো
- ➡️ wrapInner - এলিমেন্টের অভ্যন্তরীণ কনটেন্টকে HTML কাঠামো দিয়ে মোড়ানো
- ➡️ unwrap - এলিমেন্টের প্যারেন্ট অপসারণ করে তার কনটেন্ট অক্ষুণ্ণ রাখা
- ➡️ val - ফর্ম এলিমেন্টের মান নির্ধারণ বা সংগ্রহ করা
- ➡️ width - এলিমেন্টের প্রস্থ নির্ধারণ বা সংগ্রহ করা
addClass - এলিমেন্টে CSS ক্লাস যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.tomato {
background: tomato;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").addClass("tomato");
});
});
</script>
</head>
<body>
<button>ক্লিক করুন</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
after - এলিমেন্টের পরে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").after("<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<h1>প্রোগ্রামিং শিখুন</h1>
</body>
</html>
append - এলিমেন্টের শেষে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul").append("<li>জেকুয়েরী</li>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<ul>
<li>পিএইচপি</li>
<li>জাভা</li>
<li>পাইথন</li>
<li>জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>
appendTo - নির্দিষ্ট এলিমেন্টের শেষে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<p>প্রোগ্রামিং শিখুন</p>").appendTo("div");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
attr - এলিমেন্টের অ্যাট্রিবিউটের মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("alt", "আপেল");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<img src="/images/apple.jpg" alt="image">
</body>
</html>
before - এলিমেন্টের আগে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").before("<h1>প্রোগ্রামিং শিখুন</h1>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</body>
</html>
clone - এলিমেন্টের অনুলিপি তৈরি করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").first().clone().appendTo("div");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p>প্রোগ্রামিং শিখুন</p>
<div></div>
</body>
</html>
css - এলিমেন্টের CSS প্রপার্টির মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").css({
"background": "tomato"
});
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
detach - এলিমেন্টকে DOM থেকে অপসারণ করে তার ডেটা ও ইভেন্ট সংরক্ষণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").detach();
});
});
</script>
</head>
<body>
<button>রিমুভ</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
empty - এলিমেন্টের অভ্যন্তরীণ কনটেন্ট অপসারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<button>এমটি</button>
<div style="height:100px;background:tomato">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
hasClass - এলিমেন্টে নির্দিষ্ট CSS ক্লাস আছে কি না যাচাই করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.tomato {
background: tomato;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
if($("div").hasClass("tomato")){
$("p").text("class exists");
}
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<div class="tomato"></div>
<p></p>
</body>
</html>
height - এলিমেন্টের উচ্চতা নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").height());
});
});
</script>
</head>
<body>
<button>হাইট</button>
<div style="height:100px;"></div>
<p></p>
</body>
</html>
html - এলিমেন্টের HTML কনটেন্ট নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").html("<h1>প্রোগ্রামিং শিখুন</h1>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<div></div>
</body>
</html>
innerHeight - প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ উচ্চতা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").innerHeight());
});
});
</script>
</head>
<body>
<button>inner height</button>
<div style="height:100px;padding:10px;"></div>
<p></p>
</body>
</html>
innerWidth - প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ প্রস্থ সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").innerWidth());
});
});
</script>
</head>
<body>
<button>inner width</button>
<div style="width:100px;padding:10px;"></div>
<p></p>
</body>
</html>
insertAfter - নির্দিষ্ট এলিমেন্টের পরে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<p>নিজের ক্যারিয়ার গড়ুন</p>").insertAfter("h1");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<h1>প্রোগ্রামিং শিখুন</h1>
</body>
</html>
insertBefore - নির্দিষ্ট এলিমেন্টের আগে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<h1>প্রোগ্রামিং শিখুন</h1>").insertBefore("p");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p>নিজের ক্যারিয়ার গড়ুন</p>
</body>
</html>
offset - ডকুমেন্টের সাপেক্ষে এলিমেন্টের অবস্থান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
const position = $("div").offset();
$("p").text(position.top + ", " + position.left);
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<div style="margin:50px;"></div>
<p></p>
</body>
</html>
offsetParent - এলিমেন্টের নিকটতম অফসেট প্যারেন্ট সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").offsetParent().prop("tagName"));
});
});
</script>
</head>
<body>
<button>offset parent</button>
<div>
<span></span>
</div>
<p></p>
</body>
</html>
outerHeight - বর্ডারসহ এলিমেন্টের উচ্চতা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").outerHeight());
});
});
</script>
</head>
<body>
<button>outer height</button>
<div style="height:100px;padding:10px;border:5px solid;"></div>
<p></p>
</body>
</html>
outerWidth - বর্ডারসহ এলিমেন্টের প্রস্থ সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").outerWidth());
});
});
</script>
</head>
<body>
<button>outer width</button>
<div style="width:100px;padding:10px;border:5px solid;"></div>
<p></p>
</body>
</html>
position - অফসেট প্যারেন্টের সাপেক্ষে এলিমেন্টের অবস্থান সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
const position = $("div").position();
$("p").text(position.top + ", " + position.left);
});
});
</script>
</head>
<body>
<button>পজিশন</button>
<div style="margin:50px;"></div>
<p></p>
</body>
</html>
prepend - এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul").prepend("<li>জেকুয়েরী</li>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<ul>
<li>পিএইচপি</li>
<li>জাভা</li>
<li>পাইথন</li>
<li>জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>
prependTo - নির্দিষ্ট এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<li>জেকুয়েরী</li>").prependTo("ul");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<ul>
<li>পিএইচপি</li>
<li>জাভা</li>
<li>পাইথন</li>
<li>জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>
prop - এলিমেন্টের প্রপার্টির মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").prop("disabled", true);
});
});
</script>
</head>
<body>
<button>ডিজেবল</button>
<input type="text">
</body>
</html>
remove - এলিমেন্টকে DOM থেকে অপসারণ করাসহ তার ডেটা ও ইভেন্ট মুছে ফেলা উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").remove();
});
});
</script>
</head>
<body>
<button>রিমুভ</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
removeAttr - এলিমেন্ট থেকে নির্দিষ্ট অ্যাট্রিবিউট অপসারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").removeAttr("disabled");
});
});
</script>
</head>
<body>
<button>ইনাবল</button>
<input type="text" disabled>
</body>
</html>
removeClass - এলিমেন্ট থেকে CSS ক্লাস অপসারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.tomato {
background: tomato;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").removeClass("tomato");
});
});
</script>
</head>
<body>
<button>রিমুভ</button>
<div class="tomato">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
removeProp - এলিমেন্টের নির্দিষ্ট প্রপার্টি অপসারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").prop("data-value", "jquery");
$("div").removeProp("data-value");
});
});
</script>
</head>
<body>
<button>remove property</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
replaceAll - নির্বাচিত এলিমেন্টগুলোকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<h1>প্রোগ্রামিং শিখুন</h1>").replaceAll("p");
});
});
</script>
</head>
<body>
<button>রিপ্লেস</button>
<p>হ্যালো বিশ্ব</p>
<p>হ্যালো বিশ্ব</p>
</body>
</html>
replaceWith - এলিমেন্টকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith("<h1>প্রোগ্রামিং শিখুন</h1>");
});
});
</script>
</head>
<body>
<button>রিপ্লেস</button>
<p>হ্যালো বিশ্ব</p>
</body>
</html>
scrollLeft - অনুভূমিক স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").scrollLeft(100);
});
});
</script>
</head>
<body>
<button>স্ক্রল</button>
<div style="width:100px;overflow:auto;white-space:nowrap;">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
scrollTop - উল্লম্ব স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").scrollTop(40);
});
});
</script>
</head>
<body>
<button>স্ক্রল</button>
<div style="height:100px;overflow:auto;">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
text - এলিমেন্টের টেক্সট কনটেন্ট নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("প্রোগ্রামিং শিখুন");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p></p>
</body>
</html>
toggleClass - এলিমেন্টে CSS ক্লাস যুক্ত বা অপসারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.tomato {
background: tomato;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").toggleClass("tomato");
});
});
</script>
</head>
<body>
<button>টুগল</button>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
wrap - প্রতিটি নির্বাচিত এলিমেন্টকে পৃথক HTML কাঠামো দিয়ে মোড়ানো উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div {background-color: pink}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrap("<div></div>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>
</body>
</html>
wrapAll - নির্বাচিত সব এলিমেন্টকে একটি HTML কাঠামো দিয়ে মোড়ানো উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div {background-color: pink}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapAll("<div></div>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>
</body>
</html>
wrapInner - এলিমেন্টের অভ্যন্তরীণ কনটেন্টকে HTML কাঠামো দিয়ে মোড়ানো উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div {background-color: pink}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner("<b></b>");
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>
</body>
</html>
unwrap - এলিমেন্টের প্যারেন্ট অপসারণ করে তার কনটেন্ট অক্ষুণ্ণ রাখার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div {background-color: pink}
article {background-color: red}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").unwrap();
});
});
</script>
</head>
<body>
<button>ফলাফল</button>
<div>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
</div>
<article>
<p>ক্যাসকেডিং স্টাইল শিট</p>
</article>
</body>
</html>
val - ফর্ম এলিমেন্টের মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("input").val());
});
});
</script>
</head>
<body>
<button>ভ্যালু</button>
<input value="জেকুয়েরী">
<p></p>
</body>
</html>
width - এলিমেন্টের প্রস্থ নির্ধারণ বা সংগ্রহ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text($("div").width());
});
});
</script>
</head>
<body>
<button>উইথ</button>
<div style="width:100px;"></div>
<p></p>
</body>
</html>
জেকুয়েরী এইচটিএমএল সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| addClass | এলিমেন্টে CSS ক্লাস যুক্ত করতে ব্যবহৃত হয়। |
| after | এলিমেন্টের পরে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| append | এলিমেন্টের শেষে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| appendTo | নির্দিষ্ট এলিমেন্টের শেষে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| attr | এলিমেন্টের অ্যাট্রিবিউটের মান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| before | এলিমেন্টের আগে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| clone | এলিমেন্টের অনুলিপি তৈরি করতে ব্যবহৃত হয়। |
| css | এলিমেন্টের CSS প্রপার্টির মান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| detach | এলিমেন্টকে DOM থেকে অপসারণ করে তার ডেটা ও ইভেন্ট সংরক্ষণ করতে ব্যবহৃত হয়। |
| empty | এলিমেন্টের অভ্যন্তরীণ কনটেন্ট অপসারণ করতে ব্যবহৃত হয়। |
| hasClass | এলিমেন্টে নির্দিষ্ট CSS ক্লাস আছে কি না যাচাই করতে ব্যবহৃত হয়। |
| height | এলিমেন্টের উচ্চতা নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| html | এলিমেন্টের HTML কনটেন্ট নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| innerHeight | প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ উচ্চতা সংগ্রহ করতে ব্যবহৃত হয়। |
| innerWidth | প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ প্রস্থ সংগ্রহ করতে ব্যবহৃত হয়। |
| insertAfter | নির্দিষ্ট এলিমেন্টের পরে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| insertBefore | নির্দিষ্ট এলিমেন্টের আগে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| offset | ডকুমেন্টের সাপেক্ষে এলিমেন্টের অবস্থান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| offsetParent | এলিমেন্টের নিকটতম অফসেট প্যারেন্ট সংগ্রহ করতে ব্যবহৃত হয়। |
| outerHeight | বর্ডারসহ এলিমেন্টের উচ্চতা সংগ্রহ করতে ব্যবহৃত হয়। |
| outerWidth | বর্ডারসহ এলিমেন্টের প্রস্থ সংগ্রহ করতে ব্যবহৃত হয়। |
| position | অফসেট প্যারেন্টের সাপেক্ষে এলিমেন্টের অবস্থান সংগ্রহ করতে ব্যবহৃত হয়। |
| prepend | এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| prependTo | নির্দিষ্ট এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করতে ব্যবহৃত হয়। |
| prop | এলিমেন্টের প্রপার্টির মান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| remove | এলিমেন্টকে DOM থেকে অপসারণ করাসহ তার ডেটা ও ইভেন্ট মুছে ফেলা ব্যবহৃত হয়। |
| removeAttr | এলিমেন্ট থেকে নির্দিষ্ট অ্যাট্রিবিউট অপসারণ করতে ব্যবহৃত হয়। |
| removeClass | এলিমেন্ট থেকে CSS ক্লাস অপসারণ করতে ব্যবহৃত হয়। |
| removeProp | এলিমেন্টের নির্দিষ্ট প্রপার্টি অপসারণ করতে ব্যবহৃত হয়। |
| replaceAll | নির্বাচিত এলিমেন্টগুলোকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করতে ব্যবহৃত হয়। |
| replaceWith | এলিমেন্টকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করতে ব্যবহৃত হয়। |
| scrollLeft | অনুভূমিক স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| scrollTop | উল্লম্ব স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| text | এলিমেন্টের টেক্সট কনটেন্ট নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| toggleClass | এলিমেন্টে CSS ক্লাস যুক্ত বা অপসারণ করতে ব্যবহৃত হয়। |
| wrap | প্রতিটি নির্বাচিত এলিমেন্টকে পৃথক HTML কাঠামো দিয়ে মোড়ানো ব্যবহৃত হয়। |
| wrapAll | নির্বাচিত সব এলিমেন্টকে একটি HTML কাঠামো দিয়ে মোড়ানো ব্যবহৃত হয়। |
| wrapInner | এলিমেন্টের অভ্যন্তরীণ কনটেন্টকে HTML কাঠামো দিয়ে মোড়ানো ব্যবহৃত হয়। |
| unwrap | এলিমেন্টের প্যারেন্ট অপসারণ করে তার কনটেন্ট অক্ষুণ্ণ রাখতে ব্যবহৃত হয়। |
| val | ফর্ম এলিমেন্টের মান নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |
| width | এলিমেন্টের প্রস্থ নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়। |