نمادها

شما اینجا هستید

آموزش زیر مجموعه در جیکوئری (Descendants)

امروز در خدمت شما هستیم با آموزش زیر مجموعه در جیکوئری (Descendants).

آموزش زیر مجموعه در جیکوئری (Descendants) رابطه والد و فرزندی در جیکوئری را به شما یاد می دهد.
سلام برنامه به شما یاد می دهد که چطور با Descendants بتوانید به راحتی به فرزندان والد استایل دهید.
با دو دستور children و find می توان المان ها را از هم تفکیک کرد و اعمال خاص مثل استایل دهی انجام داد.

 

دستور children فرزندان یک والد را شناسایی می کند.دستور find به صورت مستقیم خود المان را انتخاب می کند.

اگر بخواهیم یک مثال ساده برای شما بزنیم قطعه کد زیر مثال خوبیست

<!DOCTYPE html>
<html>
<head>
<style>
.descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").children().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
    <span>span (grandchild)</span>   
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p> 
</div>

</body>
</html>

در قطعه کد بالا ما جداولی تعریف کردیم که در شکل زیر میتوانید ببینید

آموزش زیر مجموعه در جیکوئری (Descendants)

تگ های p در داخل تگ div قرار دارند یا به عبارتی فرزند (children) آن محسوب می شوند.
در کد ما گفتیم که تمام فرزندان div حاشیه ۲ پیکسلی به رنگ قرمز بگیرند.

 

و اگر بخواهیم برای دستور find مثالی بزنبم قطعه کد زیر میتواند مناسب باشد.

<!DOCTYPE html>
<html>
<head>
<style>
.descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
    <span>span (grandchild)</span>   
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p> 
</div>

</body>
</html>

اگر قطعه کد بالا را اجرا کنید به خروجی مانند تصویر زیر می رسید.

آموزش زیر مجموعه در جیکوئری
ما در این کد گفته ایم که تگ های span که داخل تگ div قرار دارند را پیدا کن.
استایل حاشیه ۲ پیکسلی به رنگ قرمز همراه با رنگ متن قرمز به آنها اختصاص بده.

 

پس اگر بخواهیم به صورت کلی موضوع را برسی کنیم دستور children به شما امکان میدهد که دستوراتی را روی زیر مجموعه ها انجام دهید.
و دستور find به شما این امکان را میدهد که موردی از زیر مجموعه را انتخاب کرده و اعمالی را روی آن پیاده کنید.
لازم به ذکر است که از این دستورات علاوه بر اجرای دستورات CSS برای موارد دیگر نیز می شود استفاده کرد.

از آنجایی که این آموزش تصویری است از توضیحات اضافه پرهیز می کنیم

شما می توانید ویدیو این آموزش را همراه با سورس کد آن از باکس دانلود موجود در زیر همین پست دریافت نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش زیر مجموعه در جیکوئری (Descendants) و سورس کد ها : نوع فایل:rar/video/code حجم فایل:16.10 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

دیدگاهتان را بنویسید

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.