jQuery属性/CSS使用例子

jQuery属性/CSS

1、.attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性。

　　例1：获取元素的属性的值

<p title="段落1" class="p1">我是一个段落</p>
<div>div</div>
<script type="text/javascript">
    $(function(){
        var  p1=$('.p1').attr('title');
        $('div').text('p1').css('color','red');
    });
</script>

效果：

我是一个段落

p1

例2： 设置每一个匹配元素的一个或多个属性

<p class="p1">这是第一个段落</p>
<div>这是一个div</div>
<script type="text/javascript">
    $(function(){
          $('.p1').attr('id','p1');
          $('div').attr({
        'id':'div1',
        'class':'div1'
   　　 });
        $('#p1').css('color','red');
        $('.div1').css('color','blue');
});
</script>

效果：

这是一个段落

这是一个div

2、.prop() 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。　　

 <input type="checkbox" />
    <script>
    $(function(){
      $("input[type='checkbox']").prop("checked", "checked");
    });
</script>

效果：

3、.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）

<input type="checkbox" disabled="disabled"/>
<input type="submit" disabled="disabled" />
<script>
    $(function(){
        $("input[type='submit']").removeAttr("disabled");
    });
</script>

效果：本来是submit是禁用的，移除了属性后变为可点击的;而checkbox没有移除disabled属性，则依然是禁用的。

4、removeProp() 用来删除由.prop()方法设置的属性集。

注意: 不要使用此方法来删除原生的属性（ property ），比如checked, disabled, 或者 selected。
这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。

　　　　 <p></p>
        <div id="div1"></div>
        <div id="div2"></div>
        <script type="text/javascript">
        $(function(){
                $('p').prop({
                    "abc":1234
                });
                if ($('p').prop("abc")){
                    $('#div1').text(String($('p').prop("abc")));
                }
                $('p').removeProp("abc");
                if ($('p').prop("abc")){
                    $('#div2').text("abc");
                }
        });
        </script>

效果

1234

5、.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。这个方法不接受任何参数，主要用于获取表单元素的值。

<input type="submit" value="提交"/>
<p></p>
<script>
$(function(){
   var $value=$("input[type='submit']").val();
   $('p').text($value).css('color','red');
});
</script>

效果：

6、.addClass() 为每个匹配的元素添加指定的样式类名。

<p>这是p段落</p>
<script>
 $(function(){
   $('p').addClass('p1');
   $('.p1').css('color','blue');
 });
</script>

效果：

这是p段落

7、.css()  获取匹配元素集合中的第一个元素的样式属性的计算值  或  设置每个匹配元素的一个或多个CSS属性。这个方法在上面例子中早已使用。

<p class="p1">这是p段落</p>
<script>
 $(function(){
   $('.p1').css({
   width:"200",
   color:'red',
   border:'1px solid #ccc'
    });
});
</script>

效果：

8、.hasClass()  确定任何一个匹配元素是否有被分配给定的（样式）类。

<div class="div1">我是div1</div>
<script>
    $(function(){
        var res=$('div').hasClass('div1');
        if (res){
        $('div').css('color','red');
        }
    });
</script>

效果：

我是div1

9、removeClass()  移除集合中每个匹配元素上一个，多个或全部样式。

<style type="text/css">
 .div1{
       color: red;
 }
</style>
<div class="div1">我是div1</div>
 <script>
     $(function(){
      $("div").removeClass("div1");
     });
 </script>

效果：移除了类名为.div后，样式便不起作用了。

我是div1

10、.toogleClass()  用来切换匹配集合中的每个元素的一个或多个样式类名（用空格隔开）。

<style type="text/css">
     p {
        font-weight: bolder;
        cursor: pointer;
     }

    .highlight {
         background: yellow;
     }
</style>
<p class="blue">Click to toggle</p>                     
<script>
     $( "p" ).click(function() {
      $( this ).toggleClass( "highlight" );
     });
 </script>

效果：点击第一次与点击第二次，期间类名发生了反转。

11、.height()  获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。

<p>这是一个段落</p>
<script type="text/javascript">
   $(function(){
      $( "p" ).height(50).css('background-color','blueviolet');
  });
</script>

效果：

12、innerHeight()  用于获得匹配集合中第一个元素的当前计算的内部高度（包括padding，但不包括border），或 设置每一个匹配元素的内部高度。这个方法不接受任何参数。该方法返回元素的高度，包括顶部和底部的padding，单位是像素。

<style type="text/css">
      p {
          margin: 10px;
          padding: 5px;
          border: 2px solid #666;
         }
</style>
<div class="div1">
     <p class="p1"></p>
</div>
<script type="text/javascript">
  $(function(){
    var height= $('p').innerHeight();
    $('div').text(height);
});
</script>

效果：

10

13、outerHeight()  获取匹配元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

<style type="text/css">
      p {
          margin: 10px;
          padding: 5px;
          border: 2px solid #666;
         }
</style>
<div class="div1">
     <p class="p1"></p>
</div>
<script type="text/javascript">
  $(function(){      
　　 var height= $('p').outerHeight();
    $('div').text(height);
});
</script>

效果：

12

14、outerWidth()  获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（愚人码头注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）

<style type="text/css">
  p {
     width: 100px;
     border: 2px solid #666;
   }
</style>
<div class="div1">
<p class="p1"></p>
</div>
<script type="text/javascript">
   $(function(){
      var width= $('p').outerWidth();
      $('div').text(width);
   });
</script>

效果：

102

15、innerWidth()   用于获得匹配集合中第一个元素的当前计算的内部宽度（包括padding，但不包括border），或 设置每一个匹配元素的内部宽度。

<style type="text/css">
    p {
     padding: 10px;
     width: 100px;
     border: 2px solid #666;
   }
 </style>
 <div class="div1">
 <p class="p1"></p>
 </div>
 <script type="text/javascript">
    $(function(){
      var width= $('p').innerWidth();
      $('div').text(width);
   });          

</script>

效果：

120

16、.width()

<p>这是一个段落</p>
<script type="text/javascript">
    $(function(){
    $( "p" ).width(100).css('background-color','blueviolet');
});
</script>

效果：

17、offset()  在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。

<style type="text/css">
      p { margin-left:10px; }
</style>
<p>Hello</p>
<p>2nd Paragraph</p>
<script type="text/javascript">
     var p = $("p:last");
     var offset = p.offset();
     p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

效果：

Hello

left: 18, top: 50

18、.offsetParent()  取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。

 <style type="text/css">
    .div1{
        width: 100px;
        height: 50px;
        position: relative;
           }
</style>
<div class="div1">
    div1
<p class="p1"></p>
</div>
<script type="text/javascript">
         $(function(){
         $('.p1').offsetParent().css('background-color','red');
 });
</script>    

效果：

19、.position()

 <style type="text/css">
     div { padding: 15px;}
      p { margin-left:10px; }
</style>
<div>
    <p>Hello</p>
</div>
<p></p>
<script type="text/javascript">
      $(function(){
        var p = $("p:first");
        var position = p.position();
        $("p:last").text( "left: " + position.left + ", top: " + position.top );
         });
</script>

效果：

Hello

left: 23  top:23

20、.scrollLeft()  获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置。

21、.scrollTop()  获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。

22、.data() 在匹配元素上存储任意相关数<style type="text/css">

    div { color:blue; }
    span { color:red; }
</style>
script type="text/javascript">
     $(function(){
        $("div").data("test", { first: 16, last: "div1!" });
        $("span:first").text($("div").data("test").first);
        $("span:last").text($("div").data("test").last);
 });

</script>

效果：

The values stored were 16 and div1!

23、.removeData()   在元素上移除绑定的数据

<style type="text/css">
      div { margin:2px; color:blue; }
      span { color:red; }
</style>
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
 <div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
<script type="text/javascript">
    $(function(){
        $("span:eq(0)").text("" + $("div").data("test1"));
        $("div").data("test1", "VALUE-1");
        $("div").data("test2", "VALUE-2");
        $("span:eq(1)").text("" + $("div").data("test1"));
        $("div").removeData("test1");
        $("span:eq(2)").text("" + $("div").data("test1"));
        $("span:eq(3)").text("" + $("div").data("test2"));
    });
</script> 

效果：

value1 before creation: undefined

value1 after creation: VALUE-1

value1 after removal: undefined

value2 after removal: VALUE-2