jquery的样式操作及属性操作

一、jquery样式操作

• 操作行间样式

  // 获取div的样式
  $("div").css("width");
  $("div").css("color");
  
  //设置div的样式
  $("div").css("width","30px");
  $("div").css("height","30px");
  $("div").css({fontSize:"30px",color:"red"});
  

特别注意：
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

• 操作样式类名

  $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
  $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
  $("#div1").removeClass("divClass divClass2") //移除多个样式
  $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
  

二、jquery属性操作：

• html() 取出或设置html内容：

  // 取出html内容
  var $htm = $('#div1').html();
  
  // 设置html内容
  $('#div1').html('<span>添加文字</span>');
  

• text() 取出或设置text内容：

   // 取出文本内容
   var $htm = $('#div1').text();
  
   // 设置文本内容
   $('#div1').text('<span>添加文字</span>');
  

• attr() 取出或设置某个属性的值：

   // 取出图片的地址
   var $src = $('#img1').attr('src');
  
   // 设置图片的地址和alt属性
   $('#img1').attr({ src: "test.jpg", alt: "Test Image" });