متدهای children و find در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی متدهای children و find در جی کوئری

دانلود فیلم و آموزش ویدئویی متدهای children و find در جی کوئری . در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری از تاپ سایت 98 قصد داریم به آموزش متدهای children و find در جی کوئری بپردازیم. با ذکر چندین مثال متدها و دستورات را یاد خواهید گرفت.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

متد children در جی کوئری

با جی کوئری می توانید درخت DOM را پیمایش کنید تا فرزندان یک عنصر را پیدا کنید.

با متد children در جی کوئری می توانید فرزندان عنصر را پیدا کنید.

در مثال زیر ما تمامی فرزندان div را انتخاب کرده و استایل آنها را تغییر می دهیم.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children().css({"color": "red", "border": "3px solid red"}); });
</script>
</head>
<body>

<div>
<h1>topsite98.com</h1>
<ul>
<li><b>ali</b></li>
<li style="border: 1px solid blue"><span>reza</span></li>
</ul>
<p>pppp 111</p>
<p>ppp 2222</p>
</div>
</body>
</html>

متد find در جی کوئری

با متد find در جی کوئری می توانیم عنصر خاصی را پیدا کنیم.

در مثال زیر عنصر span را پیدا کرده و استایل آن را تغییر می دهیم.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("span").css({"color": "red", "border": "3px solid red"});
});
</script>
</head>
<body>

<div>
<h1>topsite98.com</h1>
<ul>
<li><b>ali</b></li>
<li style="border: 1px solid blue"><span>reza</span></li>
</ul>
<p>pppp 111</p>
<p>ppp 2222</p>
</div>
</body>
</html>

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

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

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید