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定位

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10 
11         .main{
12             1000px;
13             height:500px;
14             position: absolute;
15             left:50%;
16             top:50%;
17             margin-left:-500px;
18             margin-top:-250px;
19             box-shadow:0px 0px 5px 5px #000;
20         }
21         .shop{
22             200px;
23             height:200px;
24             overflow: hidden;
25             box-shadow:0px 0px 5px 5px #ccc;
26             float: left;
27             margin-left:40px;
28             margin-top:10px;
29         }
30 
31         .img{
32             position: absolute;
33             border:10px solid #ccc;
34             border-radius:200px;
35             overflow: hidden;
36             200px;
37             height:200px;
38             display: none;
39         }
40     </style>
41     <script src="jquery.js"></script>
42 </head>
43 <body>
44     <div class='main'>
45         <div class='img'>
46             <img src="a.png" alt="">
47         </div>
48         <div class='shop'>
49             <img src="b.jpg" width='100%'>
50         </div>    
51         <div class='shop'>
52             <img src="b.jpg" width='100%'>
53         </div>    
54         <div class='shop'>
55             <img src="b.jpg" width='100%'>
56         </div>    
57         <div class='shop'>
58             <img src="b.jpg" width='100%'>
59         </div>    
60     </div>
61 </body>
62 <script>
63 $('.shop').mouseenter(function(){
64     x=$(this).position().left+40;
65     y=$(this).position().top+10+200;
66 
67     $('.img').show().css({'top':y+'px','left':x+'px'});
68 });
69 </script>
70 </html>

获取屏幕滚动的高

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>index</title>
  6     <style>
  7         *{
  8             font-family: 微软雅黑;
  9         }
 10     </style>
 11     <script src="jquery.js"></script>
 12 </head>
 13 <body>
 14     <h1>0000001</h1>
 15     <h1>0000002</h1>
 16     <h1>0000003</h1>
 17     <h1>0000004</h1>
 18     <h1>0000005</h1>
 19     <h1>0000006</h1>
 20     <h1>0000007</h1>
 21     <h1>0000008</h1>
 22     <h1>0000009</h1>
 23     <h1>0000010</h1>
 24     <h1>0000011</h1>
 25     <h1>0000012</h1>
 26     <h1>0000013</h1>
 27     <h1>0000014</h1>
 28     <h1>0000015</h1>
 29     <h1>0000016</h1>
 30     <h1>0000017</h1>
 31     <h1>0000018</h1>
 32     <h1>0000019</h1>
 33     <h1>0000020</h1>
 34     <h1>0000021</h1>
 35     <h1>0000022</h1>
 36     <h1>0000023</h1>
 37     <h1>0000024</h1>
 38     <h1>0000025</h1>
 39     <h1>0000026</h1>
 40     <h1>0000027</h1>
 41     <h1>0000028</h1>
 42     <h1>0000029</h1>
 43     <h1>0000030</h1>
 44     <h1>0000031</h1>
 45     <h1>0000032</h1>
 46     <h1>0000033</h1>
 47     <h1>0000034</h1>
 48     <h1>0000035</h1>
 49     <h1>0000036</h1>
 50     <h1>0000037</h1>
 51     <h1>0000038</h1>
 52     <h1>0000039</h1>
 53     <h1>0000040</h1>
 54     <h1>0000041</h1>
 55     <h1>0000042</h1>
 56     <h1>0000043</h1>
 57     <h1>0000044</h1>
 58     <h1>0000045</h1>
 59     <h1>0000046</h1>
 60     <h1>0000047</h1>
 61     <h1>0000048</h1>
 62     <h1>0000049</h1>
 63     <h1>0000050</h1>
 64     <h1>0000051</h1>
 65     <h1>0000052</h1>
 66     <h1>0000053</h1>
 67     <h1>0000054</h1>
 68     <h1>0000055</h1>
 69     <h1>0000056</h1>
 70     <h1>0000057</h1>
 71     <h1>0000058</h1>
 72     <h1>0000059</h1>
 73     <h1>0000060</h1>
 74     <h1>0000061</h1>
 75     <h1>0000062</h1>
 76     <h1>0000063</h1>
 77     <h1>0000064</h1>
 78     <h1>0000065</h1>
 79     <h1>0000066</h1>
 80     <h1>0000067</h1>
 81     <h1>0000068</h1>
 82     <h1>0000069</h1>
 83     <h1>0000070</h1>
 84     <h1>0000071</h1>
 85     <h1>0000072</h1>
 86     <h1>0000073</h1>
 87     <h1>0000074</h1>
 88     <h1>0000075</h1>
 89     <h1>0000076</h1>
 90     <h1>0000077</h1>
 91     <h1>0000078</h1>
 92     <h1>0000079</h1>
 93     <h1>0000080</h1>
 94     <h1>0000081</h1>
 95     <h1>0000082</h1>
 96     <h1>0000083</h1>
 97     <h1>0000084</h1>
 98     <h1>0000085</h1>
 99     <h1>0000086</h1>
100     <h1>0000087</h1>
101     <h1>0000088</h1>
102     <h1>0000089</h1>
103     <h1>0000090</h1>
104     <h1>0000091</h1>
105     <h1>0000092</h1>
106     <h1>0000093</h1>
107     <h1>0000094</h1>
108     <h1>0000095</h1>
109     <h1>0000096</h1>
110     <h1>0000097</h1>
111     <h1>0000098</h1>
112     <h1>0000099</h1>
113     <h1>0000100</h1>
114 </body>
115 <script>
116 $(window).scroll(function(){
117     h=$(window).scrollTop();
118     document.title=h;
119 });
120 </script>
121 </html>