A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

wg6516

中级黑马

  • 黑马币:113

  • 帖子:35

  • 精华:0

© wg6516 中级黑马   /  2019-1-15 17:24  /  883 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

总结一下近来学习的难点与知识点,从基础班的html和css开始到就业班的js,梳理一下我个人觉得的难点和重要的点,没有系统的梳理.1.作用域概念:
作用域指:一套设计良好的用来存储变量、并且之后可以方便找到这些变量的规则。
说的更细致点,作用域就是一套负责收集并维护所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限。
作用域中查询机制:
在作用域范围内中,引擎会对变量执行LHS查询和RHS查询。这两个查询从字面意思上理解就是查询赋值操作左侧的变量和查询赋值操作的右侧。
意思大致对,但并不完全精准,正确的理解应是:查询赋值操作的目标(LHS)和查询赋值操作的源头(RHS)。
嵌套作用域的查询路径:
在实际开发过程中,作用域常常不是只有一个,而是多个作用域嵌套的。即全局作用域可能包含若干个父局部作用域,一个父局部作用域又可能会包含若干个子局部作用域…如此下去。当然也不可能嵌套层级太多,太多就晕,看到会想杀人的…
那么在存在嵌套作用域的情况下,某个变量的查询规则又是什么呢?很简单,在当前作用域中无法找到该变量时,引擎就会自变量所处当前作用域逐级向上冒泡般的查询,遵循就近原则,哪个作用域中最先查询到该变量,返回相应值后这事就算结束。或者直到抵达全局作用域也没有时,则返回个undefined就算了事。
总结下:
作用域是一套根据名称查询变量的规则,这套规则规定了在何处(嵌套层级)以及如何查找变量(LHS or RHS)。
如果查找的目的是对变量赋值,就会使用LHS查询;如果查找的目的是获取变量的值,就会使用RHS查询。
其中赋值操作符会导致RHS查询:=操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。
LHS和RHS查询都会在当前作用域中开始,如果没有在当前作用域找到所需的标识符,就会逐级向上级作用域查询目标标识符,直到找到为止或者没有找到时到全局作用域为止。
JavaScript面向对象编程:封装
JavaScript是一种基于对象的语言,遇到的所有东西几乎都是对象,但是,它又不是一种真正的面向对象(OOP)语言,因为它的语法中没有class(类)。
如果要把“属性”(property)和“方法”(method),封装成一个对象,甚至要从原型对象生成一个势力对象。

2.   JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适
用于 JavaScript。需要注意的一个主要区别是 JavaScript 不支持类,类这一概念在 JavaScript 通过对象原型
(object prototype)得到延续(有关 ES6 类的内容参考这里Classes)。另一个主要区别是 JavaScript 中的
函数也是对象,JavaScript 允许函数在包含可执行代码的同时,能像其他对象一样被传递。
1>,script标签可放在head或body中,因为浏览器解释html文件是按先后顺序的,若是记录用来初始化页面的
css代码的js应放在head中,若是通过时间调用执行的function函数则对位置没有要求
js代码最好放在页面的底部,引用外部script文件格式:<script src="script.js"></script>
2>,script标签中可不写type=text/javascript,
3>,document.write("");直接在网页写内容,//要写双引号,输出的是双引号内的内容
三种方式:
第一种:输出内容用“”括起,直接输出""号内的内容
第二种:通过变量,输出内容
第三种:输出多项内容,内容之间用+号连接。
第四种:输出HTML标签,并起作用,标签使用“”括起来。

3.变量名可以任意取名,但要遵循命名规则:
1>变量必须使用字母、下划线(_)或者美元符($)开始。
2>然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3>不能使用JavaScript关键词与JavaScript保留字
变量要先声明再赋值:
var mychar="hello";
变量可重复赋值:
var mychar;
mychar="javascript";
mychar="hello";


4.确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和
一个取消按钮)。
语法:
confirm(str);
参数说明:
str:在消息对话框中要显示的文本
返回值: Boolean值
返回值:
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
注: 通过返回值可以判断用户点击了什么按钮
看下面的代码:
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>
5.显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果,可通过display属性来设置。
另一种显示和隐藏的属性是:visibility,值为visible和hidden,但是不同于display属性的是,visibility隐藏时图
片的位置不隐藏,display隐藏时图片的位置也隐藏了。
语法:
Object.style.display = value
注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。
value取值:
none:不显示(隐藏)
block:显示为块级元素
例如:<script>
function show(){
var mychar = document.getElementById("con");
//或document.getElementById("con").style.display="block";
mychar.style.display="block";
}
function hide(){
var mychar = document.getElementById("con");
mychar.style.display="none";
}
</script>

6,控制类名(className 属性)
className 属性设置或返回元素的class 属性。
语法:
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观

7.Date 日期对象
日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。
定义一个时间对象 :
var Udate=new Date();
注意:使用关键字new,Date()的首字母必须大写。
使 Udate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间)。
如果要自定义初始值,可以用以下方法:
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
访问方法语法:“<日期对象>.<方法>”
Date对象中处理时间和日期的常用方法:
get/setDate() //返回/设置日期
get/setFullYear() //返回/设置年份,用四位数表示
get/setYear()//返回/设置年份
get/setMonth()//返回/设置月份,0:一月。。。。11:十二月,所以加一
get/setHours()//返回/设置小时,24小时制
get/setMinutes()//返回/设置分钟数
get/setSeconds()//返回/设置秒钟数
get/setTime()//返回/设置时间(毫秒为单位)

8.返回指定的字符串首次出现的位置
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
stringObject.indexOf(substring, startpos)
参数说明:
substring:必须的,规定要检索的字符串值,.该方法将从头到尾地检索字符串 stringObject,看它是否含有子
串 substring。
startpos:可选的整数参数,规定在字符串中开始检索的位置,他的合法取值是0到stringObjectLength-1,若
省略该参数,将从字符串的首字付开始检索,从stringObject的startpos位置开始查找substring,如果没有此
参数将从stringObject的开始位置查找。
注意:1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现,则该方法返回 -1。

9,字符串分割split()
知识讲解:
split() 方法将字符串分割为字符串数组,并返回此数组。
语法:
stringObject.split(separator,limit)
参数说明:
separator:必须的,从该参数指定的地方分割stringObject,从而分成两个数组,参数左侧为一类,右侧为一
类。
limit:可选参数,分割的次数,返回的子串不会多于这个参数指定的个数,如果无此参数将不限制次数
注意:如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

10,提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:
stringObject.substring(starPos,stopPos)
参数说明:
startPos:必须的,一个非负的整数,开始位置
stopPos:可选,一个非负的整数,结束位置,如果省略该参数,那么返回的子串会一直到字符串对象的结尾
注意:
1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符,其长度为 stop 减start。
2. 如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
3. 如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数

11.数组定义的方法:
1. 定义了一个空数组:
var 数组名= new Array();
2. 定义时指定有n个空元素的数组:
var 数组名 =new Array(n);
3.定义数组的时候,直接初始化数据:
var 数组名 = [<元素1>, <元素2>, <元素3>...];
我们定义myArray数组,并赋值,代码如下:
var myArray = [2, 8, 6];
说明:定义了一个数组 myArray,里边的元素是:myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
数组元素使用:
数组名[下标] = 值;
注意: 数组的下标用方括号括起来,从0开始。
数组属性:
length 用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素
的下标加一。
数组方法:
数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组。
语法
arrayObject.concat(array1,array2,...,arrayN)
参数说明:
array1:要链接的第一个数组
。。。
arrayn:要连接的第n个数组
注意: 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
例如:
<script type="text/javascript">
var myarr1= new Array("010")
var myarr2= new Array("-","84697581");
document.write(myarr1.concat(myarr2));//不是 document.write(concat(myarr1,myarr2));
</script>
指定分隔符连接数组元素join()
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法:
arrayObject.join(分隔符separator)
参数说明:
separator:可选,指定要使用的分隔符,如果省略,则使用逗号分隔

12.选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
参数说明:
start:必须的,规定从何处开始选取,若是负数,它是从数组尾部开始算起的位置,-1就是最后一个元素,-2
是倒数第二个元素
end:可选,规定从何处结束,若不指定该参数,则切分的数组从start一直到数组结束 的所有元素,若他是负
数,则它规定的是从数组尾部开始算起的元素
1.返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
2. 该方法并不会修改数组,而是返回一个子数组。
注意:
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
数组排序sort()
sort()方法使数组中的元素按照一定的顺序排列。
语法:
arrayObject.sort(方法函数)
参数说明:
方法函数:可选,规定排序顺序,必须是函数
1.如果不指定<方法函数>,则按unicode码顺序排列。
2.如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a
和 b,其返回值如下:
若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。
排序函数:sortNuM(a,b)
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序,如降序,把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script> //结果是80,16,50,6,100,1 和 1,6,16,50,80,100

13JavaScript 计时器
在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
计时器类型:
一次性计时器:仅在指定的延迟时间之后触发一次。setTimeout
间隔性触发计时器:每隔一定的时间间隔就触发一次。setInterval
setTimeout和setInterval可以相互转换,在setTimeout里再调用一个setTimeout可以产生与setInterval相同的
作用
例如:
function display(){
。。。。。。。。
setTimeout("display()",1000);
}
计时器方法:
setTimeout()//指定的延迟时间之后来执行代码
clearTimeout()//取消setTimeout设置
setinterval()//每隔指定时间执行代码
Clearinterval()//取消setinterval()设置
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法
setInterval(代码,交互时间);
参数说明:
参数说明:
1. 代码:要调用的函数或要执行的代码串。
2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)

setInterval(clock,1000)
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法:
clearInterval(id_of_setInterval)
参数说明:
id_of_setInterval:由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。

14.
setTimeout(代码,延迟时间);
参数说明:
1. 要调用的函数或要执行的代码串。
2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。
35,取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用,停止计时器。
语法:
clearTimeout(id_of_setTimeout)
参数说明:
id_of_setTimeout:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

15.
History 对象
history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与
特定的window对象关联。
语法:
window.history.[属性|方法]
注意:window可以省略。
history对象属性
length:返回浏览器历史列表中的url数量
history对象方法
back():加载history列表中的前一个url//window.history.back()相当于window.history.go(-1)
forward():加载history列表中的后一个url//window.history.forward()相当于window.history.go(1)
go():加载history列表中的某个具体页面
36,返回浏览历史中的其他页面
go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。
语法:
window.history.go(number);
参数:
1:下一个页面,go(1)等价于forward()
0:当前页面,
-1:前一个页面,go(-1)等价于back()
其他数值:要访问的url在history的url列表中的相对位置
浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:
window.history.go(-2);
注意:和在浏览器中单击两次后退按钮操作一样。
同理,返回当前页面之后浏览过的第三个历史页面,代码如下:
window.history.go(3);


16
window.screen.属性
对象属性:
availHeight:窗口可以使用的屏幕高度,单位像素
availWidth:窗口可以使用的屏幕宽度,单位像素
colorDepth:用户浏览器表示的颜色位数,通常为32位(每像素的位数)
pixelDepth:用户浏览器表示的颜色位数,也为32位(每像素的位数)(IE不支持此属性)
height:屏幕的高度,单位像素
width:屏幕的宽度,单位像素


17
指定的值。
语法:
elementNode.setAttribute(name,value)
有时改变某个节点的属性时,也可以用elementNode.attributeName="xxxx",即对象名.属性名
说明:
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意:
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。
节点属性
在文档对象模型 (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

19.
访问子结点childNodes
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:
elementNode.childNodes
注意:
如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
访问子结点的第一和最后项
firstChild是第一个出现的子节点,lastChild是最后一个出现的子节点
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回
NULL。
语法:
node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回
NULL。
语法:
node.lastChild
说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中,我们知道Internet Explorer 会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们
可以通过检测节点类型,过滤子节点。 (以后章节讲解)

20.
访问父节点parentNode
获取指定节点的父节点
语法:
elementNode.parentNode
注意:父节点只能有一个。
看看下面的例子,获取 P 节点的父节点,代码如下:
<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
运行结果:
parentNode 获取指点节点的父节点
DIV
访问祖节点:
elementNode.parentNode.parentNode

21
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而
其它浏览器不会忽略。

22
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode:指定追加的节点。
例如:
var otest = document.getElementById("test");
var newnode=document.createElement("li");
newnode.innerHTML="PHP";
otest.appendChild(newnode);

23,插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法
insertBefore(newnode,node);
参数
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);

24
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返
回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node :必需,指定需要删除的节点。
例如:
function clearText() {
var content=document.getElementById("content");
for(var i=content.childNodes.length-1;i>=0;i--){
var childNode = content.childNodes[i];
content.removeChild(childNode);
}

时间有限,总结了一小部分,还有很多没总结的,比如说上个星期我们组自己完成的一个小项目,里面有许多值得去总结的,今日暂时这样.

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马