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" ...
随机推荐
- Hadoop作业性能指标及參数调优实例 （二）Hadoop作业性能调优7个建议
作者:Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Hado ...
- android hander
http://www.cnblogs.com/plokmju/p/android_Handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了解决And ...
- Vue的学习--怎么在vue-cli中写网页
vue.min.js和vue-cli的区别和联系我现在还是没有太清楚,大概是还没搞清楚export default和new Vue的区别,先浅浅记录一下怎么“用vue-cli来写网页”. “vue-c ...
- vue 刷新当前页面的方式
1.使用window.location.href window.location.replace() window.location.reload() 会出现空白,体验不是很好 2.先进入一个空路由, ...
- 事件循环（Event Loop）
1.什么是事件循环? JavaScript为单线程执行的,所以是从上到下依次执行,js分为两个任务,宏任务和微任务 首先执行宏任务(第一次就是执行所有的同步代码),再执行所有的微任务,执行完毕之后再次 ...
- 洛谷 P1679 神奇的四次方数
P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...
- Codeforces 559A Gerald's Hexagon 数三角形
题意:按顺序给出一个各内角均为120°的六边形的六条边长,求该六边形能分解成多少个边长为1的单位三角形. 把单位三角形面积看做1,实际上就是求六边形面积.随便找六边形的三条互相不相邻的边,分别以这三条 ...
- mysql 语句优化心得
排序导致性能较慢 优化策略:1.尽量不使用排序 2.只查有索引的结果然后 内连接查询 select bizchance0_.* from biz_chance bizchance0_, biz_b ...
- GOROOT,GOPATH,GOBIN,project
GOROOT,GOPATH,GOBIN,project目录 我们接下来一个一个来看关于Go语言中的三个目录的详细解释先通过go env查看go的环境变量(我这里是mac的环境,所以可能和你的不同) ...
- 软件——机器学习与Python，聚类，K——means
K-means是一种聚类算法: 这里运用k-means进行31个城市的分类 城市的数据保存在city.txt文件中,内容如下: BJ,2959.19,730.79,749.41,513.34,467. ...