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. 【吴节操点评】中国企业SaaS应用深谙未来者寥寥数几 两极分化将加剧

    数年前,在国外企业级应用如火如荼的时候.国内却是一片空白.而现在企业SaaS应用市场,包含用友.金蝶.东软在内的三巨头.已经有数十家之多.相比美国3000亿美元的企业应用三巨头来说,中国企业应用前三甲 ...

  2. Android Cordova 插件开发之编写自己定义插件

    前言 本文适合Android+web的复合型人才,由于cordova本身就是混合开发,所以在Android开发的基础上,还要懂web相关技术(HTML+CSS+JS).可是也有例外,比方我.仅仅需负责 ...

  3. WINDOWS8.1企业版官方下载

    这是评估版 WINDOWS8.1企业版官方下载源 https://www.itechtics.com/download-windows-8-1-enterprise-offline-installer ...

  4. 20.Node.js EventEmitter的方法和事件

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html EventEmitter 提供了多个属性,如 on 和 emit.on 函数用于绑定事件函数, ...

  5. 15.Node.js REPL(交互式解释器)

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电 ...

  6. BZOJ2157: 旅游（LCT）

    Description Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间 ...

  7. 数据类型的提升（promotion）

    假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...

  8. Core Animation 文档翻译—附录A（Layer样貌相关属性动画）

    前言   在渲染过程中,核心动画获取Layer的各种属性并以特定的顺序渲染他们.这个顺序决定了Layer的最终的样貌.本节将会阐述通过设置不同的Layer样貌相关属性对应产生的渲染结果. 注意:Mac ...

  9. 洛谷 P1143 进制转换

    P1143 进制转换 题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 输入数据共有三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进 ...

  10. VIP的转移

    首先查看vip在各个节点的状态 [root@rac2 ~]# ifconfig eth0 Link encap:Ethernet HWaddr 08:00:27:C9:28:D0 inet addr: ...