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. MongoDB初识篇

    前言 一直听说MongonDB,却没有机会接触它,于是决定先从表面上认识它.MongoDB(分布式文档存储数据库)是一种介于关系型数据库和非关系型数据库之间的数据库,而且它是非关系数据库中最像关系型数 ...

  2. 洛谷P3901 数列找不同（莫队）

    传送门 我不管我不管我就是要用莫队 直接用莫队裸上 //minamoto #include<iostream> #include<cstdio> #include<alg ...

  3. Shell---自动测试局域网内的网络连通情况

    #!/bin/bash );do RE=`ping .$i` echo $RE >>result.log done

  4. Warning: Call to 'toArray()' with pre-sized array argument 'new String[list.size()]'

    当使用如下代码将List转换为Array类型时: List<String> list = new ArrayList<>(); String[] array = list.to ...

  5. Vue中添加过渡效果

    最近在学习Vue这个框架,发现新的版本中,官网的文档里面说的过渡效果,如果直接粘贴官方的例子中的代码,发现并没有过渡的效果,经过反复测试之后终于知道怎么搞了,把测试的过程总结一下,以便以后回顾. 贴上 ...

  6. [USACO08FEB]酒店Hotel 线段树 BZOJ 1593

    题目描述 The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and enjoy a ...

  7. HDU6299 Balanced Sequence (多校第一场1002) （贪心）

    Balanced Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  8. redis启动后出现"WARNING you have Transparent Huge Pages (THP) support enabled in your kernel"问题

    问题描述:启动redis后出现:WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This w ...

  9. Mybatis学习笔记(二) —— mybatis入门程序

    一.mybatis下载 mybaits的代码由github.com管理,下载地址:https://github.com/mybatis/mybatis-3/releases 下载完后的目录结构: 二. ...

  10. String转不同type的类对象

    import org.springframework.beans.SimpleTypeConverter; private Object deserializeValue(Class<?> ...