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. AsyncTask源代码翻译

    前言: /** <p>AsyncTask enables proper and easy use of the UI thread. This class allows to perfor ...

  2. 为什么会出现NoSQL数据库

    为什么会出现NoSQL数据库 一.总结 一句话总结:sql不支持分布式且且有性能瓶颈且不支持分布式,不同NoSQL适合不同的场景 1."不同的NoSQL数据库只适合不同的场景"这句 ...

  3. 使用Notepad++的XML Tools插件格式化XML文件

    转自“”:https://blog.csdn.net/qq_36279445/article/details/79803310 1. 安装XML Tools插件 (1) 通过网址http://sour ...

  4. Spring中提供的集合工具类util CollectionUtils

    转自:https://blog.csdn.net/fangwenzheng88/article/details/78457850 CollectionUtils类 /* * Copyright 200 ...

  5. oracle学习之路（二）------数组类型/记录类型的使用

    Oracle记录类型介绍 RECORD:用户自己定义数据类型,由单行多列的标量构成的复合数据类型.它将一个或多个标量封装成一个对象进行操作记录不能够总体拿来比較也不能够总体推断为空.能够总体拿来赋值. ...

  6. 数学定理证明机械化的中国学派（II）

    所谓"学派"是指:存在一帮人,具有同样或接近的学术观点或学术立场,採用某种特定的"方法"(或途径),在一个学术方向上共同开展工作.而且做出了相当有迎影响的学术成 ...

  7. pt支持的格式

  8. windows下配置mycat与常见问题解决

    mycat官网:http://www.mycat.org.cn/ wiki:https://github.com/MyCATApache/Mycat-Server/wiki MyCat使用Mysql的 ...

  9. 编程之路-client学习知识点纲要（Web/iOS/Android/WP）

    Advanced:高级内容 Architect:架构设计 Core:框架底层原理分析 Language:框架经常使用语言 Objective-C Dart Swift Java Network:网络 ...

  10. Spring Boot中的缓存支持（一）注解配置与EhCache使用

    Spring Boot中的缓存支持(一)注解配置与EhCache使用 随着时间的积累,应用的使用用户不断增加,数据规模也越来越大,往往数据库查询操作会成为影响用户使用体验的瓶颈,此时使用缓存往往是解决 ...