慕课网学习笔记02

时间：2016-06-03 19:30:37 阅读：298 评论：0 收藏：0 [点我收藏+]

标签：

如何利用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入门篇

JS中如何输出空格？
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

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
   }
 }

二维数组的定义方法二

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 属性: 节点的名称，是只读的。

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

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 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;

网页卷去的距离与偏移量

慕课网学习笔记02

标签：

原文地址：http://blog.csdn.net/eddieeddieeddiejones/article/details/51326903

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

慕课网学习笔记02

如何利用CSS进行网页布局

网页布局基础

固定层效果

JS基础

JavaScript入门篇

JavaScript进阶篇

Date对象

字符串对象

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