菜单

jQuery属性/CSS使用例子

2019年5月15日 - 皇家前端

jQuery属性/CSS

一、.attr() 获取相称的成分集结中的第②个因素的性格的值
 或 设置每3个相配成分的一个或多少个天性。

  例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

 例二: 设置每一个相配成分的二个或多个属性

<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>

 效果:

那是三个段子

那是3个div

 

2、.prop() 获取相配的要素集中第七个要素的属性(property)值或设置每二个相配成分的一个或6性格情。  

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

效果:

图片 1

 

3、.removeAttr() 为合营的因素集合中的各个成分中移除几天性质(attribute)

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

功效:本来是submit是禁止使用的,移除了质量后变为可点击的;而checkbox未有移除disabled属性,则依然是禁止使用的。

图片 2

 

 

四、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

 

 

五、.val() 获取相称的因素集结中率先个要素的脚下值或安装相配的成分集结中每一个成分的值。这一个艺术不接受其余参数,主要用来获取表单元素的值。

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

效果:

图片 3

 

6、.addClass() 为各样相称的要素增添内定的样式类名。

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

效果:

这是p段落

 

七、.css()
 获取相配成分群集中的第二个因素的体裁属性的总括值  或
 设置每一种相配成分的一个或七个CSS属性。那个方法在上头例子中曾经使用。

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

效果:

图片 4

 

八、.hasClass()
 鲜明别的多少个相配成分是或不是有被分配给定的(样式)类。

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

效果:

我是div1

 

九、removeClass()
 移除集结中每种匹配成分上二个,多个或任何体制。

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

成效:移除了类名字为.div后,样式便不起作用了。

我是div1

 

十、.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>

功能:点击第三次与点击第2回,期间类名爆发了反转。

图片 5

 

11、.height()
 获取相配成分会集中的第2个元素的此时此刻划算中度值 或
设置每二个相称成分的中度值。

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

效果:

图片 6

 

1二、innerHeight()
 用于获取杰出集结中第二个成分的最近总括的当中高度(包含padding,但不包涵border),或
设置每3个匹配元素的里边低度。那些办法不接受其他参数。该格局再次回到成分的可观,包罗顶端和尾部的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

 

一三、outerHeight()
 获取相配成分会集中率先个要素的脚下计量宽度值,包涵padding,border和选取性的margin。再次回到贰个整数(不包括“px”)表示的值
,或只要在2个空集合上调用该办法,则会回去 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

 

1肆、outerWidth()
 获取成分集合中率先个成分的当前总计宽度值,包蕴padding,border和选拔性的margin。(愚人码头注:重返3个整数(不含有“px”)表示的值,或只要在3个空会集上调用该方法,则会重回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

 

1五、innerWidth()
 
用于获取特别集合中第3个成分的方今计量的里边宽度(包含padding,但不包含border),或
设置每2个相称成分的个中宽度。

<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>

效果:

图片 7

 

一7、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>    

效果:

图片 8

 

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()
 获取相称的因素集结中率先个要素的近日水平滚动条的岗位或安装每种相配成分的程度滚动条地方。

二一、.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!

 

贰3、.removeData()
  在要素上移除绑定的数目

 

<style type="text/css">
      div { margin:2px; color:blue; }
      span { color:red; }
</style>
<div>value1 before creation: </div>
<div>value1 after creation: </div>
 <div>value1 after removal: </div>
<div>value2 after removal: </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

 

 

 

 

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图