html代码

  1. <p style="color:blue;">武汉PHP培训-武汉长乐教育</p>

css()方法

  1. $("p").css("color") //获取颜色样式
  2. $("p").css("color", "red"); //设置样式
  3. $("p").css({"color":"red", "font-size":"20px"});

height()和width()方法

  1. $("p").height(); //获取高度
  2. $("p").height("100px"); //设置高度
  3. $("p").width(); //获取宽度
  4. $("p").width("400px") //设置宽度

offset()方法

  1. var offset = $(".children").offset(); //获取元素在当前视窗的相对偏移
  2. //console.log(offset)
  3. var left = offset.left; //获取左偏移
  4. var top = offset.top; //获取上偏移

position()方法

  1. var position = $(".children").position(); //获取relative或absolute元素的祖先节点相对偏移
  2. var left = position.left; //获取左偏移
  3. var top = position.top; //获取上偏移

下面看例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. .parent{
  8. width: 500px;
  9. height: 500px;
  10. border: 1px solid;
  11. position: relative;
  12. top:100px;
  13. left:300px;
  14. }
  15. .children{
  16. width: 100px;
  17. height: 100px;
  18. border: 1px solid #08c;
  19. position: absolute;
  20. top:100px;
  21. left:300px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="parent">
  27. <div class="children"></div>
  28. </div>

scrollTop()方法和scrollLeft()方法

  1. <html>
  2. <head>
  3. <title></title>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. .parent{
  7. width: 200px;
  8. height: 200px;
  9. border: 1px solid;
  10. overflow: auto;
  11. }
  12. .children {
  13. width: 500px;
  14. height: 500px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="parent">
  20. <div class="children">
  21. scrollTop()方法和scrollLeft()
  22. </div>
  23. </div>
  24. <button class="button1">获取scrollTop</button><br>
  25. <button class="button2">设置scrollTop</button>
  26. <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  27. <script type="text/javascript">
  28. $(function(){
  29. $(".button1").click(function(){
  30. var scrollTop=$("div").scrollTop(); //获取元素滚动条距离上面的位置
  31. var scrollLeft=$("div").scrollLeft(); //获取元素滚动条距离左边的位置
  32. })
  33. $(".button2").click(function(){
  34. $("div").scrollTop(200); //设置元素滚动条距离上面的位置
  35. $("div").scrollLeft(200); //设置元素滚动条距离左边的位置
  36. })
  37. })
  38. </script>
  39. </body>
  40. </html>

jQuery中的CSS-DOM操作的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  3. JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  4. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  5. jQuery(3)——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  6. jQuery学习笔记(DOM操作)

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  7. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

  8. jquery学习:选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  9. jQuery 第二章 实例方法 DOM操作选择元素相关方法

    进一步选择元素相关方法:  .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作  .end()回退操作 .get() $(&qu ...

  10. jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. fabric java chaincode 开发

    链码的开发不部分参考官网demo即可. 本文不会详细介绍开发过程 笔者启动的是一个gradle工程,也就是jar包管理使用的是gradle. chaincode 源码: /* Copyright IB ...

  2. 图片压缩工具之grunt-contrib-imagemin

    对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小,加快页面访问速度.Google Pagespeed最佳实践建议我们用 jpegtran 或 ...

  3. s5pv210移植Minigui3.0.12

    移植平台:ubuntu:14.04 开发板:s5pv210(A8) Minigui版本:3.0.12-------------------------------------------------- ...

  4. UESTC 趣味赛命题报告E

    https://lutece.xyz/contest/detail/10/ 题目很简单,套路题: 求n个数中选k个数使得gcd最大: 很容易想到,我们只需要将因子分解出来然后计数即可: (只是这个id ...

  5. 黑马学习CSS之选择器 简单选择器,结合符,选择器,选择器组, 选择器优先级,名称空间

  6. C语言把字符串转换为数字

    C当中有一些函数专门用于把字符串形式转换成数值形式. printf()函数和sprintf()函数 -->通过转换说明吧数字从数字形式转换为字符串形式: scanf()函数把输入字符串转换为数值 ...

  7. JTAG与JLink说明

    JTAG接口解读 通常所说的JTAG大致分两类,一类用于测试芯片的电气特性,检测芯片是否有问题:一类用于Debug:一般支持JTAG的CPU内都包含了这两个模块. 一个含有JTAG Debug接口模块 ...

  8. pacemaker +corosync高可用

    server1:yum install pssh-2.3.1-2.1.x86_64.rpm  crmsh-1.2.6-0.rc2.2.1.x86_64.rpm -yyum install -y pac ...

  9. IOS开发-基于WebDriverAgent代理服务,实现iOS手机app自动化测试的框架搭建

    导引 iOS自动化测试一直使用的appium,iOS系统升级至10.0 Xcode8.0之后,改用WebDriverAgent代理服务作为server,编写了一套基于WebDriverAgent服务 ...

  10. 基于spring boot 和MDC实现 同一笔记录的日志跟踪实现--1.filter

    同一个项目中,一般包含controller/servlet.service.dao等.1笔记录的日志贯穿于controller.service.dao中,在并发情况下,那如何找出该笔日志? 可通过以下 ...