آموزش jquery قسمت هشتم کار با CSS Content
0 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>

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب فیلم آموزشی
تاریخ انتشار ۲۶ اردیبهشت ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha