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

主要内容:

  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>

    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> 

未完,待续...

    

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

时间: 2024-11-09 00:36:02

前端开发之jQuery位置属性和筛选方法的相关文章

前端开发之jQuery属性和文档操作

主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作,类样式操作和值操作. (1)html 属性操作 对html文档中的属性进行读取,设置和移除操作.例如:attr(),removeAttr(). (2) DOM属性操作 对DOM元素的属性进行读取,设置和移除操作.例如:prop(),removeProp(). (3) 类样式操作 对DOM属性clas

前端开发之jQuery库的引用

使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 支持的版本: 2.0.3, 2.0.2, 2.0.1, 请根据所需要的版本 修改对应(红色字为当前版本)的地址: jquery/2.0.0/jquery.min.js 百度压缩版引用地址: <script src="http://lib

HTML5+JS手机web开发之jQuery Mobile初涉

一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西,iPhone又是新的一套,折腾死人呐. 于是总监发狠,让我把手上的活都交出去,专心折腾web版的,看看最后效果如何. 加上我觊觎手机上的开发学习很久了,于是,一拍即合,搞起了手机开发方面的学习. 分享是很好的提高自身学习的方法.因为分享过程中梳理了所学,往往会有些意想不到的心得与收获.如此利人利已的

前端开发之html基础知识02

经典表格:表格没有列的概念,只有行的概念, 一行 tr,行中的单元格 td表头的突出显示:tr>th <table width="400px" align="center" border="1px" cellspacing="0" cellpadding="5px" > <!-- align = "center" 表格整体剧中--> <caption&

移动平台前端开发之WebApp代码技巧

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web

高效Web前端开发之路:YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

jQuery 开发之jQuery事件一

1,DOM加载 $(document).ready() 和window.onload()的区别.他们虽然功能相似,但是执行时机方面是有区别的. window.onload() 方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行.此时JavaScript可以访问网页中的任何元素.而通过jQuery 中的$(document).ready() 方法注册的时间处理程序,在DOM完全就绪时就可以被调用.此时网页中的所有元素对jQuery而言都可以被访问 的,但是这并不意味着这些元素的

jQuery 开发之jQuery事件二

1,模拟操作 (1)常用模拟 在jQuery中可以用trigger() 方法来实现模拟操作.例如可以是用下面的代码来实现btn的click事件, $("#btn").trigger("click"); 也可以直接用简化写法click()方法来实现.示例代码如下: $("#btn").click(); (2) 触发自定义事件 trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件. jQuery示例代码如下: $