এট্রিবিউট এবং কন্টেন্ট খুঁজে পাওয়া



এইচটিএমএল এলিমেন্ট এবং এট্রিবিউট পরিবর্তন ও পরিচালনার জন্য জেকুয়েরিতে অনেক ক্ষমতা সম্পন্ন মেথড রয়েছে।


জেকুয়েরি DOM পরিচালনা

জেকুয়েরিতে ডোম সম্পর্কিত অনেক মেথড আছে যেগুলো দিয়ে এইচটিএমএল এলিমেন্ট এবং এট্রিবিউটকে খুব সহজেই এক্সেস এবং পরিচালনা করা যায়। জেকুয়েরির সবচেয়ে গুরুত্বপূর্ণ অংশ হচ্ছে জেকুয়েরি ডোম পরিচালনা করা।

DOM = Document Object Model

এইচটিএমএল এবং এক্সএমএল(XML) ডকুমেন্টেকে এক্সেস করার জন্য DOM স্ট্যান্ডার্ড নির্ধারণ করে। "W3C Document Object Model (DOM) হলো একটি প্লাটফর্ম এবং ভাষা স্বাধীন(language-neutral) ইন্টারফেস যা প্রোগ্রাম বা স্ক্রিপ্টকে ডকুমেন্টে ডায়নামিকভাবে এক্সেস করার সম্মতি দেয় এবং কন্টেন্ট, স্ট্রাকচার ও স্টাইলকে আপডেট করার সুযোগ দেয়।"


text(), html() এবং val() মেথড

এই তিনটি মেথড খুবই সহজ এবং এইচটিএমএল ডোম পরিচালনার(manipulate) ক্ষেত্রে অনেক গুরুত্বপূর্ণ ভূমিকা রাখে।
text() - নির্বাচিত এলিমেন্টের টেক্সট কন্টেন্ট সেট/রিটার্ন করে।
html() -নির্বাচিত এলিমেন্টের মার্কআপসহ কন্টেন্ট সেট/রিটার্ন করে।
val() - নির্বাচিত ফর্ম এলিমেন্টের ভ্যালু সেট/রিটার্ন করে।

নিচের উদাহরণে text() এবং html() মেথডের মাধ্যমে কিভাবে এইচটিএমএল এলিমেন্টের কন্টেন্ট পাওয়া যায় তা দেখানো হয়েছে:

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title>জেকুইরি উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#try").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#try").html());
});
});
</script>
</head>
<body>
<p id="try">প্যারাগ্রাফের কিছু <b>bold</b> টেক্সট।</p>
<button id="btn1">শো টেক্সট</button>
<button id="btn2">শো এইচটিএমএল</button>
</body>
</html>

নিচের উদাহরণে val() মেথডের মাধ্যমে কিভাবে এইচটিএমএল ফর্ম এলিমেন্ট এর ইনপুট ফিল্ড এর ভ্যালু পাওয়া যায় তা দেখানো হয়ছে:

উদাহরণ দেখুন

<!DOCTYPE html>
<html>
<head>
<title>জেকুইরি উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("ভ্যালু: " + $("#try").val());
});
});
</script>
</head>
<body>
<p>নাম: <input type="text" id="try" value="আজিজুর রহমান"></p>
<button>ভ্যালু প্রদর্শন করুন</button>
</body>
</html>



attr() মেথড

জেকুয়েরি attr() মেথডের মাধ্যমে এট্রিবিউটের ভ্যালু পাওয়া যায়। নিচের উদাহরণে attr() মেথডের মাধ্যমে কিভাবে href এট্রিবিউটের ভ্যালু পাওয়া যায় তা দেখানো হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জেকুইরি উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#satt").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="../index.php" id="satt">websschool.com</a></p>
<button>href এর ভ্যালু প্রদর্শন</button>
</body>
</html>







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.