0
آموزش jquery قسمت دوم کار با selector ها
آموزش jquery قسمت دوم کار با selector ها
در این قسمت از آموزش jquery به بحث selector ها یا انتخاب کننده ها در jquery می پردازیم.
در قسمت قبل گفته شد که اساس کار jquery با انتخاب عناصر آغاز می شود. در این قسمت مکانیزم های انتخاب عناصر در jquery را معرفی خواهیم کرد. این انتخاب کننده ها به ما اجازه انتخاب تگ و عناصر DOM را به ما می دهند. به یاد داشته باشید که خروجی اغلب این انتخاب کننده ها آرایه ای از اشیا jquery میباشد که طول آن ممکن است صفر، یک و یا بیشتر باشد.
انتخاب عناصر با نام تگ
درکد زیر تمام تگ های p را انتخاب کردیم و یک css به آن اعمال کردیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").css("border", "thin solid #ff0000");
});
</script>
</head>
<body>
<p>iranganj</p>
<p>iranganj</p>
</body>
</html>
در کد زیر با استفاده از ویرگول چندین تگ را می توانیم انتخاب کنیم. همچنین می توانیم دو css به تگ ها اعمال کنیم
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p,h5").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<p>iranganj</p>
<p>iranganj</p>
<h5>iranganj</h5>
</body>
</html>
انتخاب عناصر صفحه با ID و Name
در کد زیر با استفاده از کارکتر # یک عنصر را با استفاده از ID انتخاب کردیم.
برای انتخاب عناصر با نامی که برای آنها در نظر گرفتیم داخل براکت از کلمه نام و سپس یک مساوی و نام مورد نظر را می نویسیم و با نوشتن تگ عنصر پشت براکت فقط عناصری که نام آنها با نام مورد نظر یکسان باشد و همچنین تگی که پشت براکت مشخص کردیم برابر باشد را انتخاب می کند.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#site").css("border", "thin solid #ff0000").css("font-size", "50px");
$("[name=site1]").css("border", "thin solid #ff0000").css("font-size", "50px");
$("b[name=site2]").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<p id="site">iranganj 1</p>
<p>iranganj 2</p>
<p name="site1">iranganj 3</p>
<b name="site2">iranganj 3</b>
</body>
</html>
انتخاب همه عناصر
در کد زیر با استفاده از کاراکتر ستاره تمام عناصر صفحه را می توانیم انتخاب می کنیم. مانند : تمام تگ ها ، body و هر چیزی که داخل صفحه قرار دارد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("*").css("border", "thin solid #ff0000");
});
</script>
</head>
<body>
<p>iranganj</p>
</body>
</html>
انتخاب با نام کلاس
برای انتخاب عناصر با نام کلاس کافیست از یک نقطه و سپس نام کلاس را نوشته تا عناصر مورد نظر را انتخاب کنید.
همچنین برای انتخاب کلاس خاص مثلا ul li.c با این روش فقط قسمتی صفحه را انتخاب می کند که ابتدا یک ul و سپس یک li داشته باشید که نام کلاس آن c باشد. در این صورت تگ p که کلاس c دارد را انتخاب نمی کند.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".a").css("border", "thin solid #ff0000").css("font-size", "50px");
$("ul li.c").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<ul>
<li class="a">iranganj 1</li>
<li class="b">iranganj 2</li>
<li class="f">iranganj 3</li>
<li class="c">iranganj 4</li>
<li class="b">iranganj 5</li>
<li class="c">iranganj 5</li>
</ul>
<p class="c">iranganj 6</p>
</body>
</html>
انتخاب یک عنصر بعد از یک تگ خاص
در کد زیر ul + p یعنی اولین تگ p که بعد از ul قرار دارد را انتخاب کن
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul + p").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<ul>
<li>iranganj 1</li>
<li>iranganj 2</li>
<li>iranganj 3</li>
</ul>
<p>iranganj</p>
<p>iranganj</p>
<p>iranganj</p>
<p>iranganj</p>
</body>
</html>
انتخاب تمام عناصر بعد از یک تگ خاص
در کد زیر ul ~ p یعنی تمام تگ های p که بعد از ul قرار دارد را انتخاب کن
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul ~ p").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<ul>
<li>iranganj 1</li>
<li>iranganj 2</li>
<li>iranganj 3</li>
</ul>
<p>iranganj</p>
<p>iranganj</p>
<p>iranganj</p>
<p>iranganj</p>
<b>iranganj</b>
</body>
</html>
انتخاب عناصری که دو کلاس دارند
برای این که به یک تگ یک یا بیشتر کلاس اعمال کنیم از یک فاصله استفاده می کنیم و نام کلاس بعدی را می نویسیم.
برای انتخاب چنین عناصری کافیست از یک نقطه بعد نام کلاس اولی قرار داده و نام کلاس دومی را نوشته، در این صورت فقط عناصری را انتخاب می کند که دو یا بیشتر کلاس مورد نظر را داشته باشد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".a.b").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<ul>
<li class="a">iranganj 1</li>
<li class="b">iranganj 2</li>
<li class="ab">iranganj 3</li>
<li class="a b">iranganj 4</li>
<li class="a">iranganj 5</li>
<li class="b">iranganj 6</li>
</ul>
</body>
</html>
انتخاب تگ های ریشه
برای این که بخواهیم یک تگ را داخل ریشه باشد را انتخاب کنیم یعنی اولین تگ داخل یک تگ را انتخاب کنیم از یک علامت بزرگتر به صورت زیر استفاده می کنیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// تگی را انخاب می کند که در ریشه باشد
$("p>a").css("border", "thin solid #ff0000").css("font-size", "50px");
});
</script>
</head>
<body>
<p>
<a href="http://iranganj.ir">iranganj</a>
</p>
<p>
<span>
<a href="http://iranganj.ir">iranganj</a>
</span>
</p>
<p>
<a href="http://iranganj.ir">iranganj</a>
<br />
<span>iranganj</span>
</p>
<p>
<span>
<a href="http://iranganj.ir">iranganj</a>
</span>
</p>
<p>
<span>iranganj</span>
<br />
<a href="http://iranganj.ir">iranganj</a>
</p>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال