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. UVA 11346 Probability (几何概型， 积分)

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=2321">https://uva ...

  2. Android开发经验小知识点

    <1> 设置屏幕无标题栏 在AndroidManifest.xml设置: Android:theme="@android:style/Theme.NoTitleBar"

  3. 带你走进EJB--EJB和Spring对比（转）

    http://blog.csdn.net/jnqqls/article/details/17723417 通过对EJB系列的总结和学习我们已经对EJB有了基本的了解,但是为了更进一步的去深入学习EJB ...

  4. C语言之函数指针、回调函数的使用

    一.背景 首先看下如下代码,这个定义是放在头文件的,在程序中tCdrvCallbackFkt也定义了另一个变量,而且括号后面还跟定义了几个变量,不理解这个定义. typedef void (PUBLI ...

  5. Windows上安装多个MySQL实例（转）

    在学习和开发过程中有时候会用到多个MySQL数据库,比如Master-Slave集群.分库分表,开发阶段在一台机器上安装多个MySQL实例就显得方便不少. 在 MySQL教程-基础篇-1.1-Wind ...

  6. 洛谷 P1416 攻击火星

    P1416 攻击火星 题目描述 一群外星人将要攻击火星. 火星的地图是一个n个点的无向图.这伙外星人将按照如下方法入侵,先攻击度为0的点(相当于从图中删除掉它),然后是度为1的点,依此类推直到度为n- ...

  7. menuconfig_kconfig

    这一节的主要内容: Menuconfig的操作 Kconfig和.config文件 Linux内核配置裁剪实验 linux编译器通过.config文件确认哪些代码编译进内核,哪些被裁减掉 menuco ...

  8. 13. 关于IDEA工具在springboot整合mybatis中出现的Invalid bound statement (not found)问题

    在一切准备就绪之后,测试test,却出现了org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...

  9. Node知识总结

    一. 伪装URL-SEO 伪URL重写 把一个动态页面的地址重写为静态页面的地址,为了方便网站的SEO优化 真实地址:http://item.jd.com/detail.php?id=12261336 ...

  10. python3 格式化输出给定时间的下一秒

    # 功能:输入一个时间,格式化输出该时间的下一秒 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan # 功能:输入一个 ...