Jquery学习六---Jquery对于css的支持

 

Jquery对css技术的支持主要是两个方面：第一就是jquery完善而强大的选择器支持，jquery的选择器可以轻松准确的选择页面上的元素和结构。第二是jquery定义了几个非常强大的css方法，使用这些方法就可以很轻松方便快捷的定义页面上元素的样式，从而控制页面上元素的显示。

 

1.       css()方法。

css(name)可以读写元素的样式，获取指定属性的属性值。注意，其仅能够获取所有匹配元素中第一个元素的指定属性的属性值，且仅能读取行内样式的属性值，对于内部或者外部的样式不能够访问。

例子：

        <div id="div" style="color:#990000; border:solid 1px red; font-family:'新宋体';">这是一个div</div>

<p style="color:#330099; border:solid 1px red; font-size:10px; font-family:Arial, Helvetica, sans-serif">这是一个段落</p>

<script language="javascript" type="text/javascript">

        alert($("div").css("font-family"));

</script>

 

则：

 

2.       css(name,value)方法

使用这个方法可以为元素定义样式，name是属性名，value是属性值。注意：属性名和属性值都是要以字符串的形式出现的。另外属性名不要使用dom中style定义的属性名，使用css中定义的属性名。

例子：

     

  <div id="div" style=" font-family:'新宋体';">这是一个div</div>

       

       <script language="javascript" type="text/javascript">

              $("#div").css("color","blue");

       </script>

       则：

 

也可以使用名：值对的方式来为css()方法传递多个属性和属性值，从而实现在一个方法内定义多种样式。

       例子：

    

   <div id="div" style=" font-family:'新宋体';">这是一个div</div>

       

       <script language="javascript" type="text/javascript">

              $("#div").css({

                     "color":"blue",

                     "font-size":"36px",

                     "font-weight":"600"});

       </script>

       则：

 

 

3.       offset()方法。

该方法能够返回所有匹配元素中第一个元素在当前窗口的坐标，该坐标是以左上角作为参考原点的。注意：该方法返回的是一个jquery对象，该对象包括top和left两个属性，分别代表此元素与顶部和左边的距离。是以像素为单位。

例子：

<p>段落1</p>

<p id="p2">段落2</p>

<script type="text/javascript" language="javascript">

var offset = $("#p2").offset();

alert(offset.top+"|||||"+offset.left);

</script>

则：

 

4.height():获取匹配元素中的第一个元素的高度。

Width():获取匹配元素中的第一个元素的宽度。

Height(val):为每一个匹配的元素设置css的高度属性值，默认是像素为单位。

Width(val):为每一个匹配的元素设置css的宽度属性值，默认是像素为单位。

例子：

<img src="imgage/1.jpg" />

<script type="text/javascript">

        var img = $("img");

        if(img.height()>100){

               img.height(100);

        }

        if(img.width()>100){

               img.height(100);

        }

</script>

则：

 

上面的这些方法都是只能设置匹配的第一个元素，那么要设置所有元素的样式，就可以使用each()方法，此方法会依次遍历jquery对象中的javascript数据。然后使用this关键字自动将该数据的索引值传递给该方法本身。