慕课网学习笔记02

如何利用CSS进行网页布局

内容来自慕课网

  • 浮动（float）和 绝对定位（position：absolute）可以让元素脱离文档流。
  • 清除浮动可以理解为打破横向排列。

    清除浮动的关键字是clear，官方定义如下：

    语法：

    clear : none | left | right | both

    取值：

    none : 默认值。允许两边都可以有浮动对象

    left : 不允许左边有浮动对象

    right : 不允许右边有浮动对象

    both : 不允许有浮动对象

    CSS浮动及清除浮动通俗讲解

    网页布局基础

  • 在盒子模型的三位立体结构图中，从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。
  • 当元素没有设置宽度，而且设置了浮动属性，元素的宽度会随着类容的变化而变化，当元素不含内容的时候，元素的宽度接近于0。
  • 相对定位（position：relative;）特点：
    • 相对于自身原有位置进行偏移；
    • 仍然处于标准文档流中（后一个元素排在此元素后面）；
    • 有偏移属性，可能会部分遮盖相邻元素。
  • 绝对定位偏移参照基准;
    • 如果没有祖先定位元素，以<html>为偏移参照基准；
    • 有已定位祖先元素，以距离其最近的已定位祖先元素为偏移参照基准。
  • 水平菜单添加整体背景：

    菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

固定层效果

  • position设置为fixed的时候，元素以浏览器的可视窗口作为偏移基准。位置固定，不会随着滚动条变化。

    JS基础

  • JS中单行注释用“//”,多行注释以"/*"开始，以"*/"结束。
  • 变量名可以任意取名，但要遵循命名规则:

    1.变量必须使用字母、下划线(_)或者美元符($)开始。

    2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

    3.不能使用JavaScript关键词与JavaScript保留字。

变量要先声明再赋值

  • 如何定义一个函数呢？基本语法如下:
function 函数名()
{
     函数代码;
}

JavaScript入门篇

语法：

Object.style.display = value

JavaScript进阶篇

  • 操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

//注意大小写
var myarray= new Array(8);
  • 用简单的方法创建数组和赋值：

第一种方法：

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

第二种方法：

var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
  • 二维数组

    1. 二维数组的定义方法一
var myarr=new Array();  //先声明一维
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }
  1. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
  • continue

    语句结构：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  { continue; }
 循环代码
}
  • 如果想对函数的结果进行处理怎么办呢？
function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}
  • 加载事件（onload）

    事件会在页面加载完成后，立即发生，同时执行被调用的程序。

Date对象

  • get/setFullYear() 返回/设置年份，用四位数表示。
  • getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:
<script type="text/javascript">
  var mydate=new Date();//定义日期对象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
  var mynum=mydate.getDay();//返回值存储在变量mynum中
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>
  • get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

字符串对象

  • charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
  • 字符串分割split()

    split() 方法将字符串分割为字符串数组，并返回此数组。

stringObject.split(separator,limit)
  • 提取字符串substring()

    substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法:

stringObject.substring(starPos,stopPos)

注意：

  • 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
  • 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
  • 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
  • 数组连接concat()

    concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

arrayObject.concat(array1,array2,...,arrayN)

注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中，代码如下：

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya);
</script>

运行结果：

1,2,3,4,5
1,2,3
  • 数组排序sort()

    语法:

arrayObject.sort(方法名)

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。

若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。

若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

  • 计时器setInterval()

    在执行时,从载入页面后每隔指定的时间执行代码。

setInterval(代码,交互时间);

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)
  • 取消计时器clearInterval()

    语法：

clearInterval(id_of_setInterval)
  • 计时器setTimeout()
setTimeout(代码,延迟时间);

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert(‘Hello!‘)", 3000 );
</script>
</head>
<body>
</body>
</html>
  • 取消计时器clearTimeout()
clearTimeout(id_of_setTimeout)
  • History 对象
window.history.[属性|方法]
  • 屏幕分辨率的高和宽

    window.screen 对象包含有关用户屏幕的信息。

    1 . screen.height 返回屏幕分辨率的高

    2 . screen.width 返回屏幕分辨率的宽

    注意:

    1 .单位以像素计。

    2 . window.screen 对象在编写时可以不使用 window 这个前缀。

  • 屏幕可用高和宽度

    1 . screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

2 . screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

第9章 DOM对象，控制HTML元素

  • 认识DOM

    HTML文档可以说由节点构成的集合，DOM节点有:

    1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
    2. 文本节点:向用户展示的内容，如<li>...</li>中的文本。
    3. 属性节点:元素属性，如<a>标签的链接属性href=”http://www.imooc.com”。
  • getElementsByName()方法
document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

  • 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
  • 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
  • getElementsByTagName()方法
getElementsByTagName(Tagname)

说明:

Tagname是标签的名称，如p、a、img等标签名。

和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

  • getAttribute()方法
elementNode.getAttribute(name)

说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

name：要想查询的元素节点的属性名字

  • setAttribute()方法

    setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

elementNode.setAttribute(name,value)
  • 节点属性

    在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

    1. nodeName : 节点的名称
    2. nodeValue ：节点的值
    3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型 节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

  • childNodes
elementNode.childNodes
  • 访问子结点的第一和最后项

    firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

    语法：

nodeObject.firstChild

lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：

nodeObject.lastChild
  • 访问父节点parentNode
nodeObject.parentNode
  • 访问兄弟节点

    nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

nodeObject.nextSibling

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling
  • 插入节点appendChild()

    在指定节点的最后一个子节点列表之后添加一个新的子节点。

    语法:

nodeObject.appendChild(newnode)
  • 删除节点removeChild()

    removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

    语法:

nodeObject.removeChild(node)

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下:

  • 替换元素节点replaceChild()

    replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

    语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。

oldnew : 必需，被 newnode 替换的对象。

注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。

newnode 必须先被建立。

- 创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)
  • 创建文本节点createTextNode

    document.createTextNode(data)方法创建新的文本节点，返回新创建的 Text 节点。

    语法：

document.createTextNode(data)
  • 浏览器窗口可视区域大小

不确定下面的代码是否正确

//不确定下面的代码是否正确
<script type="text/javascript">
    var w = document.documentElement.clientWidth
            || document.body.clientWidth
            || window.innerWidth;
    var h = document.documentElement.clientHeight
            || document.body.clientHeight
            || window.innerHeight;
    document.write("浏览器内部宽度：" + w + "</br>"
                    + "浏览器内部高度：" + h);
</script>
  • 网页尺寸scrollHeight

    scrollHeight和scrollWidth，获取网页内容高度和宽度。

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

  • 网页尺寸offsetHeight

    offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

    offsetHeight = clientHeight + 滚动条 + 边框。

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;
  • 网页卷去的距离与偏移量

时间： 2024-10-09 22:34:01

慕课网学习笔记02的相关文章

JavaScript入门--慕课网学习笔记

 JAVASCRIPT-(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间. <script type="text/javascript">表示在<script></script>之间的是文本类型(text),ja

JavaScript进阶--慕课网学习笔记

                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,

vagrant 慕课网 学习笔记

搭建一个环境,不需要重复配置,直接利用vagrant复制就可以了 vagrant 和 virtualbox 的版本必须匹配, 不匹配的话可能会出很多未知的错误 搭配问题可以去官网查看 所有源码在 githup.com/apanly/mooc 如果不能FQ 就请访问 git.oschina.net/apanly/mooc 安装git sudo apt-get install git http://www.imooc.com/video/14218 3-5 vagrant ThinkPHP5运行环境

【慕课网学习笔记】Java共享变量的可见性和原子性

1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那么这个变量就是这几个线程的共享变量. 可见性:一个线程对共享变量的修改,能够及时地到主内存并且让其他的线程看到. 怎么理解上面的可见性的意思呢? 线程对共享变量的修改,只能在自己的工作内存里操作,不能直接对主内存中的共享变量进行修改.而且一个线程不能直接访问另一个线程中的变量的值,只能通过主内存进行

php慕课网学习笔记

模板赋值在action.php里面$name='yz'; $this->name2=$name; 然后在html里面就可以直接调用此name <?php echo $name2; ?> 第二种方法: this->assign('变量名',变量值)   (可以连续的赋值) $date=date('Y-M-D'); $this->assign('name2',$name)->assign('sex','man')->assign('today',$date); <

【OpenGL 学习笔记02】宽点画线

我们要知道,有三种绘图操作是最基本的:清除窗口,绘制几何图形,绘制光栅化对象. 光栅化对象后面再解释. 1.清除窗口 比如我们可以同时清除颜色缓冲区和深度缓冲区 glClearColor (0.0, 0.0, 0.0, 0.0);//指定颜色缓冲区清除为黑色 glClearDepth(1.0);//指定深度缓冲区的清除值为1.0 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);//指定要清除的缓冲区并清除 2.绘制几何图形 先要设置绘制颜色,

SWIFT学习笔记02

1.//下面的这些浮点字面量都等于十进制的12.1875: let decimalDouble = 12.1875 let exponentDouble = 1.21875e1 let hexadecimalDouble = 0xC.3p0//==12+3*(1/16) 2.//类型别名,用typealias关键字来定义类型别名 typealias AudioSample = UInt16 var maxAmplitudeFound = AudioSample.min 3.//元组 let ht

Blender学习笔记 | 02 | 操作

Shift 点击不同图层 同时显示多图层物件 z 切换 Solid / Wireframe 视图模式 点选物件后M 移动到图层选项 Ctrl + 鼠标左键拖动 自由全选物件 B 方形区域圈选物件 Tab Object / Edit Mode 切换 T 开 / 关 侧栏 Ctrl + Tab 编辑状态下切换编辑对象 E Extrude Region 推挤区域.以发现为轴线. X 删除物件菜单 Blender学习笔记 | 02 | 操作,布布扣,bubuko.com

mongodb 学习笔记 02 -- CURD操作

mongodb 学习笔记 02 – CURD操作 CURD代表创建(Create).更新(Update).读取(Read)和删除(Delete)操作 创建库 直接 use 库名 然后创建collection 就可以创建库 创建collecion db.createCollection("collectionName") 隐式创建collection db.collectionName.insert({xxxxxx}) 删除collection db.collectionName.dro