jQuery কর্তৃপক্ষ - jQuery() মথড
প্রয়োগ
সমস্ত div ইলেকট্রনের সাব-ইলেকট্রন p ইলেকট্রনকে খুঁজুন এবং তার শ্রেণী সেট করুন:
$("div > p").css("border", "1px solid gray");
পরিভাষা ও ব্যবহার
jQuery() মথড একটি স্ট্রিং স্বীকার করে, যাতে তা ইলেকট্রন সংকলনকে ম্যাচ করা হয়:
jQuery() ফাংশন তিনটি গ্রামাটিক আছে:
গ্রামাটিক 1
একটি স্ট্রিং স্বীকার করে, যাতে তা ইলেকট্রন সংকলনকে ম্যাচ করা হয়:
jQuery(selector, [context]
গ্রামাটিক 2
মৌলিক HTML শ্রেণীর স্ট্রিং ব্যবহার করে DOM ইলেকট্রন তৈরি করা:
jQuery(html,ownerDocument]
গ্রামাটিক 3
ডম ডকুমেন্ট লোড হওয়ার পরে একটি ফাংশন বান্ধন করা:
jQuery( callback )
jQuery( selector, [ context ] )
এই সিনটাক্সিসটি নিম্নলিখিত ব্যবহারগুলোতে ব্যবহৃত হয়:
ব্যবহার 1: সিলেক্টর পরিবেশ সেট করা
গঠনশৈলী
jQuery(selector, [context]
ডিফল্ট অবস্থায়, সিলেক্টর ডকুমেন্টের প্রথম শ্রেণীতে ডমেইন অনুসন্ধান করে। কিন্তু, $() তে অপশনাল context পারামিট সেট করা যেতে পারে。
যদি আমরা একটি ক্যালব্যাককেন্দ্রে একটি ইলেকট্রনেট খুঁজতে চাই, তবে নিচের খোঁজটি নির্ধারণ করতে পারি:
প্রয়োগ
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
কারণ আমরা span সিলেক্টরটিকে this এনভারনমেন্টে সীমিত করেছি, তাই ক্লিক করা ইলেকমেন্টের মধ্যে শুধুমাত্র span একককে অ্যাডজুস্ট করা হয়。
অভ্যন্তরীণভাবে, সিলেক্টর এনভারনমেন্ট .find() মথোডকের মাধ্যমে কার্যকর করা হয়, তাই $("span", this) এবং $(this).find("span") একইই。
জিন্টেক্সের মূল ফাংশনগুলি এই ফাংশনের মাধ্যমেই কার্যকর করা হয়। জিন্টেক্সের সবকিছু এই ফাংশনের ভিত্তিতে বা কোনওভাবে এই ফাংশনকে ব্যবহার করে হয়। এই ফাংশনের সবচেয়ে মৌলিক পদ্ধতি হল, একটি এক্সপ্রেসশন (সাধারণত সিএসএস চিহ্নিতকারকের মাধ্যমে) পাঠানো এবং এই এক্সপ্রেসশন অনুসারে সব মাটচিং ইলেকমেন্ট অনুসন্ধান করা হয়。
ডিফল্টে, context পারামিটার নির্দিষ্ট না হলে, $() পরিচ্ছন্ন এইচটিএমএল ডকুমেন্টে ডম ইলেকমেন্ট অনুসন্ধান করে; context পারামিটার নির্দিষ্ট করা হলে, যেমন একটি ডম ইলেকমেন্ট সংকলন বা জিন্টেক্স অবজেক্ট, তবে এই context-এ অনুসন্ধান করে। জিন্টেক্স 1.3.2 থেকে, তা ফিরিয়ে দেয়া ইলেকমেন্টগুলির ক্রমবিকাশ ক্রমবিকাশ হল যেমন ক্রমবিকাশ করা হয়েছে context-এ তারা প্রদর্শিত হয়েছে。
পদ্ধতি 2: ডম ইলেকমেন্ট ব্যবহার করা
গঠনশৈলী
jQuery(element)
এই ফাংশনটি আমাদেরকে অন্যভাবে পাওয়া ডম ইলেকমেন্টের মাধ্যমে জিন্টেক্স অবজেক্ট তৈরি করতে দেয়। এই পদ্ধতির সাধারণ ব্যবহার হল, ক্যালব্যাক ফাংশনে this কীওয়ার্ডটি দ্বারা পাওয়া ইলেকমেন্টকে জিন্টেক্স পদ্ধতি ব্যবহার করা:
প্রয়োগ
$("div.foo").click(function() {
$(this).slideUp();
});
এই উদাহরণটি ইলেকমেন্টকে ক্লিক করলে তাকে স্লাইড অ্যানিমেশনের মাধ্যমে লুকিয়ে রাখতে ব্যবহার করে। কারণ হ্যান্ডলার দ্বারা অ্যাপিল করা থিস কীওয়ার্ডটি ক্লিক করা ইলেকমেন্ট হল পরিশুদ্ধ ডম ইলেকমেন্ট, তাই জিন্টেক্স পদ্ধতি ব্যবহার করতে আগে এই ইলেকমেন্টকে জিন্টেক্স অবজেক্টে ওয়েপক করতে হবে。
এই ফাংশনটি এক্সএমএল ডকুমেন্ট এবং উইন্ডো অবজেক্ট (যদিও তারা ডম ইলেকমেন্ট নয়) হিসেবে প্রামাণ্য পারামিটারও গ্রহণ করতে পারে。
এক্সএমএল ডাটা এজেক্স কল থেকে ফিরে আসার পর, আমরা $() ফাংশন ব্যবহার করে এই ডাটা জিন্টেক্স অবজেক্টের মাধ্যমে ওয়েপক করতে পারি। একবার এটা সম্পন্ন হলে, আমরা .find() এবং অন্যান্য ডম বৃত্তান্ত পদ্ধতিগুলি ব্যবহার করে এক্সএমএল স্ট্রাকচারের একক ইলেকমেন্ট পাওয়া যায়。
পদ্ধতি 3: জিন্টেক্স অবজেক্ট ক্লোন করা
গঠনশৈলী
jQuery(জিন্টেক্স অবজেক্ট)
জিন্টেক্স ফাংশনের মাধ্যমে জিন্টেক্স অবজেক্ট পারামিটার হিসেবে পাঠালে, এই অবজেক্টের কপি তৈরি হয়। প্রথমিক অবজেক্টের মতই, নতুন জিন্টেক্স অবজেক্ট একই ডম ইলেকমেন্টকে উল্লেখ করে。
ব্যবহার ৪: খালি সংকেতকূল ফিরানো
গঠনশৈলী
jQuery()
jQuery 1.4-এ, jQuery() ফাংশন বিনামূল্যে কল করার ফলে, jQuery একটি খালি জেনারেট করা jQuery সংকেতকূল ফিরাবে। jQuery-র পূর্ববর্তী সংস্করণগুলোতে, এইভাবে কল করার ফলে, document নোডসহ একটি সংকেতকূল ফিরাবে。
jQuery( html, [ ownerDocument ] )
এই সিনটাক্সিসটি নিম্নলিখিত ব্যবহারগুলোতে ব্যবহৃত হয়:
ব্যবহার ১: নতুন ইলেকমেন্ট সৃষ্টি করা
গঠনশৈলী
jQuery(html,ownerDocument]
আপনি একটি হ্যান্ডলড HTML স্ট্রিং, কোনও টেম্পলেট ইঞ্জিন বা প্লাগইন দ্বারা সৃষ্টি হওয়া স্ট্রিং, বা AJAX দ্বারা লোড করা স্ট্রিং পাঠাতে পারেন, কিন্তু input ইলেকমেন্ট সৃষ্টির সময় আপনাকে সীমাবদ্ধতা থাকবে, যা দ্বিতীয়তম উদাহরণের জন্য দেখুন。
এই স্ট্রিংটি স্ল্যাশ (যেমন একটি ছবির ঠিকানা) বা ব্যবস্থা হতে পারে। একটি একক ইলেকমেন্ট সৃষ্টি করার সময়, বন্ধ ট্যাগ বা XHTML ফরম্যাট ব্যবহার করুন। যেমন, একটি span সৃষ্টি করতে, $("<span/>") বা $("<span></span>") ব্যবহার করুন, কিন্তু $("<span>") ব্যবহার করতে না পছন্দ করুন। jQuery-এ, এই সিনটাক্সিস ডকুমেন্ট.createElement("span") এর সমতুল্য।
যদি $() এ পারামিটার হিসাবে স্ট্রিং পাঠানো হয়, jQuery স্ট্রিংটি HTML কি না হয় (যেমন, স্ট্রিংয়ের কোনও স্থানে ট্যাগ থাকতে পারে) তা পরীক্ষা করবে। যদি না, তবে স্ট্রিংটিকে চিহ্নিতকারী এক্সপ্রেসন হিসাবে বোঝানো হবে, যেমন উপরের উল্লেখ করা হয়েছে। কিন্তু যদি স্ট্রিং HTML টেক্সট, তবে jQuery সেই HTML টেক্সটকে বর্ণনা করা ডম ইলেকমেন্ট সৃষ্টি করতে চেষ্টা করবে। তারপর, একটি জেনারেট করা এবং এই ডম ইলেকমেন্টগুলোর জন্য একটি jQuery অবজেক্ট রিফারেন্স করে ফিরবে:
প্রয়োগ
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
যদি এইমতো হ্যান্ডলড এইমল ট্যাগগুলো হ্যান্ডলড অ্যাট্রিবিউটসহ সাধারণ ট্যাগগুলোর তুলনায় জটিল, যেমন উপরের উদাহরণগুলোতে হ্যান্ডলড, তবে ইলেকমেন্টের বাস্তব সৃষ্টি প্রক্রিয়া ব্রাউজারের innerHTML মেকানিজম দ্বারা পরিচালিত হয়। বিশেষভাবে, jQuery একটি নতুন <div> ইলেকমেন্ট সৃষ্টি করবে, এবং প্রবেশিত HTML টেক্সটকে ইলেকমেন্টের innerHTML অ্যাট্রিবিউট হিসাবে সংযোজিত করবে। যখন পারামিটার সাধারণ ট্যাগ, যেমন $("<img />") বা $("<a></a>") হয়, jQuery ইনসাইড জাভাস্ক্রিপ্ট createElement() ফাংশন দ্বারা ইলেকমেন্ট সৃষ্টি করবে。
ক্রস-প্ল্যাটফর্ম কম্প্যাটিবিলিটি নিশ্চিত করতে, ফ্রেজমেট গঠনশৈলী ভালোভাবে হতে হবে। অন্য ইলেকট্রনিক ইনপুটকে নিয়ে আসার লেবেলটি কুয়ালপেয়াইন্ট একটি উপস্থিত হতে হবে (বন্ধ লেবেল):
$("<a href="http://jquery.com"></a>");
কিন্তু, জিন্টু একইভাবে XML এর লেবেল গঠনশৈলীও অনুমতি দেয়:
$("<a/>");
অন্য ইলেকট্রনিক ইনপুটকে নিয়ে আসার লেবেলটি বন্ধ করা যেতে পারে, কিংবা বন্ধ না করা যেতে পারে:
$("<img />");
$("<input>");
ব্যবহার ২: অপারিতা ও ইভেন্ট সংযোজন
গঠনশৈলী
jQuery(html,props)
জিন্টু ১.৪ এর জন্য, আমরা দ্বিতীয় পারামিটারে একটি অপারিতা ম্যাপ পাঠাতে পারি। এই পারামিটার, .attr() মথডের অপারিতার একটি উপসংহার প্রদান করে। এছাড়া, কোনও ইভেন্ট টাইপকেও পাঠাতে পারি, এবং নিচের জিন্টু মথডসমূহকে ব্যবহার করতে পারি: val, css, html, text, data, width, height, or offset.
মনে রাখুন, ইন্টারনেট এক্সপ্লোরার (IE) ইনপুট ইলেকট্রনিক তৈরি করতে এবং এটির ধরন পরিবর্তন করতে অনুমতি দেয় না; আপনাকে "<input type="checkbox" />"-এর মতো ব্যবহার করতে হবে।
প্রয়োগ
একটি <input> ইলেকট্রনিক ইনপুট তৈরি করুন, এবং type অপারিতা, এবং আপাত বৈশিষ্ট্য নির্ধারণ করুন, এবং কিছু ইভেন্ট নির্ধারণ করুন。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
ডম ডকুমেন্ট লোড হওয়ার পর একটি ফাংশন বাঁধা দেওয়ার অনুমতি দেয়。
এই ফাংশনের কাজ একই ভাবে $(document).ready() এর মতো, কিন্তু এই ফাংশন ব্যবহার করতে হলে, পৃষ্ঠায় ডম লোড হওয়ার পর অন্য সব $() অপারেটর যেমন কার্যকর করতে হবে, সেগুলিকে এই ফাংশনের মধ্যে বোঝানো হয়। যদিও এই ফাংশন টেকনিক্যালভাবে লিঙ্ক করা যেতে পারে, কিন্তু এইভাবে লিঙ্ক করা হয়নি।
উদাহরণ
ডম (DOM) লোড হওয়ার পর, এমন ফাংশন কার্যকর করুন:
$(function(){
// ডকুমেন্ট প্রস্তুত
});
