码迷,mamicode.com
首页 > Web开发 > 详细

前端开发之jQuery位置属性和筛选方法

时间:2018-09-01 12:43:31      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:class   导航栏   滚动   spl   set   jquery代码   ...   body   text   

主要内容:

  1、jQuery的位置属性及实例

    (1)位置属性

    (2)实例 --- 仿淘宝导航栏

  2、jQuery的筛选方法及实例

    (1)筛选方法

    (2)实例一:嵌套选项卡

    (3)实例二:小米官网滑动

    (4)实例三:焦点轮播图

    (5)实例四:动态实现轮播图

 

一、jQuery的位置属性及实例

  1、位置属性

    HTML部分   

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的位置属性</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        #box{
            position:relative;
            width:300px;
            height:200px;
            border:1px solid darkorange;
            padding:10px 5px;
        }
        p{
            position:absolute;
            left: 50px;
            top:50px;
        }
        .box2{
            width:200px;
            height:200px;
            margin:100px auto;
            border:1px solid mediumspringgreen;
        }
    </style>
</head>
<body style="height:2000px;width:2000px">
    <div id="box">
        <p>我是一个小小段落</p>
    </div>
    <button id="btn">动画</button>
    <div class="box2"></div>
</body>
<!-- 此处为jquery代码 -->
</html>
View Code

    jQuery部分

<script type="text/javascript">
    $(document).ready(function(){
        // 1、获取匹配元素的相对父元素的偏移 position
       console.log($("p").position().left); // 50
       console.log($("p").position().top); // 50
       
      var offsetTop = $("p").position().top + 50 +"px";
      var offsetLeft = $("p").positon().left + 30 + "px";
      $("#btn").click(function(){
             $("p").animate({top:offsetTop,left:offsetLeft},1000);
        })
    
      // 2、获取匹配元素,相对滚动条卷起的位置信息  scrollTop  scrollLeft
      $(document).scroll(function(){
        console.log("滚动条向右:"+$(document).scrollLeft());
        console.log("滚动条向下:"+$(document).scrollTop());
        });

       // 3、offset 获取匹配元素在当前视图的相对偏移(浏览器)
        console.log($(#box).offset());    //{top: 0, left: 0}
        console.log($(#box).offset().top);
        console.log($(#box).offset().left);
        console.log($(#btn).offset().top);

        // 4、获取元素的宽高
         console.log(""+$("#box").width()); // 300
         console.log(""+$("#box").height()); // 200
        
        // 5、设置宽高
        $("#box").width(600);
        
       // 6、获取内部宽度和外部宽度
             // innerWidth:width + 2*padding 不包括边框,获取匹配元素的内部宽度
             console.log("内部宽度:"+$("#box").innerWidth()); // 610
            // outerWidth:width + 2*padding+2*boder 获取的匹配元素的外部宽度
            console.log("外部宽度::");
    })
    
    
</script> 

未完,待续...

 

    

前端开发之jQuery位置属性和筛选方法

标签:class   导航栏   滚动   spl   set   jquery代码   ...   body   text   

原文地址:https://www.cnblogs.com/schut/p/9568926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!