জয়েন লগইন

জেকুয়েরী এইচটিএমএল সিএসএস

🌈জেকুয়েরী এইচটিএমএল সিএসএস কি?

📋জেকুয়েরী এইচটিএমএল সিএসএস হলো 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 ক্লাস যুক্ত করার উদাহরণ।

jquery
<!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 - এলিমেন্টের পরে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - এলিমেন্টের শেষে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - নির্দিষ্ট এলিমেন্টের শেষে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - এলিমেন্টের অ্যাট্রিবিউটের মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের আগে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - এলিমেন্টের অনুলিপি তৈরি করার উদাহরণ।

jquery
<!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 প্রপার্টির মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 থেকে অপসারণ করে তার ডেটা ও ইভেন্ট সংরক্ষণ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের অভ্যন্তরীণ কনটেন্ট অপসারণ করার উদাহরণ।

jquery
<!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 ক্লাস আছে কি না যাচাই করার উদাহরণ।

jquery
<!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 - এলিমেন্টের উচ্চতা নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 কনটেন্ট নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 - প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ উচ্চতা সংগ্রহ করার উদাহরণ।

jquery
<!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 - প্যাডিংসহ এলিমেন্টের অভ্যন্তরীণ প্রস্থ সংগ্রহ করার উদাহরণ।

jquery
<!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 - নির্দিষ্ট এলিমেন্টের পরে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - নির্দিষ্ট এলিমেন্টের আগে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - ডকুমেন্টের সাপেক্ষে এলিমেন্টের অবস্থান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের নিকটতম অফসেট প্যারেন্ট সংগ্রহ করার উদাহরণ।

jquery
<!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 - বর্ডারসহ এলিমেন্টের উচ্চতা সংগ্রহ করার উদাহরণ।

jquery
<!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 - বর্ডারসহ এলিমেন্টের প্রস্থ সংগ্রহ করার উদাহরণ।

jquery
<!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 - অফসেট প্যারেন্টের সাপেক্ষে এলিমেন্টের অবস্থান সংগ্রহ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - নির্দিষ্ট এলিমেন্টের শুরুতে কনটেন্ট যুক্ত করার উদাহরণ।

jquery
<!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 - এলিমেন্টের প্রপার্টির মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 থেকে অপসারণ করাসহ তার ডেটা ও ইভেন্ট মুছে ফেলা উদাহরণ।

jquery
<!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 - এলিমেন্ট থেকে নির্দিষ্ট অ্যাট্রিবিউট অপসারণ করার উদাহরণ।

jquery
<!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 ক্লাস অপসারণ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের নির্দিষ্ট প্রপার্টি অপসারণ করার উদাহরণ।

jquery
<!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 - নির্বাচিত এলিমেন্টগুলোকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করার উদাহরণ।

jquery
<!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 - এলিমেন্টকে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করার উদাহরণ।

jquery
<!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 - অনুভূমিক স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 - উল্লম্ব স্ক্রল অবস্থান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের টেক্সট কনটেন্ট নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 ক্লাস যুক্ত বা অপসারণ করার উদাহরণ।

jquery
<!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 কাঠামো দিয়ে মোড়ানো উদাহরণ।

jquery
<!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 কাঠামো দিয়ে মোড়ানো উদাহরণ।

jquery
<!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 কাঠামো দিয়ে মোড়ানো উদাহরণ।

jquery
<!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 - এলিমেন্টের প্যারেন্ট অপসারণ করে তার কনটেন্ট অক্ষুণ্ণ রাখার উদাহরণ।

jquery
<!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 - ফর্ম এলিমেন্টের মান নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 - এলিমেন্টের প্রস্থ নির্ধারণ বা সংগ্রহ করার উদাহরণ।

jquery
<!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 এলিমেন্টের প্রস্থ নির্ধারণ বা সংগ্রহ করতে ব্যবহৃত হয়।