常用实例方法

  • attr

    // 获取指定节点的值(传递一个参数)、设置指定节点的值(传递两个参数)
    // 在获取属性节点的值时, 无论找到多少个DOM元素, 都只会返回第一个找到的DOM元素
    // 设置属性节点的时候会设置所有找到的DOM元素
    console.log($('div').attr('name'));
    $('div').attr('attrName', 'attrValue');
    
    // 删除指定的属性节点
    // 会删除所有找到的
    $('div').removeAttr('attrName');
  • prop

    // prop使用方法与attr基本相同,但是使用attr会导致行为不一致的情况,所以当属性值是true/false,或是selected/checked/disabled时一个使用prop,否则使用attr
    
    console.log($('div').prop('name'));
    $('div').prop('attrName', 'attrValue');
    
    $('div').removeProp('attrName');
  • class

    // 添加类
    $('div').addClass('class1, class2, ...');
    
    // 删除类
    $('div').remove('class1, class2, ...');
    
    // 切换类
    $('div').toggleClass('class1, class2, ...');
  • 文本内容相关操作

    // html
    // 获取内容、设置内容,获取和设置的内容以html标签的形式呈现
    console.log($('div').html());
    $('div').html('<span>Hello World!</span>');
    
    // text
    // 获取内容、设置内容,获取和设置的内容以纯字符串的形式呈现
    console.log($('div').text());
    $('div').text('<span>Hello World!</span>');
    
    // val
    // 获取和设置input组件以及textarea的内容
    console.log($('input').val());
    $('textarea').val('Hello World!');
  • css

    // 设置元素的css样式
    // 逐个设置
    $("div").css("width", "100px");
    $("div").css("height", "100px");
    $("div").css("background", "yellow");
    
    // 链式设置
    $("div").css("width", "100px").css("height", "100px").css("background", "blue");
    
    // 批量设置
     $("div").css({
         width: "100px",
         height: "100px",
         background: "orangered"
     });
  • width / height

    // 获取、设置元素内容的宽高
    $('div').width()
    $('div').width(200);
    
    $('div').height()
    $('div').height(200);
  • offset

    // 获取、设置元素相对于body的距离
    $('div').offset().left
    $('div').offset().top;
    
    $('div').offset({
        left: 200,
        top: 200
    });
  • position

    // 获取元素相对于定位流的距离,不能设置
    $('div').position().left
    $('div').position().top
  • scrollTop / scrolleft

    // 获取设置元素的偏移量
    $('div').scrollTop()
    $('div').scrollTop(1000);
  • show / hide

    // 显示动画 、 隐藏动画
    // 方法可以接受两个参数,第一个参数是动画执行时长,第二个参数是执行完毕后的回调函
01-17 19:35