HTML示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--HTML区域-->

    <h1>第一个标题</h1>

    <img src="57eb.jpg">

    <div class="nav-2014">

        <div class="w">

            <div class="w-spacer"></div>

            <div class="categorys">

                <div class="dt" style="color: red;font-size: 25px">家用电器分类</div>

                <div class="dp" style="color: green;font-size: 12px;">家用电器价格</div>

                <img src="rB3.jpg">

            </div>

            <span class="hr">11</span>

            <div class="navitems-2014 chr1 chr2">

                <div id="treasure"></div>

                <span class="clr clr1"></span>

                <span class="chr"></span>

                男：<input type="checkbox" value="nan">

                女:<input type="checkbox"  value="nv">

                <input type="text" value="2">

                <input type="text" value="3">

            </div>

            <ul>

                <li>第一行</li>

                <li>第二行</li>

                <li>第三行</li>

                <li>第四行</li>

            </ul>

        </div>

    </div>

    <h2>第二个标题</h2>

    <p style="width: 200px">第一段</p>

    <p>第二段</p>

</body>

</html>

css(name,|k,v|pro|fn) 访问匹配元素的样式属性

　　name:要访问的样式属性名

　　k,v ：以键值参数的方式修改要访问样式的属性名/值

　　pro: 以传入多个键值对的方式修改要访问样式的属性名/值

    <script src="jquery-3.1.0.js"></script>

    <script>

//        取到div元素,css样式中color属性

        $("div").css("color")

//        修改所有匹配元素css样式中color为red

        $("p").css("color",'red')

//        修改所有匹配元素css样式中color为red，同时设置多个属性

        $("p").css({"color":"white","background-color":'black'})

    </script>

　　offset([coordinates]) 获取修改匹配元素在当前视口的相对偏移

　　返回的对象包含两个以像素计的属性坐标：top,left

    <script src="jquery-3.1.0.js"></script>

    <script>

//        获取最后一个p元素

        var p = $("p:last")

//        获取p元素的top,left坐标

        var offset = p.offset()

//        修改p元素的html内容

        p.html("left: "+ offset.left + ",top:"+offset.top)

//        修改最后一个p元素的坐标位置

        $("p:last").offset({top:10,left:30})

    </script>

　　scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移

　　　　$(window).scrollTop()   # 当前窗口滚动条滚动的高度

　　　　$("#nid").scrollTop()   # 窗口中有窗口时，对应的nid小窗口的滚动高度

    <script src="jquery-3.1.0.js"></script>

    <script>

//        取得最后一个p元素相对滚动条顶部的偏移

        var p = $("p:first");

        $("p:last").text("ScrollTop:"+ p.scrollTop())

    </script>

　　height([val|fn]) 获得匹配元素当前计算的高度值px

　　　　$(window).height()   # 窗口的高度

　　　　$(document).height()  # 文档的高度

　　　　$("nid").height()  # 某标签的高度

　　width([val|fn]) 获得第一个匹配元素当前计算的宽度值px

　　innerHeight() 获得第一个匹配元素的内部区域高度（包括补白，但不包括边框）

　　innerWidth() 获得第一个匹配元素内部区域宽度（包括补白，但不包括边框）

　　outerHeight() 获取第一个匹配元素外部区域高度（包括补白和边框）

　　outerWidth() 获取第一个匹配元素外部区域宽度（包括补白和边框）

    <script src="jquery-3.1.0.js"></script>

    <script>

        $("p:last").height()

        $("p").width()

    </script>

　　

jquery之css操作的更多相关文章

  1. JQuery 之CSS操作

    JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p" ...

  2. JQuery常用CSS操作

    JQuery常用CSS操作 $(elem).css(obj):设置行内样式 $(elem).position():返回相对于父容器位置,只能获取不能设置 $(elem).offset(obj):返回相 ...

  3. jQuery基础--CSS操作、class操作、attr操作、prop操作

    1.1.1    css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...

  4. 【JQuery】css操作

    一.前言         接着上一章的内容,继续JQuery的学习 二.内容 css 设置或返回匹配元素的样式属性 $(selector).css(css-property-name) $(selec ...

  5. jquery对css操作

    1.css取得p的颜色:$(document).ready(function(){ var p= $("p").css("color"); alert(p);} ...

  6. jQuery的CSS操作

    .css()--获取匹配元素集合中的第一个元素的样式属性的值设置每一个匹配元素的一个或多个CSS属性. .hasClass()--确定不论什么一个匹配元素是否有被分配给定的(样式)类: .addCla ...

  7. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  8. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  9. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

随机推荐

  1. PCB Layout高速电路设计小知识点

    1.单位:1mil = 0.0254mm 2.default线宽及线距(综合考虑高速电路性能及PCB板厂制程能力):6mil 3.差分走线特征阻抗:100ohm 4.3W原则,即线间距采用3倍线宽,多 ...

  2. HTML 30分钟入门教程

    作者:deerchao 转载请注明来源 本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hy ...

  3. core Bluetooth（蓝牙4.0）

    蓝牙4.0以低功耗著称,一般也叫BLE(Bluetooth Low Energy). 目前主要应用的场景有:智能家居.运动手环和室内导航等. 利用core Bluetooth框架可以实现苹果设备与第三 ...

  4. javascript之小积累-匿名函数表达式的最佳实践

    在写js的时候,还是经常会用的匿名函数表达式,比如 setTimeout(function() { console.log(110); }, 1000); 上面那个function()就是匿名函数表达 ...

  5. 《HP大规模敏捷开发实践》读书笔记

    读这本书的心得,敏捷是实践出来的,哪怕不懂srcum**等方法,只要坚持心中的价值观,朝一个方向改进,哪怕不能“任何时候都拥有符合发布要求的代码”,今天比昨天好,也是成功.     通过业务分析确定开 ...

  6. Oracle监听器启动出错：本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案

    一.错误描述 登陆PL/SQL Developer登陆本地数据库时先报没有监听程序,查看服务发现Oracle监听服务没有启动.右击启动监听程序,报错: 错误描述:本地计算机上的OracleOraDb1 ...

  7. C#中的Excel操作【1】——设置Excel单元格的内容，打开Excel文件的一种方式

    前言 作为项目管理大队中的一员,在公司里面接触最多的就是Excel文件了,所以一开始就想从Excel入手,学习简单的二次开发,开始自己的编程之路! 程序界面 功能说明 打开文件按钮,可以由使用者指定要 ...

  8. hibernate一级缓存

    理解 Hibernate 一级缓存 Hibernate 一级缓存默认是打开,不需要任何的配置.实际上,你无法强制禁止它的使用. 如果你理解了一级缓存实际上和会话是关联的,就很容易理解一级缓存.总所周知 ...

  9. js switch 扩展

    //demo var num=99 switch(n){ case 80<n: document.write("优秀");break; case 70<n: docum ...

  10. linuxz终端开启echo颜色显示

    echo输出命令echo [选项] [输出内容]-e //支持反斜线控制的字符转换:控制字符:\a //输出警告音:\b //退格键,也就是向左删除键:\n //换行符:\r //回车键:\t //制 ...