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. [转] 用PDB库调试Python程序

    Python自带的pdb库,发现用pdb来调试程序还是很方便的,当然了,什么远程调试,多线程之类,pdb是搞不定的. 用pdb调试有多种方式可选: 1. 命令行启动目标程序,加上-m参数,这样调用my ...

  2. linux的文本管道连接处理技巧

    举例1: strace -f -e open cpp Hello.cpp -o /dev/null 2>&1 | grep -v ENOENT | awk '{print $3}' 1) ...

  3. [转] restrict关键字用法

    PS: 在函数中,指针参数指定了restrict,表示这个指针指向的这段区域只能通过这个指针修改 c99中新增加了一个类型定义,就是restrict. 看了下网上的相关贴子,但还是问题解决的不够.下面 ...

  4. Java基础知识强化之IO流笔记10：File类输出指定目录下指定后缀名的文件名称案例（File类的文件过滤器方法改进list（ FilenameFilter ff））

    1. 案例: 判断F盘下是否有后缀名为.jpg的文件,如果有的话,就输出这个文件名. 2. 案例代码如下: (1)思路是:先获取所有的文件和文件夹封装的对象,然后遍历的时候,依次判断,如果满足条件就输 ...

  5. Linux shell入门基础（六）

    六.Shell脚本编程详解 将上述五部分的内容,串联起来,增加对Shell的了解 01.shell脚本 shell: # #perl #python #php #jsp 不同的脚本执行不同的文本,执行 ...

  6. C#-高血压生活习惯数据模拟

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace test ...

  7. TSQL Challenge 2

    和之前发布的TSQL Challenge 1是同一系列的文章,看到那篇学习哪篇,没有固定的顺序,只为锻炼下思维. Compare rows in the same table and group th ...

  8. 浏览器中 for in 反射 对象成员 的差异

    http://www.cnblogs.com/_franky/archive/2010/05/08/1730437.html 下面是例子 function test(url, obj) { if($( ...

  9. cas sso单点登录系列5_cas单点登录增加验证码功能完整步骤

    转:http://blog.csdn.net/ae6623/article/details/8919718 本篇教程cas-server端下载地址:解压后,直接放到tomcat的webapp目录下就能 ...

  10. cas sso入门（转）

    转:http://blog.csdn.net/frinder/article/details/7969925 一.教程说明 前言 教程目的:从头到尾细细道来单点登录服务器及客户端应用的每个步骤 单点登 ...