القائمة الرئيسية

الصفحات

jQuery - أساليب محددات CSS

تدعم مكتبة jQuery تقريبًا جميع المحددات المضمنة في مواصفات ورقة الأنماط المتتالية (CSS) من 1 إلى 3 ، كما هو موضح في موقع World Wide Web Consortium. باستخدام مطوري مكتبة JQuery ، يمكنهم تحسين مواقعهم على الويب دون القلق بشأن المتصفحات وإصداراتها طالما تم تمكين JavaScript في المتصفحات. لا تقوم معظم أساليب JQuery CSS بتعديل محتوى كائن jQuery ويتم استخدامها لتطبيق خصائص CSS على عناصر DOM. تطبيق خصائص CSS هذا بسيط جدًا لتطبيق أي خاصية CSS باستخدام طريقة JQuery css (PropertyName ، PropertyValue). هنا صيغة الطريقة -

selector.css( PropertyName, PropertyValue );

هنا يمكنك تمرير PropertyName كسلسلة javascript وبناءً على قيمتها ، يمكن أن تكون PropertyValue عبارة عن سلسلة أو عدد صحيح. المثال التالي هو مثال يضيف لون الخط إلى عنصر القائمة الثاني.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

تطبيق خصائص CSS متعددة يمكنك تطبيق خصائص CSS متعددة باستخدام أسلوب JQuery واحد CSS ({key1: val1، key2: val2 ....). يمكنك تطبيق العديد من الخصائص كما تريد في مكالمة واحدة. هنا صيغة الطريقة -

selector.css( {key1:val1, key2:val2....keyN:valN})

هنا يمكنك تمرير المفتاح كممتلكات وقيمة كقيمة كما هو موضح أعلاه. المثال التالي هو مثال يضيف لون الخط ولون الخلفية إلى عنصر القائمة الثاني.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

ضبط عرض العنصر وارتفاعه يمكن استخدام طريقة العرض (val) والارتفاع (val) لضبط العرض والارتفاع على التوالي لأي عنصر. المثال التالي هو مثال بسيط يحدد عرض عنصر القسمة الأول حيث يتم تعيين عرض باقي العناصر بواسطة ورقة الأنماط

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

JQuery CSS Methods

Following table lists down all the methods which you can use to play with CSS properties −

Sr.No.Method & Description
1css( name )

Return a style property on the first matched element.

2css( name, value )

Set a single style property to a value on all matched elements.

3css( properties )

Set a key/value object as style properties to all matched elements.

4height( val )

Set the CSS height of every matched element.

5height( )

Get the current computed, pixel, height of the first matched element.

6innerHeight( )

Gets the inner height (excludes the border and includes the padding) for the first matched element.

7innerWidth( )

Gets the inner width (excludes the border and includes the padding) for the first matched element.

8offset( )

Get the current offset of the first matched element, in pixels, relative to the document.

9offsetParent( )

Returns a jQuery collection with the positioned parent of the first matched element.

10outerHeight( [margin] )

Gets the outer height (includes the border and padding by default) for the first matched element.

11outerWidth( [margin] )

Get the outer width (includes the border and padding by default) for the first matched element.

12position( )

Gets the top and left position of an element relative to its offset parent.

13scrollLeft( val )

When a value is passed in, the scroll left offset is set to that value on all matched elements.

14scrollLeft( )

Gets the scroll left offset of the first matched element.

15scrollTop( val )

When a value is passed in, the scroll top offset is set to that value on all matched elements.

16scrollTop( )

Gets the scroll top offset of the first matched element.

17width( val )

Set the CSS width of every matched element.

18width( )

Get the current computed, pixel, width of the first matched element.

هل اعجبك الموضوع :

تعليقات