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"); //设置高度
  4. $("p").width(); //获取宽度
  5. $("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. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="parent">
  28. <div class="children"></div>
  29. </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;
  12. }
  14. .children {
  15. width: 500px;
  16. height: 500px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="parent">
  22. <div class="children">
  23. scrollTop()方法和scrollLeft()
  24. </div>
  25. </div>
  26. <button class="button1">获取scrollTop</button><br>
  27. <button class="button2">设置scrollTop</button>
  29. <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  30. <script type="text/javascript">
  31. $(function(){
  32. $(".button1").click(function(){
  33. var scrollTop=$("div").scrollTop(); //获取元素滚动条距离上面的位置
  34. var scrollLeft=$("div").scrollLeft(); //获取元素滚动条距离左边的位置
  35. })
  36. $(".button2").click(function(){
  37. $("div").scrollTop(200); //设置元素滚动条距离上面的位置
  38. $("div").scrollLeft(200); //设置元素滚动条距离左边的位置
  39. })
  40. })
  41. </script>
  42. </body>
  43. </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. django 基础框架学习 (一)

    Django-01 Web框架 1.Web应⽤程序处理流程  : 2.Web框架的意义            1.⽤于搭建Web应⽤程序            2.免去不同Web应⽤相同代码部分的重复 ...

  2. Linux定时任务（crond）

    1.Crond定义 crond是Linux系统中用来定期执行命令或指定程序的一种服务或软件. (1)linux系统自身定期执行的任务(轮询系统日志.备份数据等) (2)用户执行的任务(定时更新同步时间 ...

  3. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  4. 记一次IIS应用程序域崩溃的原因

    在日常工作中,每次新的功能上线前,我们会搭建一个测试环境提供给客户测试使用,确定无误后才会更新到正式环境上.这一次也不例外,在约定好时间地点,客户进行集中化测试的过程中,反应网站系统打不开,报500错 ...

  5. SysPeek打不开解决方法

    SysPeek 是Linux平台下一款简洁小巧的系统状态指示软件,可实时显示 CPU.Memory.Swap.硬盘和网络使用情况.然而最近却使用不了,打不开.无论点击图标或者是终端打开,都不显示.看错 ...

  6. boost库checked_delete的使用

    在查看boost库时发现一个小文件checked_delete.hpp里面几个小函数,它的作用用很简短的话来说:防止未定义的行为造成delete时的内存泄露.实现如下: template<cla ...

  7. 【转】C#中HttpWebRequest的GetRequestStream执行的效率太低，甚至偶尔死掉

    http://www.cnblogs.com/summer_adai/archive/2013/04/26/3045261.html

  8. flex item的width VS flex-basis

    flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...

  9. [转]SQL truncate 、delete与drop区别

    转自: https://www.cnblogs.com/8765h/archive/2011/11/25/2374167.html 相同点: 1.truncate和不带where子句的delete.以 ...

  10. Python条件与循环

    1.条件语句: 形式: if 判断语句 : 执行语句1elif 判断语句2: 执行语句2elif 判断语句3: 执行语句3#...else: 执行语句4    占位符 pass 2.循环语句 1.wh ...