zoukankan      html  css  js  c++  java
  • jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>b index</title>
    <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
    <style type="text/css">
        .s1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .s2{
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
    </head>
    <body style="margin:1px;">
        <div id="div001">div001</div>
        <div id='div002'>div002</div>
        <div id='div003' class='div003'>div003</div>
        <div id="container" style="background-color:silver; 100px; height:100px; overflow:auto;"> 
            <p style="background-color:red;" mce_style="background-color:red;"> 
            这里是文本 这里是文本 这里是文本 这里是文本 这里是文本 
            </p> 
        </div> 
        <div>
            <button id="btn001">click me to get div001 css </button>
            <button id="btn002">click me to get div css </button>
            <button id="btn003">click me to use position/offset/scrollTop </button>
            <button id="btn004">click me to set p scrollTop </button>
        </div>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="b/js/bootstrap.js"></script>
        <script type="text/javascript" src="js/index037.js"></script>
    </body>
    </html>
    $(function() {
        $('#btn001').click(btn001Click);
        $('#btn002').click(btn002Click);
        $('#btn003').click(btn003Click);
        $('#btn004').click(btn004Click);
        console.log('load:  ' + new Date());
        setInterval("msg()", 60000);
    });
    function msg() {
        console.log('msg:  ' + new Date());
    }
    function btn001Click() {
        // 必须有参数,没有参数会报错:Uncaught TypeError: Cannot read property 'replace' of undefined
        // var obj01=$('#btn001').css();
        // console.log(obj01);
        // 返回一个字符串
        var obj02 = $('#btn001').css('color');
        console.log(obj02);
        // 返回一个对象,abc对应的值为undefined
        var obj03 = $('#btn001').css([ 'color', 'background', 'abc' ]);
        console.log(obj03);
        var obj031 = $('#div001').css('background', 'red');
        console.log(obj031);
        // 因为可以连缀写下去,所以返回的是div001元素的jQuery对象;
        var obj04 = $('#div001').css('width');
        console.log(obj04);
        $('#div001').css('height', function(i, v) {
            // 这里面的i是0;
            console.log(i);
            console.log(v);
            return parseFloat(v) * 1.2;
        });
    }
    function btn002Click() {
        // 会进行自己的遍历,其实所有的jQuery对象都是数组,所以就可以统一处理了;
        var obj01 = $('div').css('background', 'red');
        console.log(obj01);
        $('div').css('height', function(i, v) {
            // 这里面的i就会变化;会把所有的div元素遍历一遍;
            console.log(i);
            console.log(v);
            return parseFloat(v) * 1.2;
        });
    }
    function btn003Click() {
        // 相对父元素位置,只对可见元素有效;
        var obj01 = $('#div001').position();
        console.log(obj01);
        // 相对当前视口的位置,只对可见元素有效;
        var obj02 = $('#div001').offset();
        console.log(obj02);
        // 获取顶部偏移;结果:0;对可见、不可见元素都是有效的;
        var obj03 = $('#div001').scrollTop();
        console.log(obj03);
        // 进行设置,那就会返回div001的jQuery对象;设置好像不生效呀;
        var obj04 = $('#div001').scrollTop(200);
        console.log(obj04);
        // 现在查看还是0,
        var obj05 = $('#div001').scrollTop();
        console.log(obj05);
    }
    function btn004Click(){
        // 这个貌似无效;
        var obj01=$('p').scrollTop(20);
        console.log(obj01);
        // 这个可以进行位置的偏移;偏移之后,其scrollTop,scrollLeft还是不变;
        var obj02=obj01.offset({top:81});
        console.log(obj02);
    }
  • 相关阅读:
    hihocoder 1049 后序遍历
    hihocoder 1310 岛屿
    Leetcode 63. Unique Paths II
    Leetcode 62. Unique Paths
    Leetcode 70. Climbing Stairs
    poj 3544 Journey with Pigs
    Leetcode 338. Counting Bits
    Leetcode 136. Single Number
    Leetcode 342. Power of Four
    Leetcode 299. Bulls and Cows
  • 原文地址:https://www.cnblogs.com/stono/p/4961019.html
Copyright © 2011-2022 走看看