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. ReactNavtive框架教程（4）

    开头的响应码, 这些代码都很实用. 比如202 和 200表示返回一个推荐位置的列表.当完毕这个实例后.你能够尝试处理这些返回码.并将列表提供给用户选择. 保存,返回模拟器,按下Cmd+R ,然后搜索 ...

  2. lubuntu自动登录(lxde)

    lubuntu自动登录(lxde) 1.重启ubuntu,在grub界面长按shirft进入grub菜单: 2.选择recovery mode,按"e"键进入编辑页面: 3.把ro ...

  3. Android ViewPager嵌套ViewPager滑动冲突处理方法

    dispatchTouchEvent方法用于事件的分发,Android中所有的事件都必须经过这个方法的分发, 然后决定是自身消费当前事件还是继续往下分发给子控件处理.返回true表示不继续分发,事件没 ...

  4. iTOP-4412开发板p2p视频

    整体框架: 一.发送端 1.摄像头通过V4L2接口得到YUV视频格式,可以在win7上用yuvplayer播放 2.使用4412硬件编码模块MFC提供的接口进行硬件编码,得到.264文件,可以在win ...

  5. 今天看到可以用sqlalchemy在python上访问Mysql

    from sqlalchemy import create_engine, MetaData, and_ 具体的还没有多看.

  6. 3. Spring Boot Servlet

    转自:https://blog.csdn.net/catoop/article/details/50501686

  7. Android 利用代码在屏幕中间位置显示ProgressDialog和ProgressBar

    package cc.testprogressdialog; import android.os.Bundle; import android.view.Gravity; import android ...

  8. python 序列排序 排序后返回相应的索引

    https://blog.csdn.net/longwei92/article/details/83098289 https://blog.csdn.net/u013731339/article/de ...

  9. NLP系列(1)_从破译外星人文字浅谈自然语言处理的基础

    作者:龙心尘 &&寒小阳 时间:2016年1月. 出处: http://blog.csdn.net/longxinchen_ml/article/details/50543337, h ...

  10. css选择器.md

    css选择器总结 1.元素选择器 如:*{},body{},p{} ; xml中note{},to{},from{} 2.class与id选择器 如:.class{},#id{} 3.伪类选择器 选择 ...