jquery-8 jquery如何处理css样式
jquery-8 jquery如何处理css样式
一、总结
一句话总结：
1、如何获取网页的三个高？
1)可视区域的高
$(window).height();
2)文档总高度
$(document).height();
3)滚动的高
$(window).scrollTop();
2、标签的三种类型的宽高是哪三种？
height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();
3、position()和offset()的区别是什么？
position是相对父亲的位置
offset是相对窗口左上角的位置
二、jquery如何处理css样式
1、相关知识
CSS处理:
1.CSS样式
css();
css({});
2.位置
offset();
position();
scrollTop(val);
3.尺寸
height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();
4.获取三个高
1)可视区域的高
$(window).height();
2)文档总高度
$(document).height();
3)滚动的高
$(window).scrollTop();
2、代码
position定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} .main{
width:1000px;
height:500px;
position: absolute;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-250px;
box-shadow:0px 0px 5px 5px #000;
}
.shop{
width:200px;
height:200px;
overflow: hidden;
box-shadow:0px 0px 5px 5px #ccc;
float: left;
margin-left:40px;
margin-top:10px;
} .img{
position: absolute;
border:10px solid #ccc;
border-radius:200px;
overflow: hidden;
width:200px;
height:200px;
display: none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='main'>
<div class='img'>
<img src="a.png" alt="">
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
</div>
</body>
<script>
$('.shop').mouseenter(function(){
x=$(this).position().left+40;
y=$(this).position().top+10+200; $('.img').show().css({'top':y+'px','left':x+'px'});
});
</script>
</html>
获取屏幕滚动的高
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<h1>0000001</h1>
<h1>0000002</h1>
<h1>0000003</h1>
<h1>0000004</h1>
<h1>0000005</h1>
<h1>0000006</h1>
<h1>0000007</h1>
<h1>0000008</h1>
<h1>0000009</h1>
<h1>0000010</h1>
<h1>0000011</h1>
<h1>0000012</h1>
<h1>0000013</h1>
<h1>0000014</h1>
<h1>0000015</h1>
<h1>0000016</h1>
<h1>0000017</h1>
<h1>0000018</h1>
<h1>0000019</h1>
<h1>0000020</h1>
<h1>0000021</h1>
<h1>0000022</h1>
<h1>0000023</h1>
<h1>0000024</h1>
<h1>0000025</h1>
<h1>0000026</h1>
<h1>0000027</h1>
<h1>0000028</h1>
<h1>0000029</h1>
<h1>0000030</h1>
<h1>0000031</h1>
<h1>0000032</h1>
<h1>0000033</h1>
<h1>0000034</h1>
<h1>0000035</h1>
<h1>0000036</h1>
<h1>0000037</h1>
<h1>0000038</h1>
<h1>0000039</h1>
<h1>0000040</h1>
<h1>0000041</h1>
<h1>0000042</h1>
<h1>0000043</h1>
<h1>0000044</h1>
<h1>0000045</h1>
<h1>0000046</h1>
<h1>0000047</h1>
<h1>0000048</h1>
<h1>0000049</h1>
<h1>0000050</h1>
<h1>0000051</h1>
<h1>0000052</h1>
<h1>0000053</h1>
<h1>0000054</h1>
<h1>0000055</h1>
<h1>0000056</h1>
<h1>0000057</h1>
<h1>0000058</h1>
<h1>0000059</h1>
<h1>0000060</h1>
<h1>0000061</h1>
<h1>0000062</h1>
<h1>0000063</h1>
<h1>0000064</h1>
<h1>0000065</h1>
<h1>0000066</h1>
<h1>0000067</h1>
<h1>0000068</h1>
<h1>0000069</h1>
<h1>0000070</h1>
<h1>0000071</h1>
<h1>0000072</h1>
<h1>0000073</h1>
<h1>0000074</h1>
<h1>0000075</h1>
<h1>0000076</h1>
<h1>0000077</h1>
<h1>0000078</h1>
<h1>0000079</h1>
<h1>0000080</h1>
<h1>0000081</h1>
<h1>0000082</h1>
<h1>0000083</h1>
<h1>0000084</h1>
<h1>0000085</h1>
<h1>0000086</h1>
<h1>0000087</h1>
<h1>0000088</h1>
<h1>0000089</h1>
<h1>0000090</h1>
<h1>0000091</h1>
<h1>0000092</h1>
<h1>0000093</h1>
<h1>0000094</h1>
<h1>0000095</h1>
<h1>0000096</h1>
<h1>0000097</h1>
<h1>0000098</h1>
<h1>0000099</h1>
<h1>0000100</h1>
</body>
<script>
$(window).scroll(function(){
h=$(window).scrollTop();
document.title=h;
});
</script>
</html>
jquery-8 jquery如何处理css样式的更多相关文章
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- 转：jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 使用jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jquery修改带!important的css样式
由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...
- jquery改变多个css样式
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax ...
- jquery validate的漂亮css样式验证
自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- jquery设置多个css样式
$(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...
- 用jQuery设置多个css样式
$("#show_one").css({"position":"fixed","top":"0px" ...
随机推荐
- 使用NPOI时写的几个辅助方法
简介:包含:获取单元格合并信息GetMergedCellAddress.获取引用单元格字符串ConvertAddressToString.获取单元格字符串格式内容CellValueToString p ...
- golang sync.Once
package main import ( "fmt" "sync" "time" ) func main() { var once syn ...
- BZOJ3529: [Sdoi2014]数表(莫比乌斯反演，离线)
Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...
- 一次Linux磁盘损坏导致系统不可用恢复实例
Linux操作系统的server重新启动后.系统启动报错,系统无法正常使用. 1.报错信息 1.1.报错屏幕信息 1.2.报错信息提取关键信息 (1)/dev/sda3:File -(inode #1 ...
- [Node & Tests] Intergration tests for Authentication
For intergration tests, always remember when you create a 'mass' you should aslo clean up the 'mass' ...
- OGRE之跳出漫长的编译等待
当你新建一个OGRE项目时是否发现那漫长的编译等待时间差点儿让你崩溃? 当你改动代码不断进行调试时是否由于那漫长的编译等待而让你烦恼? 假设是,那么请继续往下看,您将受益匪浅. ----------- ...
- Kurento应用开发指南(以Kurento 5.0为模板) 之中的一个：简单介绍，安装与卸载
文件夹 1. Kurento是什么 3 2. Kurento简单介绍 3 2.1 WebRTC媒体server ...
- eclipse-hierarchyviewer 不能使用
今天安装了adt-bundle以后,发现hierarchyviewer不能用.点开了以后连手机没有效果.后来发现,还需要进入hierarchyviewer所在的sdk目录进行下权限的设置 chmod ...
- C#string转换为Datetime
DateTime.ParseExact("0710090000", "MMddHHmmss", CultureInfo.CurrentCulture, Date ...
- java解压多目录Zip文件(解决中文乱码问题)--转载
原文地址:http://zhangyongbo.iteye.com/blog/1749439 import java.io.BufferedOutputStream; import java.io.F ...