آموزش JQuery – انتخاب المان ها ( عناصر ) صفحه

  • 1390/3/11
  • مهرداد شکری نسب
  • 5

سلام
همانطور که می دانید زبان JQuery ( که البته کتابخانه ای تحت زبان JavaScript است ) برای اعمال تغییرات در صفحه نیازمند عناصری در صفحه است . یعنی باید عنصری مانند DIV ، Table یا … خاصی به آن معرفی شود تا در آن اعمال تغییر نماید . برای مثل ، وقتی شما می خواهید پشت زمینه یک DIV خاص را تغییر رنگ دهید ، باید به آن ، یک id داده ( یا class ) و سپس با معرفی آن id یا class به JQuery شروع به اعمال تغییرات نمایید.

اجازه دهید همین ابتدا این نکته را ذکر کنم که شما هم می توانید چند عنصر را با هم تغییر دهید و هم می توانید تنها یک عنصر را تغییر دهید . مثلا ، می توانید به چند div مختلف در سراسر صفحه خود ، مقدار “class=”myclass اختصاص بدهید . سپس با معرفی مقدار myclass به jquery ( که نحوه چگونگی معرفی آن را در این آموزش عرض خواهم کرد ) می توانید تغییرات مورد نیاز را به همه div ها اعمال کنید .

حال با اولین دستورات و مثال برای هر دستور ، شروع می کنیم :

1. با استفاده از دستور All Selector می توانید همه ی عناصر صفحه را انتخاب کنید . برای وضوح بهتر ، ارائه یک مثال بهترین راه حل است.
پیش از شروع مثال ، باید عرض کنم که ، در JQuery می توانید با انتخاب یک عنصر ، CSS آن را ویرایش کنید . به صورت زیر :

$(“#myid”).css(“border”,”3px solid red”);

در کد زیر ، حاشیه ی عنصر موجود در صفحه با id برابر myid ، اندازه ی آن 3 پیکسل شده ، طرح آن solid و رنگ آن red خواهد شد .

حال به کدی می پردازیم که با آن می توانیم همه عنصار صفحه را انتخاب کنیم ( یعنی به JQury معرفی کنیم ) :

<html>
<head>
<style>
h3 { margin: 0 ; }
div , span , p {    width: 80 px ;    height: 40 px ;    float : left ;    padding: 10 px ;    margin: 10 px ;    background-color: #EEEEEE ;  }
</style>
<script src=”http://code.jquery.com/jquery-latest.js” > </script>
</head>
<body>
<div> DIV </div>

<span> SPAN </span>
<p> P <button> Button </button> </p>
<script>
$(“*”).css(“border”,”3px solid red”).length;
</script>
</body>
</html>

در مثال بالا ، همه عناصر صفحه ، اعم از DIV ها ، Span ، P و … همگی دارای استایل Border : 3px solid red یعنی حاشیه 3 پیکسل ، رنگ قرمز و خط ممتد می شود .

حال به کد زیر توجه کنید :
فرض کنید یک div دارید که “id=”myid است و درون آن div چندین و چند المان ( عنصر ) دیگر مانند span  ، p و … وجود دارد . برای اینکه همه عناصر موجود در div ذکر شده ، به صورت زیر عمل می کنیم :

<html>
<head>
<style>
h3 { margin: 0; }
div , span , p {
width: 80 px ;
height: 40 px ;
float: left ;
padding: 10 px ;
margin: 10 px ;
background-color: #EEEEEE;
}
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<div id=”test”>
<div>   DIV   </div>
<span> SPAN </span>
<p> P
<button> Button </button>
</p>
</div>
<script>$(“#test”).find(“*”).css(“border”,”3px solid red”) ;</script>

</body>
</html>

در کد بالا ، در قسمت کد JQuery ، جی کوئری به دنبال id=test می گردد . پس از پیدا کردن آن همه ی عناصر موجود در آن را پیدا می کند ( دستور (“*”)find ) و سپس دستور css را اجرا می کند.

توجه : می توانید همه مثال های بالا را در یک کد html ذخیره و بدون اعمال هیچ تغییری مشاهده نمایید .

2. می توانید عناصری را که در صفحه در حال اجرای دستور animate ( یا به کل دستوراتی که عناصر را متحرک می سازند مثل slide یا slidetoggle یا … ) هستند توسط JQuery ویرایش کنید ; با استفاده از دستور element:animated . به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<style>
div {
background:yellow;
border:1px solid #AAA;
width: 80 px ;
height: 80 px ;
margin: 0 5 px ;
float: left;
}
div.colored { background:green; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js” ></script>
</head>
<body>
<button id=”run” > Run </button>
<div>
</div>
<div id=”mover”> </div>  <div> </div>
<script>
$(“#run”).click(function(){      $(“div:animated”).toggleClass(“colored”);    });
function animateIt() {
$(“#mover”).slideToggle(“slow”, animateIt);
}
animateIt();
</script>
</body>
</html>

در مثال بالا ، تابعی با نام animateIt ایجاد کرده ایم .در کد ، div وجود دارد که همواره در حال حرکت و جا به جایی است . این div هنگامی که روی کلید RUN کلیک می شود کد $(“div:animated”).toggleClass(“colored”); اجرا می شود . این کد به دنبال div می گردد که به در حال حرکت است ( animated ) ( در واقع می تواند به دنبال هر عنصر دیگری نیز بگردد ) . سپس toggleClass می کند . یعنی class آن div را ویرایش می کند و به “class=”colored تبدیل می شود .
توجه : خاصیت toggle ها در JQuery به صورتی است که مثلا اگر دوبار روی کلیدی کلیک شود ، تغییر اعمال شده به حالت اولیه بر می گردد. مثلا در مثال فوق ، با کلیک اول کلاس DIV دچار تغییر می شود و با کلیک دوم به حالت قبلی بر می گردد. برای راحت تر شدن کار ، مثال را در فایلی ذخیره و خود مشاهده کنید .

3. اعمال تغییرات در عنصری که دارای ویژگی هایی مشخص است : فرض کنید در صفحه دو لینک ( پیوند ) داریم ( تگ <a> ) که هر کدام دارای یک hreflang متفاوت است . یکی دارای “hreflang=”en و دیگری دارای “hreflang=”en-UK . حال برای اینکه بتوانید تگ <a> را که دارای “hreflang=”en است بخواهیم ویرایش کنیم چه باید کرد ؟ به کد زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<a href=”example.html” hreflang=”en”> Some text </a>
<a href=”example.html” hreflang=”en-UK”> Some other text </a>
<script> $(‘a[hreflang|=”en”]’).css(‘border’,’3px dotted green’); </script>
</body>
</html>

در مثالی که بیان شد ، کد $(‘a[hreflang|=”en”]’).css(‘border’,’3px dotted green’); به دنبال تگ <a> می گردد که hreflang آن برابر en باشد . سپس استایل آن را ویرایش می کند .

4. حال فرض کنید در مثال قبل ، بخواهید به دنبال عناصری بگردید که مثلا name آن ها دارای عبارت man باشد . به کد زیر توجه نمایید :

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js” >
</script>
</head>
<body>
<input name=”man-news” />
<input name=”milkman” />
<input name=”letterman2″ />
<input name=”newmilk” />
<script> $(‘input[name*=”man”]’).val(‘has man in it!’);
</script>
</body>
</html>

در کد بالا اگر دقت نمایید متوجه الگوریتم خواهید شد . در مثال بالا ، جی کوئری به دنبال عنصر input در صفحه می گردد که name آن دارای عبارت man باشد . در مثال بالا هر سه input اول مقدارشات has man in it می شود اما input شامل این معرفی نخواهد شد .

5. حال اگر فقط بخواهید به دنبال عنصری بگردید که در name آن دقیقا عبارت man ذکر شده باشد ( یعنی man متعلق به کلمه دیگری نباشد . مثلا man در عبارت many مورد نظر ما نیست ) باید به صورت ~name عمل کنیم ، مانند کد زیر :

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js” >
</script>
</head>
<body>
<input name=”man-news” />
<input name=”milk man” />
<input name=”letterman2″ />
<input name=”newmilk” />
<script> $(‘input[name~=”man”]’).val(‘mr. man is in it!!’);
</script>
</body>
</html>

در کد بالا ، تنها input دوم مقدار آن تغییر می کند . چون تنها input دوم در name آن عبارت man را جداگانه دارد .

6. فرض بر آن داشته باشیم که بخواهیم به دنبال عناصری بگردیم که برای مثال آخر آن با letter اتمام یابد . کد زیر را توجه نمایید :

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<input name=”newsletter” />
<input name=”milkman” />
<input name=”jobletter” />
<script> $(‘input[name$=”letter”]’).val(‘a letter’); </script>
</body>
</html>

در مثال بالا ، دو input اول و سوم دچار تغییر خواهند شد .

7. به طور خلاصه عرض کنم که اگر به جای مقادیر name*=”” یا name~=”” و … تنها مقدار name=”” قرار دهیم ، جی کوئری به دنبال عناصری در صفحه خواهد بود که name آن دقیقا برابر مقدار مورد دلخواه ما باشد . پس برای خلاصه کردن آموزش از نوشتن مثال خودداری می کنیم .

8. همچنین فرض کنید که می خواهیم به دنبال عناصری در صفحه باشیم که مقدار name آن ها برابر مقدار خاصی نباشد . که آن را به صورت name!=”” می نویسیم .

9. و نهایتا برای عناصری که نام آن ها با مقدار خاصی شروع می شود از name^=”” استفاده می کنیم .

به طور کلی :

name= “Value”        => برای عناصری که نام آنها دقیقا برابر مقدرای باشد
name*= “Value”      => برای عناصری که نام آن ها دارای عبارت خاصی باشد
name~= “Value”      => برای عناصری که نام آن دقیقا شامل عبارت خاصی باشد
name$= “Value”       => برای عناصری که نام آن ها با مقدار خاصی پایان یابد
name!= “Value”        => برای عناصری که مخالف نام خاصی باشد
name^= “Value”       => برای عناصری که نام آن ها با مقدار خاصی شروع می شود

توضیحات بسیاری در باب روش های مختلف انتخاب عناصر هنوز مانده است که فعلا به چند تا از آنان اشاره می کنیم و بقیه را برای جلسات بعدی خواهیم گذاشت .

10. ایجاد تغییر در Button ها . تصور کنید فرمی ایجاد کرده اید که در آن یک تگ <button> و یک input داریم که مقدار type آن input برابر button است . یعنی نوع آن button است . فرض کنید قصد دارید آن ها را ویرایش کنید . می تواند با استفاده از button: دچار تغییر نمایید . به کد زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js” ></script>
</head>
<body>
<form>
<input type=”button” value=”Input Button” />
<button> Button </button>
</form>
<script> $(“:button”).css({background:”yellow”, border:”3px red solid”}); </script>
</body>
</html>

در مثال فوق ، هم input که دارای “type = “button است و هم تگ button دچار تغییر می شود .

11. به طور خلاصه عرض کنم ( تنها به علت طولانی شدن آموزش ، و اینکه دیگه واقعا دارم خستتون می کنم قصد دارم آموزش رو چند بخشی کنم )  برای اینکه همه ی check box ها یا یک check box که انتخاب شده ( checked ) را دچار تغییر کنیم به ترتیب به صورت input : checkbox و input : checked آن ها را انتخاب می کنیم . برای مثال آخر ، کد های زیر را مورد لطف قرار داده و آن ها را در یک کد HTML ذخیره و آزمایش کنید :

<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:25px; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js” > </script>
</head>
<body>
<form>
<input type=”button” value=”Input Button”/>
<input type=”checkbox” />
<input type=”checkbox” />
<input type=”file” />
<input type=”hidden” />
<input type=”image” />
<input type=”password” />
<input type=”radio” />
<input type=”reset” />
<input type=”submit” />
<input type=”text” />
<select> <option> Option <option/> </select>
<textarea> </textarea>
<button> Button </button>
</form>

<div>
</div>
<script>
var input = $(“form input:checkbox”).wrap(‘<span></span>’).parent().css({background:”yellow”, border:”3px red solid”});
$(“div”).text(“For this type jQuery found ” + input.length + “.”).css(“color”, “red”);
$(“form”).submit(function () { return false; }); // so it won’t submit
</script>
</body>
</html>

==========================================================

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js” ></script>
</head>
<body>
<form>
<p>
<input type=”checkbox” name=”newsletter” checked=”checked” value=”Hourly” />
<input type=”checkbox” name=”newsletter” value=”Daily” />
<input type=”checkbox” name=”newsletter” value=”Weekly” />
<input type=”checkbox” name=”newsletter” checked=”checked” value=”Monthly” />
<input type=”checkbox” name=”newsletter” value=”Yearly” />
</p>
</form>
<div>
</div>
<script>
function countChecked() {
var n = $(“input:checked”).length;
$(“div”).text(n + (n <= 1 ? ” is” : ” are”) + ” checked!”);
}
countChecked();
$(“:checkbox”).click(countChecked);
</script>
</body>
</html>

باور بفرمایید بسیار علاقمند هستم که آموزش رو تا انتها ادامه بدم و همه رو همین جا و یک جا عرض کنم اما به علت زیاد بودن امکانات جی کوئری ، به واقع یک جلسه ، حجم عظیم این آموزش رو نمی تونه بپذیره .

پس آموزش امروز ما رو داشته باشید تا با آموزش های بعدی در خدمتتون باشیم.

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 5 دیدگاه

  4. نمیشد این همه زحمت رو بدونه تشکر گذاشت
    ممنون از این همه وقتی که گذاشتید

    پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *