zoukankan      html  css  js  c++  java
  • jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果)

    jQuery 属性操作方法(以下方法前些日子学习过,不再赘述)

    addClass()

    attr()

    hasClass()

    html()

    removeAttr()

    removeClass()

    toggleClass()

    val()

    jQuery CSS 操作函数

    css()

    $("p").css("color");//取得第一个段落的 color 样式属性的值
    
    $(selector).css(name,value)//设置所有匹配元素的指定 CSS 属性
    
    $(selector).css({property:value, property:value, ...})
    
    $(".btn1").click(function(){
      $("p").css("color","red");
    });

    height()

    height() 方法返回或设置匹配元素的高度。
    
    $(selector).height()
    
    $(selector).height(length)
    
    $(".btn1").click(function(){
      $("p").height(50);
    });

    offset()

    offset() 方法返回或设置匹配元素相对于文档的偏移(位置)
    
    $(selector).offset()
    返回第一个匹配元素的偏移坐标。
    该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效
    
    $(selector).offset(value)
    
    $(".btn1").click(function(){
      x=$("p").offset();
      $("#span1").text(x.left);
      $("#span2").text(x.top);//值对,比如 {top:100,left:0}
    });//返回或设置的是一个对象,包含.left和.top属性

    offsetParent()

    $(selector).offsetParent()//方法返回最近的祖先定位元素
    
    //定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
    可以通过 jQuery 设置 position,或者通过 CSS 的 position 属性
    
    $("button").click(function(){
      $("p").offsetParent().css("background-color","red");
    });//设置最近的祖先定位元素的背景颜色

    position()

    $(selector).position()//position() 方法返回匹配元素相对于父元素的位置(偏移)(类似offset()),此方法只返回不设置

    $(".btn1").click(function(){
      x=$("p").position();
      $("#span1").text(x.left);
      $("#span2").text(x.top);
    });

    scrollLeft()

    scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置,滚动条位于最左侧时,位置是 0
    
    $(selector).scrollLeft()//返回第一个匹配元素的水平滚动条位置
    
    $(selector).scrollLeft(position)//设置所有匹配元素的水平滚动条位置
    
    $(".btn1").click(function(){
      $("div").scrollLeft(100);
    });选择器为导致滚动条出现的元素

    scrollTop()

    $(selector).scrollTop(offset)//返回或设置
    
    $(".btn1").click(function(){
      $("div").scrollLeft(100);
    });

    width()

    $(".btn1").click(function(){
      $("p").width(200);
    });//width() 方法返回或设置匹配元素的宽度
    
    $(selector).width()
    
    $(selector).width(length)

     

  • 相关阅读:
    为了实现一个函数 clone ,可以对 JavaScript 中 5 种主要的数据类型 (包括 Number、 St「ing 、 Object、 A「「ay、 Boolean )进行值(深)复制。
    说说你对语义化的理解
    vue 根据字符串的长度控制显示的字数超出显示省略号
    加密号码将中间四位改为*
    前端项目部署错误:npm ERR! notarget No matching version found for event-stream@3.3.6
    npm报错:A complete log of this run can be fund in:........
    nrm插件的安装插件和使用
    Vue过渡搭配Velocity.js动画的基本使用
    Asp.Net Core&钉钉开发系列
    KnockoutJS知识规整目录
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3541796.html
Copyright © 2011-2022 走看看