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 学习之DRF (三)

    Django学习之DRF-03 视图集    1.视图集介绍    2.视图集基本使⽤        1.需求 使⽤视图集获取列表数据和单⼀数据        2.实现 class BookInfoV ...

  2. c++运算符重载-如何决定作为成员函数还是非成员函数

    The Decision between Member and Non-member The binary operators = (assignment), [] (array subscripti ...

  3. CF580C Kefa and Park dfs

    Kefa decided to celebrate his first big salary by going to the restaurant. He lives by an unusual pa ...

  4. POJ2828 Buy Tickets（线段树之插队问题）

    飞翔 问题是这样的:现在有n个人要买票,但是天黑可以随便插队.依次给出将要买票的n个人的数据信息.包含两项:pos,当前第i号人来了之后他肯定要插入到pos这个位置,如果当前pos无人,那最好了,直接 ...

  5. Codeforces Round #305 (Div. 2) B

    Description Mike and some bears are playing a game just for fun. Mike is the judge. All bears except ...

  6. XtraFinder

    About System Integrity Protection in OS X 10.11 Apple's article . System Integrity Protection blocks ...

  7. SQL Server Reporting Service(SSRS) 第六篇 SSRS 部署总结

    前段时间完成了第一批次SSRS报表的开发,本来以为大功已经告成,结果没有想到在整个发布与部署过程中还是遇到了很多的问题,现将这些问题一一列举出来,希望对以后能够有所启发! 1. 关于数据源与数据集的发 ...

  8. 从c到cpp对static 关键字的总结 需要整理下！！！！！！！！！！！！！！！！！！！！！！

    一个完整的程序,在内存中的分布情况如下: 具体分布图     自己看书去!!!!!1.栈区: 由编译器自动分配释放,像局部变量,函数参数,都是在栈区.会随着作用于退出而释放空间.3.堆区:程序员分配并 ...

  9. 基于MVC模式开发的后台框架

    1.ThinkCMF 2.NFine快速开发平台 3.力软快速开发框架 如有好的开发框架希望可以一起交流

  10. Mysql 游标的定义与使用方式

    创建游标: 首先在MySql中创建一张数据表: CREATE TABLE IF NOT EXISTS `store` (   `id` int(11) NOT NULL AUTO_INCREMENT, ...