CSS

1.css
<p class="p1">1</p>

$("p").css("color");
获取css属性值
$("p").css("color","red");
添加或修改值
$("p").css({color:"red",margin:"10px"});
添加或修改多个值

2.jQuery.cssHooks

3.offset()
<p class="p1">1</p>

$('.p1').offset({left:'200',top:'200'})
设置元素对当前窗口的相对偏移量
console.log($('.p2').offset().top);
console.log($('.p2').offset().left);
获取偏移量

4.position()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

clg($('.li2').position().left)
clg($('.li2').position().top)
获取元素相对于上级元素的偏移量

5.scrollTop()
<body style="height:100px">
<div style="height:200px"></div>
</body>

console.log($('body').scrollTop())
获取body自身滚动条相对于顶部的偏移量
设置div的上级元素body的高小于它，那么为了显示div，body就会自动出现滚动条。
scrollTop()获取的是相对于自身滚动条的偏移量，而不是div的，在此，你要分辨出滚动条来源于谁，不然选错$()对象的话，获取的值永远是0.

6.scrollLeft()
<body style="width:100px">
<div style="width:200px"></div>
</body>

console.log($('body').scrollLeft())
获取body自身滚动条相对于左边的偏移量

6.width()
<div style="width:200px"></div>

console.log($("div").width());
获取元素宽度
console.log($("div").width(100));
设置元素宽度

7.height()
<div style="height:200px"></div>

console.log($("div").height());
获取元素高度
console.log($("div").height(100));
设置元素高度

8.innerWidth()
<div style="width:200px"></div>

console.log($("div").innerWidth());
获取元素内部宽度，这个宽度包括内边距
console.log($("div").innerWidth(100));
设置元素内部宽度，同上

9.innerHeight()
<div style="height:200px"></div>

console.log($("div").innerHeight());
获取元素内部高度，这个高度包括内边距
console.log($("div").innerHeight(100));
设置元素内部高度，同上

10.outerWidth()
<div style="width:200px"></div>

clg($('.div1').outerWidth(100));
设置元素外部宽度，不包括外边距
clg($('.div1').outerWidth());
获取元素外部宽度
clg($('.div1').outerWidth(true));
获取元素外部宽度，包括外边距

10.outerHeight()
<div style="height:200px"></div>

clg($('.div1').outerHeight(100));
设置元素外部高度，不包括外边距
clg($('.div1').outerHeight());
获取元素外部高度
clg($('.div1').outerHeight(true));
获取元素外部高度，包括外边距

jQuery代码节选（css）的更多相关文章

  1. jQuery代码节选（事件）

    事件 1.ready()$(document).ready(function() { //代码});简写:$(function( { //代码});该事件是会在页面加载完后执行,相当于onloca() ...

  2. jQuery代码节选（筛选）

    筛选...8.not()<p class="p1">1</p><p class="p2">2</p><p ...

  3. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  4. CSS效果：CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  5. 如何书写高质量的jQuery代码

    想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...

  6. 十五个常用的jquery代码段【转】

    好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...

  7. 十五个常用的jquery代码段

    十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...

  8. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  9. 50个必备的实用jQuery代码段

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

随机推荐

  1. DataSet装换为泛型集合 222

    #region DataSet装换为泛型集合 /// <summary> /// 利用反射和泛型 /// </summary> /// <param name=" ...

  2. debian命令行删除postgresql数据库

    创建数据库 $ createdb odoo-test 删除数据库 $ dropdb odoo-test

  3. Date、Calender类及日期和字符串转换

    Calendar是一个抽象类,抽象类java.util.Calendar 不可以通过new来获取一个实例,可以通过类方法getinstance()获取此类型的一个通用的对象 ①用法: Calendar ...

  4. jquery计算文本字符个数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. ViewPager适配器FragmentStatePagerAdapter 与FragmentPagerAdapter

    使用FragmentPagerAdapter存在删除dataSet顺序错乱的问题 改用FragmentStatePagerAdapter

  6. Python中内置数据类型list,tuple,dict,set的区别和用法

    Python中内置数据类型list,tuple,dict,set的区别和用法 Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, ...

  7. UML大战需求分析——阅读笔记05

    最近看过几个程序员大学后一起创业,与大公司抢项目并成功逆袭的视频,感触颇深:第一.技术是关键:第二.有一群可靠并且技术超群的队友,在关键时刻不会掉链子:第三.善于部署谨慎周密的计划:第四.一流的口才+ ...

  8. UE3名称结构（Name）

    解释说明: (1) 直接通过FName的index进行比较来判断两个FName是否相等 (2) 通过FName的index从全局Names数组中取出对应的FNameEntry,可以获得FName的字符 ...

  9. 亚马逊S3下载上传文件

    引用网址: http://www.jxtobo.com/27697.html 下载 CloudBerry Explorer http://www.cloudberrylab.com/download- ...

  10. Shell_2 语句

    1 if else fi if 语句通过关系运算符判断表达式的真假来决定执行哪个分支.Shell 有三种 if ... else 语句: if ... fi 语句: if ... else ... f ...