0
آموزش jquery قسمت هشتم کار با CSS Content
آموزش jquery قسمت هشتم کار با CSS Content
در قسمت هشتم از آموزش jquery به مفهوم CSS Content در jquery می پردازیم.
در مثال زیر css های که تعریف کردیم در یک متغییر var قرار دادیم و سپس به تگ های p توسط دستور css اعمال کردیم.
نکته:
در متغییر var هر نوع داده ای (عددی،رشته ای و...) را می توان قرار داد.
<!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 () {
var cssObj = { 'boder': 'thin solid Red', 'background-color': 'Yellow' };
$("p").css(cssObj);
});
</script>
</head>
<body>
<p>iranganj 1</p>
<p>iranganj 2</p>
<p>iranganj 3</p>
</body>
</html>
با استفاده از addClass می توان یک کلاس را برای تگ های موجود در صفحه اضافه کرد.
در مثال زیر یک کلاس به نام red توسط css تعریف کردیم. و سپس توسط addClass در jquery این کلاس را به تگ های p اعمال کردیم.
<!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").addClass("red");
});
</script>
<style type="text/css">
.red {
color: red;
font-size: 17px;
}
</style>
</head>
<body>
<p>iranganj 1</p>
<p>iranganj 2</p>
<p>iranganj 3</p>
</body>
</html>
از دستور hasClass برای بررسی بودن یک کلاس استفاده می شود.
در مثال زیر توسط دستور hasClass بودن کلاس blue را بررسی کردیم این متد در صورت صحیح بود (یعنی کلاس blue وجود داشته باشد) true بر می گرداند در غیر این صورت false بر می گرداند که در اینجا توسط متد alert نمایش دادیم.
همچنین برای حذف کلاس از دستور removeClass استقاده می کنیم، که می توانیم یک کلاس را از عناصر حذف کنیم.
<!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 () {
alert($("p").hasClass("blue"));
$("p").removeClass("blue");
});
</script>
<style type="text/css">
.blue {
color: blue;
font-size: 17px;
}
</style>
</head>
<body>
<p class="blue">iranganj 1</p>
<p>iranganj 2</p>
<p>iranganj 3</p>
</body>
</html>
در مثال زیر مشخصات یک تگ را مورد بررسی قرار دادیم.
در مثال زیر یک تگ div تعریف کردیم و سپس توسط css طول، عرض و... را تغییر دادیم. برای اینکه بتواینم مشخصات یک تگ را نمایش دهیم. کافیست تگ مورد نظر را انتخاب کرده و سپس توسط دستوراتی مانند()width برای بدست آوردن عرض تگ و از ()height برای به دست آوردن طول تگ و ... استفاده کنیم.
<!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 () {
$("#width").html($("#theDiv").width());
$("#height").html($("#theDiv").height());
$("#innweHeight").html($("#theDiv").innerHeight());
$("#innerWidth").html($("#theDiv").innerWidth());
$("#outerHeight").html($("#theDiv").outerHeight());
$("#OuterWidth").html($("#theDiv").outerWidth());
$("#offset").html($("#theDiv").offse().top + "," + $("#theDiv").offse().left);
$("#position").html($("#theDiv").position().top + "," + $("#theDiv").position().left);
});
</script>
<style type="text/css">
div#theDiv {
width: 150px;
height: 120px;
background-color: blue;
border: 2px solid blueviolet;
margin: 10px;
padding: 15px;
}
</style>
</head>
<body>
<div id="theDiv"></div>
<p id="width"></p>
<p id="height"></p>
<p id="innweHeight"></p>
<p id="innerWidth"></p>
<p id="outerHeight"></p>
<p id="OuterWidth"></p>
<p id="offset"></p>
<p id="position"></p>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال