জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ . Mostafizur Rahman, Firoz
কি খবর সবার? জেকোয়েরি কেমন শিখছেন সবাই? আজ আমি জেকোয়েরি এর অনেক গুরুত্বপুর্ণ একটা বিষয় জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ সম্পর্কে বিস্তারিত আলোচনা করবো ।
সিলেক্টর নামঃ *
উদাহরণঃ $("*")
কাজঃ সকল উপাদান সিলেক্ট করে ।
সিলেক্টর নামঃ #id
উদাহরণঃ $("#lastname")
কাজঃ id="lastname" গুলো শুধুমাত্র সিলেক্ট করে । মানে আইডিগুলোর লাস্টনেমকে শুধু মাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ .class
উদাহরণঃ $(".intro,.demo")
কাজঃ "intro" অথবা "demo" এর সকল ক্লাস সিলেক্ট করে ।
সিলেক্টর নামঃ element
উদাহরণঃ $("p")
কাজঃ সকল <p> ট্যাগের উপাদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ el1,el2,el3
উদাহরণঃ $("h1,div,p")
কাজঃ সকল <h1>, <div> এবং <p> elements গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :first
উদাহরণঃ $("p:first")
কাজঃ শুধুমাত্র প্রথম <p> element গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :last
উদাহরণঃ $("p:last")
কাজঃ শুধুমাত্র শেষ <p> element গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :even
উদাহরণঃ $("tr:even")
কাজঃ সকল জোড় <tr> elements গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :odd
উদাহরণঃ $("tr:odd")
কাজঃ সকল বিজোড় <tr> elements গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :first-child
উদাহরণঃ $("p:first-child")
কাজঃ পিতা-মাতার সকল প্রথম শিশুকে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :first-of-type
উদাহরণঃ $("p:first-of-type")
কাজঃ পিতামাতা এবং শিশু দুজনই প্রথম হলে শুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :last-child
উদাহরণঃ $("p:last-child")
কাজঃ পিতা-মাতার সকল শেষ শিশুকে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :last-of-type
উদাহরণঃ $("p:last-of-type")
কাজঃ পিতামাতা এবং শিশু দুজনই শেষের হলে শুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :nth-child(n)
উদাহরণঃ $("p:nth-child(2)")
কাজঃ পিতা-মাতার সকল দ্বিতীয় শিশুকে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :nth-last-child(n)
উদাহরণঃ $("p:nth-last-child(2)")
কাজঃ পিতা-মাতার সকল শেষের দ্বিতীয় শিশুকে শুধুমাত্র সিলেক্ট করবে । মানে ছোট জনের আগের জন ।
সিলেক্টর নামঃ :nth-of-type(n)
উদাহরণঃ $("p:nth-of-type(2)")
কাজঃ দ্বিতীয় <p> elements এর সকল <p> element কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :nth-last-of-type(n)
উদাহরণঃ $("p:nth-last-of-type(2)")
কাজঃ দ্বিতীয় <p> elements এর সকল <p> element কে সিলেক্ট করবে । শেষের দিক থেকে কিন্তু ।
সিলেক্টর নামঃ :only-child
উদাহরণঃ $("p:only-child")
কাজঃ একমাত্র শিশু হলে শুধু মাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :only-of-type
উদাহরণঃ $("p:only-of-type")
কাজঃ একই রকমের পিতা-মাতার একমাত্র শিশু হলে শুধু মাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ parent > child
উদাহরণঃ $("div > p")
কাজঃ <div> element এর সরাসরি শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ parent descendant
উদাহরণঃ $("div p")
কাজঃ <div> element এর নিচের দিককার শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ element + next
উদাহরণঃ $("div + p")
কাজঃ <div> element এর পরবর্তী শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ element ~ siblings
উদাহরণঃ $("div ~ p")
কাজঃ <div> element ভাই-বোন হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :eq(index)
উদাহরণঃ $("ul li:eq(3)")
কাজঃ চার নাম্বার ইলিমেন্টসকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :gt(no)
উদাহরণঃ $("ul li:gt(3)")
কাজঃ ৩ এর চেয়ে বড় হলে শুধুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :lt(no)
উদাহরণঃ $("ul li:lt(3)")
কাজঃ ৩ এর চেয়ে ছোট হলে শুধুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :not(selector)
উদাহরণঃ $("input:not(:empty)")
কাজঃ যাদের মান শূন্য নয় তাদের সকল্কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :header
উদাহরণঃ $(":header")
কাজঃ সকল হেডার এলিমেন্টস <h1>, <h2> ... কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :animated
উদাহরণঃ $(":animated")
কাজঃ সকল এনিমেটেড এলিমেন্টসকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :focus
উদাহরণঃ $(":focus")
কাজঃ যেগুলো ফোকাসে থাকবে শুধু তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :contains(text)
উদাহরণঃ $(":contains('Hello')")
কাজঃ "Hello" টেক্সট থাকলে তাদের সবগুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :has(selector)
উদাহরণঃ $("div:has(p)")
কাজঃ <p> element যুক্ত সকল <div> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :empty
উদাহরণঃ $(":empty")
কাজঃ যারা খালি থাকবে শুধু তাদেরই সিলেক্ট করবে ।
সিলেক্টর নামঃ :parent
উদাহরণঃ $(":parent")
কাজঃ যারা অন্য এলিমেন্টের প্যারেন্ট ক্যাটাগরিতে থাকবে তাদের সকল্কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :hidden
উদাহরণঃ $("p:hidden")
কাজঃ সকল হিডেন <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :visible
উদাহরণঃ $("table:visible")
কাজঃ সকল ভিজিবল টেবিলকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :root
উদাহরণঃ $(":root")
কাজঃ ডকুমেন্টের root element কে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :lang(language)
উদাহরণঃ $("p:lang(de)")
কাজঃ "de" লেখা দ্বারা শুরু সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute]
উদাহরণঃ $("[href]")
কাজঃ href attribute থাকা সকল উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute=value]
উদাহরণঃ $("[href='default.htm']")
কাজঃ href attribute থাকা সকল "default.htm" ভেলুর উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute!=value]
উদাহরণঃ $("[href!='default.htm']")
কাজঃ href attribute থাকা সকল "default.htm" ভেলু বাদের বাকি সব উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute$=value]
উদাহরণঃ $("[href$='.jpg']")
কাজঃ href attribute থাকা সকল ".jpg" উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute|=value]
উদাহরণঃ $("[title|='Tomorrow']")
কাজঃ title attribute এর সকল 'Tomorrow' ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute^=value]
উদাহরণঃ $("[title^='Tom']")
কাজঃ title attribute এর সকল "Tom" ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute~=value]
উদাহরণঃ $("[title~='hello']")
কাজঃ title attribute এর শুধুমাত্র "hello" ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute*=value]
উদাহরণঃ $("[title*='hello']")
কাজঃ title attribute এর সকল "hello" ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :input
উদাহরণঃ $(":input")
কাজঃ সকল ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :text
উদাহরণঃ $(":text")
কাজঃ সকল ইনপুট উপদানের type="text" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :password
উদাহরণঃ $(":password")
কাজঃ সকল ইনপুট উপদানের type="password" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :radio
উদাহরণঃ $(":radio")
কাজঃ সকল ইনপুট উপদানের type="radio" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :checkbox
উদাহরণঃ $(":checkbox")
কাজঃ সকল ইনপুট উপদানের type="checkbox" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :submit
উদাহরণঃ $(":submit")
কাজঃ সকল ইনপুট উপদানের type="submit" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :reset
উদাহরণঃ $(":reset")
কাজঃ সকল ইনপুট উপদানের type="reset" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :button
উদাহরণঃ $(":button")
কাজঃ সকল ইনপুট উপদানের type="button" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :image
উদাহরণঃ $(":image")
কাজঃ সকল ইনপুট উপদানের type="image" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :file
উদাহরণঃ $(":file")
কাজঃ সকল ইনপুট উপদানের type="file" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :enabled
উদাহরণঃ $(":enabled")
কাজঃ সকল enabled ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :disabled
উদাহরণঃ $(":disabled")
কাজঃ সকল disabled ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :selected
উদাহরণঃ $(":selected")
কাজঃ সকল selected ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :checked
উদাহরণঃ $(":checked")
কাজঃ সকল checked ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
দেখছেন তো জেকোয়েরি এর সব সিলেক্টর গুলোকে । খুব মজার তাই না। আমার কিন্তু এগুলোকে অনেক ভাল লাগে । শুধু মনে রাখাই যা কষ্টের । তাই বেশি বেশি করে প্রাকটিস করা দরকার তাহলে সব আরো সহজ হয়ে যাবে । আর কোথাও না বুঝতে পারলে কমেন্ট করতে ভুলবেন না কিন্তু ।
