closest, parents

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <ul id="one" class="level-1">

        <li class="item-i">I</li>

        <li id="ii" class="item-ii">II

            <ul class="level-2">

                <li class="item-a">A</li>

                <li class="item-b">B

                    <ul class="level-3">

                        <li class="item-1">1</li>

                        <li class="item-2">2</li>

                        <li class="item-3">3</li>

                    </ul>

                </li>

                <li class="item-c">C</li>

            </ul>

        </li>

        <li class="item-iii">III</li>

    </ul>

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>

    <script>

        // closest 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

        console.log($('.item-a').closest('ul').attr('class')) // level-2

        console.log($('.item-a').closest('li').attr('class')) // item-a

        console.log($('.item-a').parents().length) // 5

    </script>

</body>

</html>

offset, offsetParent, position

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        div{padding:10px;}

        #box1,#container1{background:red;}

        #box2,#container2{background:green;}

        #box3,#container3{background:gray;}

        #container2{position:relative;}

    </style>

</head>

<body>

    <div id="box1">

        <div id="box2">

            <div id="box3">box3</div>

        </div>

    </div>

    <div id="container1">

        <div id="container2">

            <div id="container3">container3</div>

        </div>

    </div>

    <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>

    <script>

        /**

         * offset() 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

         * offsetParent() 获取离指定元素最近的含有定位信息的祖先元素

         * position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )

         */

        console.log($('#box3').offset())

        console.log($('#box3').offsetParent())

        console.log($('#box3').position())

        console.log($('#container3').offset())

        console.log($('#container3').offsetParent())

        console.log($('#container3').position())

    </script>

</body>

</html>

width, innerWidth, outerWidth, height, innerHeight, outerHeight

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        #box1{background:gray;padding:10px;margin:10px;border:10px solid red;width:100px;height:100px;}

    </style>

</head>

<body>

    <div id="box1" style="color:red;">box1</div>

    <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>

    <script>

        /**

         * .css('height') 和 .height()之间的区别是后者返回一个没有单位的数值

         * box-sizing: border-box

         * width() height()

         * innerWidth() innerHeight() 包括padding

         * outerWidth([includeMargin]) outerHeight([includeMargin]) 包括padding, border, [margin]

         */

        console.log($('#box1').css('height'), $('#box1').height())

        console.log(document.getElementById('box1').offsetHeight)

    </script>

</body>

</html>

【jQuery】jQuery API 过 一 遍的更多相关文章

  1. JavaScript强化教程——jQuery UI API 类别

    ---恢复内容开始--- 主要介绍:JavaScript强化教程​—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...

  2. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  3. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  4. jQuery EasyUI API 中文文档

    http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页  jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...

  5. jQuery DataTable-JavaScript API

    虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表.可以使用以下函数从jQuery.dataTable对象 ...

  6. jQuery.localStorage() - jQuery SDK API

    jQuery.localStorage() - jQuery SDK API jQuery.localStorage() From jQuery SDK API   Jump to: navigati ...

  7. jQuery.mobile.changePage() | jQuery Mobile API Documentation

    jQuery.mobile.changePage() | jQuery Mobile API Documentation <script> $.mobile.changePage( &qu ...

  8. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  9. jquery 常用api 小结2

    *一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...

  10. jQuery常用API之jQuery选择器

    3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...

随机推荐

  1. static作用——The static effect

    1)在函数体内,一个被声明为静态的变量在这一函数被调用过程中维持其值不变(该变量存放在静态变量区). 2) 在模块内(但在函数体外),一个被声明为静态的变量可以被模块内所用函数访问,但不能被模块外其它 ...

  2. sparkSQL1.1入门之二：sparkSQL执行架构

          在介绍sparkSQL之前.我们首先来看看,传统的关系型数据库是怎么执行的.当我们提交了一个非常easy的查询: SELECT a1,a2,a3 FROM tableA Where con ...

  3. Qt深入：不能不知道的Type、Attribute和Flags

    Qter高手与新手的区别在于:知道还是不知道 Qt不是开发语言,所以无所谓谁厉害.但使用他的Qter却有着差异,也许是面向对象语言本身的.或者实际经验上的.而对于Qt本身来说,高手与新手最显著的差异在 ...

  4. javascript 鼠標拖動功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. IOS中类的扩展（协议，分类）

    IOS中类的扩展(协议,分类) 扩展类,我们可以使用协议和分类这两种方法,下面我们来分别实现这两种方法: 参考网址:http://www.cnblogs.com/wendingding/p/37095 ...

  6. 几句话实现导航栏透明渐变 – iOS

    首先我们来看下效果 一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的 首当其冲的,我们先得把导航栏弄透明 那么我们首先得知道,设置navigationBar的BackgroundCo ...

  7. Ubuntu知识记录

    1.激活root用户:sudo passwd root 2.安装ftp:apt-get install vsftpd,修改配置文件/etc/vsftpd.conf write_enable=yes表明 ...

  8. Objective－C 笔记二 类、对象和方法

    对象就是一个物件.面向对象的程序设计可以看成一个物件和你想对它做的事情.这与C语言不同,C语言通常称为过程性语言.在C语言中,通常是先考虑要做什么,然后才关注对象,这几乎总是与面相对象的思考过程相反. ...

  9. ASP.NET菜鸟之路之Request小例子

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Request获取值 Request获取值有两种 ...

  10. RSA加密算法正确性证明

    RSA加密算法是利用大整数分解耗时非常大来保证加密算法不被破译. 密钥的计算过程为:首先选择两个质数p和q,令n=p*q. 令k为n的欧拉函数,k=ϕ(n)=(p−1)(q−1) 选择任意整数a,保证 ...