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. SQL多表连接查询

    SQL多表连接查询 本文主要列举两张和三张表来讲述多表连接查询. 新建两张表: 表1:student  截图如下: 表2:course  截图如下: (此时这样建表只是为了演示连接SQL语句,当然实际 ...

  2. j嵌入式f_os之定时管理

    /* * jf_timer.h * * Created on: Aug 20, 2016 * Author: lort */ #ifndef JF_OS_JF_TIMER_H_ #define JF_ ...

  3. Guidance of Set up FTP Server

    Step 1. Create a FTP folder in your C disk, named "FTPReport"(an example) Step 2. Install ...

  4. (转)Excel的 OleDb 连接串的格式（连接Excel 2003-2013）

    string strCon = "Provider=Microsoft.ACE.OLEDB.12.0;data source=" + filePath + ";Exten ...

  5. B/S系统常见缺陷整理和解决方案

    最近部门整理了今年所有项目测试团队提出的BUG,筛选了几十个作为常规通用的缺陷,我根据这些缺陷内容,去掉和业务相关的知识,整理出了一份缺陷描述和解决方案. 其实WEB系统中常规的缺陷分类后也就那么多, ...

  6. adv

    1. 对产品质量的认知理念,不仅是是确保没问题,而是通过自身与团队的价值提升产品的质量.潜在问题,竞类产品用户体验,bug产生分析图,流程控制 2. 责任心特质,正能量,热情激情,并且能感染团队成员和 ...

  7. 在Myeclipse中提交代码到GitHub中

    这需要借助插件Egit,首先就是先下载该插件了,可以再eclipse中下载,也可以在外面下载,下载就不说了.下载地址git://github.com/houyongchao/plugin-Egit.g ...

  8. 第四章 springboot + swagger

    http://www.cnblogs.com/java-zhao/p/5348113.html

  9. ubuntu 用apt-get 安装apache 和php 之后php不能解析的问题

    sudo apt-get install apache2 sudo apt-get install php7.0 sudo apt-get install libapache2-mod-php //关 ...

  10. 【转】《从入门到精通云服务器》第四讲—DDOS攻击

    上周咱们深入分析了云服务器的配置问题,好了,现在手上有了云服务器之后,我们又不得不提它:DDOS攻击.这是所有运维者的心头痛,也是任何公司听闻后都将心惊胆战的强大对手.下面我们将用浅显易懂的方式讲述什 ...