এট্রিবিউট সিলেক্টর গুলি নিয়ে একটি ছোট project

নিচের project টি মূলত এট্রিবিউট সিলেক্টর গুলি ভালবাবে বুঝার সহায়তা করবে। এতে লক্ষ্য করে দেখুন, যে Button টিতে click করা হচ্ছে ঐ Button সংস্লিষ্ট element টিতে লাল রঙের একটি border সৃষ্টি হচ্ছে।
Project এর বর্ননা : যখন button element এ ক্লিক করা হচ্ছে তখন ঐ button এর উপরে যে text আছে তা str নামক veriable এ $(this).text() এর মাধ্যমে সংরক্ষন করা হয়েছে। এখানে $(this) current attribute কে নির্দেশ করে। পরবর্তী লাইন [$('a').css("border", "0px solid #000000")] দ্বারা সকল anchor element এর border color reset করা হয়েছে। এর পর যে element টি Button সংস্লিষ্ট selector কে match করবে তাতে border তৈরি হবে $(str).css("border", "1px solid #ff0000") এই লাইনটি দ্বারা।

project Code :

<html>
<head>
<title>jQuery attribute selector example</title>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<style type="text/css">
    div, a{
        padding:16px;
    }
 
    #msg{
        padding:8px;
        hright:100px;
    }
</style>
</head>
 
<body>
 
<h1>jQuery attribute selector example</h1>
 
<div id="msg"></div>
 
<div>
    <a rel="nofollow" href="http://www.google.com" lang="en-US">
    Google - &lt;a rel="nofollow" href="http://www.google.com" lang="en-US"&gt;
    </a>
</div>
 
<div>
    <a href="http://www.yahoo.com" lang="en">
     Yahoo - &lt;a href="http://www.yahoo.com" lang="en" &gt;
    </a>
</div>
 
<div>
    <a href="http://www.abc-yahoo.com" lang="-en">
     Yahoo - &lt;a href="http://www.abc-yahoo.com" lang="-en"&gt;
    </a>
</div>
 
<div class="Hello-jQuery">
    class = "Hello-jQuery"
</div>
 
<div class="Hello jQuery">
    class = "Hello jQuery"
</div>
 
<div class="HellojQuery">
    class = "HellojQuery"
</div>
 
<br/><br/>
<button title="Has Attribute Selector">a[rel]</button>
<button title="Attribute Equals Selector">a[rel=nofollow]</button>
<button title="Attribute Not Equal Selector">a[rel!=nofollow]</button>
<button title="Attribute Starts With Selector">a[rel^=nof]</button>
<button title="Attribute Ends With Selector">a[rel$=low]</button>
 
<button title="Attribute Contains Selector">a[href*='yahoo.com']</button>
<button title="Attribute Contains Prefix Selector">a[lang|=en]</button>
<button title="Attribute Contains Word Selector">div[class~=jQuery]</button>
 
<button id="reset">Reset It</button>
 
<script type="text/javascript">
    $("button").click(function () {
 
      var str = $(this).text();    
      $('a').css("border", "0px solid #000000");
      $(str).css("border", "1px solid #ff0000");
      $('#msg').html("<h4>Attribute Selector : " + str + "</h4>");
    });
 
    $("#reset").click(function () {
      location.reload();
    });
 
</script>
 
</body>
</html>

Demo:

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।