美文网首页
jQuery中常见函数用法

jQuery中常见函数用法

作者: 清苑折纸 | 来源:发表于2019-06-21 00:02 被阅读0次

    .val()
    .attr()
    .removeAttr()
    .prop()
    .css()
    .addClass()
    .removeClass()
    .hasClass()
    .toggleClass()

    .val()

    有参数时是设置input的value,无参数值是获取input的value

    $('input').val()
    $('input').val('newValue');
    

    .attr()

    获取元素属性的值
    var title = $( "em" ).attr( "title" );
    为元素属性赋值

    $( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
    //json类型
    $( "#greatphoto" ).attr({
      alt: "Beijing Brush Seller",
      title: "photo by Kelly Clark"
    });
    
    $( "#greatphoto" ).attr( "title", function( i, val ) {
      return val + " - photo by Kelly Clark";
    });
    

    .removeAttr()

    移除属性
    $('div').removeAttr('id');

    .prop()

    操作元素的property,用于检测元素属性值

    .css()

    处理元素的css
    获取css

    var color = $( this ).css( "background-color" );
    
    var styleProps = $( this ).css([
      "width",
      "height",
      "color",
      "background-color"
    ]);
    

    设置css值

    $( "div.example" ).css( "width", function( index ) {
      return index * 50;
    });
    
    $( this ).css( "width", "+=200" );
    
    $( this ).css( "background-color", "yellow" );
    
    $( this ).css({
      "background-color": "yellow",
      "font-weight": "bolder"
    });
    

    .addClass()

    为元素添加class

    .removeClass()

    为元素移除class

    .hasClass()

    判断当前元素是否有该class值

    .toggleClass()

    class切换

    <div class="tumble">Some text.</div>
    第一次执行
    
    $( "div.tumble" ).toggleClass( "bounce" )
    
    <div class="tumble bounce">Some text.</div>
    第二次执行
    
    $( "div.tumble" ).toggleClass( "bounce" )
    
    <div class="tumble">Some text.</div>
    

    相关文章

      网友评论

          本文标题:jQuery中常见函数用法

          本文链接:https://www.haomeiwen.com/subject/uyasqctx.html