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. 10.OC中retainCount返回值不准的原因

    翻看该方法的参考文档,苹果对retainCount方法的描述如下: retainCount Do not use this method. (required) - (NSUInteger)retai ...

  2. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  3. 【转】理解 PHP 依赖注入 | Laravel IoC容器

    Laravel框架的依赖注入确实很强大,并且通过容器实现依赖注入可以有选择性的加载需要的服务,减少初始化框架的开销,下面是我在网上看到的一个帖子,写的很好拿来与大家分享,文章从开始按照传统的类设计数据 ...

  4. 防止sql注入和sqlmap介绍

    sql注入问题从WEB诞生到现在也一直没停过,各种大小公司都出现过sql注入问题,导致被拖库,然后存在社工库撞库等一系列影响. 防止sql注入个人理解最主要的就一点,那就是变量全部参数化,能根本的解决 ...

  5. Code First数据库迁移

    生成数据库 修改类文件PortalContext.cs的静态构造函数,取消当数据库模型发生改变时删除当前数据库重建新数据库的设置. PortalContext() { Database.SetInit ...

  6. sublime Text 3 安装emmet

    Emmet简介 Emmet是一个支持大部分流行文本编辑器的插件,能够极大得提高编写HTML和CSS的工作效率. 官网:http://emmet.io/ 在Sublime Text 3中安装 前提Sub ...

  7. python学习6 web开发

    wsgi自带,用语构建简单服务器 例子 from wsgiref.simple_server import make_server def index(env, res): res('200 ok', ...

  8. 转：简单窗体振动-WaitForSingleObject，消息，winapi

    http://www.cnblogs.com/Jekhn/archive/2012/08/25/2656656.html 线程,消息函数,SetWindowPos设置窗体位置 if WaitForSi ...

  9. Python爬虫学习（11）：Beautiful Soup的使用

    之前我们从网页中提取重要信息主要是通过自己编写正则表达式完成的,但是如果你觉得正则表达式很好写的话,那你估计不是地球人了,而且很容易出问题.下边要介绍的Beautiful Soup就可以帮你简化这些操 ...

  10. 四则运算app代码上传GITHUB

    团队: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...