jQuery 之 样式操作 & 属性操作 & 绑

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属性操作

• 1、html() 取出或设置html内容

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

• 2、text() 取出或设置text内容

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

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

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

绑定click事件

• 给元素绑定click事件，可以用如下方法：

  $('#btn1').click(function(){
      // 内部的this指的是原生对象
  
      // 使用jquery对象用 $(this)
  
  })
  

jquery特殊效果

• fadeIn() : 淡入
• fadeOut() : 淡出
• fadeToggle() : 切换淡入淡出
• hide() : 隐藏元素
• show() : 显示元素
• toggle() : 依次展示或隐藏某个元素
• slideDown() : 向下展开
• slideUp() : 向上卷起
• slideToggle() : 依次展开或卷起某个元素

  $btn.click(function(){
    $('#div1').fadeIn(1000,'swing',function(){
      alert('done!');
    });
  });