JQuery-常用实例方法

常用实例方法

• 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

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