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样式的更多相关文章

  1. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  2. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  3. 转：jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  4. 使用jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  5. jquery修改带!important的css样式

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  6. jquery改变多个css样式

    <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax ...

  7. jquery validate的漂亮css样式验证

    自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  8. jquery设置多个css样式

    $(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...

  9. 用jQuery设置多个css样式

    $("#show_one").css({"position":"fixed","top":"0px" ...

随机推荐

  1. Excel VBA简单使用——数据缺失处理

    VBA(Visual Basic for Applications)是VB的一种宏语言.用来扩展应用程式的功能.特别是Microsoft Office软件. 转载请注明原文地址:http://blog ...

  2. 购买VPS时机房的选择

    购买VPS时机房的选择 对于配置差不多的VPS,距离越近的一般网速越快,所以有必要使用谷歌地图,查看城市的所在位置 比如ChicagoVPS,不时有邮件销售它的VPS,虽然说不上怎么好,但是一般的使用 ...

  3. js35

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. menu-代码添加以及add方法参数意义

    今天需要给一个menu动态添加一个item,先把方法记录如下 @Override public boolean onCreateOptionsMenu(Menu menu) { menu.add(Me ...

  5. elasticsearch java 客户端之action简介

    上一篇介绍了elasticsearch的client结构,client只是一个门面,在每个方法后面都有一个action来承接相应的功能.但是action也并非是真正的功能实现者,它只是一个代理,它的真 ...

  6. 1.24 Python知识进阶 - 类与对象

    类 语法格式: class Dog(object): print("the dog is barking ...") Dog为类名,object为要继承的基类,Dog类会从基类ob ...

  7. BZOJ3672: [Noi2014]购票(CDQ分治，点分治)

    Description  今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会.        全国的城市构成了一棵以SZ市为根的有根树 ...

  8. 【2017"百度之星"程序设计大赛 - 初赛（A）】今夕何夕

    [链接]http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=775&pid=1005 [题意] 在这里写题意 [题 ...

  9. jsp中标签id和name的区别（转）

    name原来是为了标识之用,但是现在根据规范,都建议用id来标识元素. 但是name在以下用途是不能替代的:1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多na ...

  10. Redis .Net客户端源码

    1.简单介绍 当前NoSql使用已经极为普遍,无论是Java生态圈,还是.net生态圈.大大小小的Web站点在追求高性能高可靠性方面,不由自主都选择了NoSQL技术作为优先考虑的方面.主流的技术有:H ...