jQuery代码节选(css)
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)的更多相关文章
- jQuery代码节选(事件)
事件 1.ready()$(document).ready(function() { //代码});简写:$(function( { //代码});该事件是会在页面加载完后执行,相当于onloca() ...
- jQuery代码节选(筛选)
筛选...8.not()<p class="p1">1</p><p class="p2">2</p><p ...
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- CSS效果:CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- 如何书写高质量的jQuery代码
想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 50个必备的实用jQuery代码段
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
随机推荐
- Spring MVC 中 HandlerInterceptorAdapter的使用
一般情况下,对来自浏览器的请求的拦截,是利用Filter实现的,这种方式可以实现Bean预处理.后处理. Spring MVC的拦截器不仅可实现Filter的所有功能,还可以更精确的控制拦截精度. s ...
- Python下Json和Msgpack序列化比较
最近用Python时,遇到了序列化对象的问题,传统的json和新型序列化工具包msgpack都有涉及,于是做一个简单的总结: 通俗的讲:序列化:将对象信息转化为可以存储或传输的形式:反序列化:把这个 ...
- 聊一聊log4j2配置文件log4j2.xml
一.背景 最近由于项目的需要,我们把log4j 1.x的版本全部迁移成log4j 2.x 的版本,那随之而来的slf4j整合log4j的配置(使用Slf4j集成Log4j2构建项目日志系统的完美解决方 ...
- 箭头函数和Buffer对象
一.箭头函数 普通函数1 var add = function (a, b) { return a + b; } 普通函数2 function add (a, b) { return a + b; } ...
- 把包发布到npm官网
一.包 包就是多模块的集合,CommonJS的包规范给程序员提供了组织模块的标准,减少沟通成本. 规范: 所有的模块放在demo文件夹下(包名)的lib文件夹里面 在lib文件夹的同级目录下新建ind ...
- AgileEAS.NET SOA 中间件平台.Net Socket通信框架-介绍
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- [Linux] 查看jar包内容
jar vtf fileName.jar 用法: jar {ctxui}[vfm0Me] [jar-file] [manifest-file] [entry-point] [-C dir] file ...
- C++产生随机数
随机数 计算机的随机数都是由伪随机数,即是由小M多项式序列生成的,其中产生每个小序列都有一个初始值,即随机种子.(注意: 小M多项式序列的周期是65535,即每次利用一个随机种子生成的随机数的周期是6 ...
- SQL谜题(加减符号替代)
问题:将以下字符串”.1.2.3.4.5.6.7.8.9 = 1“中的符号点(.)更改为符号加(+)或符号(-),有多少种方法?请用SQL解决此问题 计算过程: CREATE TABLE #(VAL ...
- FABRIC单机开发者模式启动
在开始之前需要导出一个自定义变量,方便后续操作: export FABRIC=/opt/gopath/src/github.com/hyperledger/fabric/devenv 1.在真机上执行 ...