【jQuery】jQuery API 过 一 遍
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 过 一 遍的更多相关文章
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 d ...
- jQuery EasyUI API 中文文档
http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页 jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...
- jQuery DataTable-JavaScript API
虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表.可以使用以下函数从jQuery.dataTable对象 ...
- jQuery.localStorage() - jQuery SDK API
jQuery.localStorage() - jQuery SDK API jQuery.localStorage() From jQuery SDK API Jump to: navigati ...
- jQuery.mobile.changePage() | jQuery Mobile API Documentation
jQuery.mobile.changePage() | jQuery Mobile API Documentation <script> $.mobile.changePage( &qu ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- jquery 常用api 小结2
*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...
- jQuery常用API之jQuery选择器
3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...
随机推荐
- 关于C++构造函数的FAQ
[1] 构造函数是用来干什么的? 构造函数构建类的对象,初始化类变量,分配资源(内存.文件.信号量.套接口等等) [2] List x; 和 List x();有什么不同? 前一个是定义List的一个 ...
- 在cmd窗口下运行Java程序时无法找到主类的解决办法
我是Java的初学者,昨天在cmd窗口下运行一段Java程序时总是有问题,可以编译但无法执行. 也就是javac时正确,一旦java时就不对了,提示找不到或无法加载主类,经百度谷歌再加上自己的摸索终于 ...
- Android实现网络多线程断点续传下载（转）
本示例介绍在Android平台下通过HTTP协议实现断点续传下载. 我们编写的是Andorid的HTTP协议多线程断点下载应用程序.直接使用单线程下载HTTP文件对我们来说是一件非常简单的事.那么,多 ...
- 动态代理 Proxy InvocationHandler
前奏 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等. 代理类与委托类之间通常 ...
- Poj 3368 Frequent values
/* 线段树区间合并 维护几个信息 到时候乱搞一下就好了 开始T了 有一种情况可以不用递归 直接算出来 */ #include<iostream> #include<cstdio&g ...
- javascript 获取用户光标，插入文本
图1 如图1所示,点击[函数名称],将函数名称添加到表达式内容框中,点击参数名称,将参数名称index1作为方法的参数添加到表达式内容中的表达式中. 该功能实现主要是采用了javascript获取鼠标 ...
- Python os常用模块
Python的标准库中的os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.即它允许一个程序在编写后不需要任何改动,也不会发生任何问题,就可以在Linux和Wi ...
- react服务端渲染（同构）
学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...
- POJ 2230 （欧拉路）
分析: 基础的欧拉路算法,变化在于要求每条边正向和反向各走一遍. 链式前向星构图,只要标记走过的单向边,边找边输出即可. code #include <iostream> #include ...
- C++ Primer 5th 第10章 泛型算法
练习10.1:头文件algorithm中定义了一个名为count的函数,它类似find,接受一对迭代器和一个值作为参数.count返回给定值在序列中出现的次数.编写程序,读取int序列存入vector ...