closest, parents

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <ul id="one" class="level-1">
  9.         <li class="item-i">I</li>
  10.         <li id="ii" class="item-ii">II
  11.             <ul class="level-2">
  12.                 <li class="item-a">A</li>
  13.                 <li class="item-b">B
  14.                     <ul class="level-3">
  15.                         <li class="item-1">1</li>
  16.                         <li class="item-2">2</li>
  17.                         <li class="item-3">3</li>
  18.                     </ul>
  19.                 </li>
  20.                 <li class="item-c">C</li>
  21.             </ul>
  22.         </li>
  23.         <li class="item-iii">III</li>
  24.     </ul>
  25.     <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  26.     <script>
  27.         // closest 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
  28.         console.log($('.item-a').closest('ul').attr('class')) // level-2
  29.         console.log($('.item-a').closest('li').attr('class')) // item-a
  30.         console.log($('.item-a').parents().length) // 5
  31.     </script>
  32. </body>
  33. </html>

offset, offsetParent, position

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         *{margin:0;padding:0;}
  8.         div{padding:10px;}
  9.         #box1,#container1{background:red;}
  10.         #box2,#container2{background:green;}
  11.         #box3,#container3{background:gray;}
  12.         #container2{position:relative;}
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="box1">
  17.         <div id="box2">
  18.             <div id="box3">box3</div>
  19.         </div>
  20.     </div>
  21.     <div id="container1">
  22.         <div id="container2">
  23.             <div id="container3">container3</div>
  24.         </div>
  25.     </div>
  26.     <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>
  27.     <script>
  28.         /**
  29.          * offset() 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档
  30.          * offsetParent() 获取离指定元素最近的含有定位信息的祖先元素
  31.          * position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )
  32.          */
  33.         console.log($('#box3').offset())
  34.         console.log($('#box3').offsetParent())
  35.         console.log($('#box3').position())
  36.         console.log($('#container3').offset())
  37.         console.log($('#container3').offsetParent())
  38.         console.log($('#container3').position())
  39.     </script>
  40. </body>
  41. </html>

width, innerWidth, outerWidth, height, innerHeight, outerHeight

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         #box1{background:gray;padding:10px;margin:10px;border:10px solid red;width:100px;height:100px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <div id="box1" style="color:red;">box1</div>
  12.     <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>
  13.     <script>
  14.         /**
  15.          * .css('height') 和 .height()之间的区别是后者返回一个没有单位的数值
  16.          * box-sizing: border-box
  17.          * width() height()
  18.          * innerWidth() innerHeight() 包括padding
  19.          * outerWidth([includeMargin]) outerHeight([includeMargin]) 包括padding, border, [margin]
  20.          */
  21.         console.log($('#box1').css('height'), $('#box1').height())
  22.         console.log(document.getElementById('box1').offsetHeight)
  23.     </script>
  24. </body>
  25. </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. python 参议院文本预处理的一维数组的间隔空间

    #!/usr/bin/python import re def pre_process_msg ( msgIn ):     if msgIn=="":         retur ...

  2. python 学习笔记 基础

    python对象三要素: identity(值):对应于内存的地址,不可修改type(类型):不可修改value(值): mutable :可以修改 immutable:不可以修改 引用计数当引用计数 ...

  3. Android 设计模式之观察者模式（转载自：“http://blog.csdn.net/fangchongbory/article/details/7774044”）

    /* * 观察者模式 *      定义对象间的一种一个(Subject)对多(Observer)的依赖关系,当一个对象的状态发送改变时,所以依赖于它的 * 对象都得到通知并被自动更新 * * 当然, ...

  4. python增删改查

    ###增删改查 names = ["zhangding","wangxu","wudong","cheng"] #增na ...

  5. 176. [USACO Feb07] 奶牛聚会

    #include<iostream> #include<cstdio> #include<cstring> #include<queue> #defin ...

  6. JavaScript--时间显示小插件

    JS调用系统时间,显示在当前页面上,利用DOM操作节点来实现动态刷新 <!DOCTYPE html> <html> <head> <meta charset= ...

  7. （转）phpmyadmin操作技巧：如何在phpmyadmin里面复制mysql数据库？

    转之--http://blogunion.org/posts/copy-mysql-data-in-phpmyadmin.html 对于每一个站长而言,都会遇到要进行网站测试的时候.这个时候,往往需要 ...

  8. 使用第三方框架 Masonry 实现自动布局

    使用第三方框架 Masonry 实现自动布局 时间:2015-02-10 11:08:41      阅读:4595      评论:0      收藏:0      [点我收藏+] 标签: 由于前两 ...

  9. cocos2dx 3.2中的物理引擎初探(一)

    cocos2dx在设计之初就集成了两套物理引擎,它们是box2d和chipmunk.我目前使用的是最新版的cocos2dx 3.2.引擎中默认使用的是chipmunk,如果想要改使用box2d的话,需 ...

  10. Android JNI 之 环境安装

    在配置环境之前,我们得了解 JNI 和NDK JNI JNI是Java Native Interface的缩写,中文为JAVA本地调用.它提供了若干的API实现了和Java和其他语言的通信(主要是C& ...