Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结

内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结

24章  JavaScript简介

  1HTML是网页的结构,CSS是网页的外观,而JavaScript是网页的行为;

  2、推荐2个前端开发工具:Hbuildervscode。建议初学者使用Hbuilder

  3JavaScript常用引入方式有3种:①外部JavaScript;②内部JavaScript;③元素事件JavaScript

25章  语法基础

    对于这一章来说,我们需要清楚这5个概念:变量、数据类型、运算符、表达式、语句。可以根据下图25-38来理解:

 

25-38  分析图

  1、变量

  1)所有变量都是用var声明的;

  2)对于变量命名,尽量取有意义的英文名字,以便一眼就可以看出来这是干嘛的;

  3)变量的值是可以变的;

  2、数据类型

    JavaScript中,常见的数据类型有6种:

  1)数字;

  2)字符串;

  3)布尔值;

  4)转义字符;

  5)未定义值;

  6)空值;

  3、运算符

    JavaScript中,常见的运算符有5种:

  1)算术运算符;

  2)赋值运算符;

  3)比较运算符;

  4)逻辑运算符;

  5)条件运算符;

  4、表达式与语句

    1+2是一个表达式,而整一句代码“var a=1+2;”就是一个语句。

 

25-39  表达式与语句

  5、注释

//单行注释

/*多行注释*/

26章  流程控制

    这一章我们学习了3种流程控制的结构:顺序结构、选择结构、循环结构。为什么这一章叫做“流程控制”呢?大家好好琢磨“流程控制”这4个字,然后想一下这一章我们都学了什么就明白了。

  1、选择结构

选择结构指的是根据“条件判断”来决定执行哪一段代码。选择结构有单向选择、双向选择以及多向选择3种。

JavaScript中,选择结构共有2种方式,一种是if语句,另外一种是switch语句。其中if语句又包括:

  1)单向选择:if

  2)双向选择:ifelse

  3)多向选择:ifelse ifelse

  4if语句的嵌套

  2、循环结构

    循环语句指的是在“满足某个条件下”循环反复地执行某些操作的语句。

    JavaScript中,循环语句共有以下3种:

  1while语句

  2do...while语句

  3for语句

27章  初识函数

    JavaScript中,函数指的是一个用大括号“{}”括起来的、可重复使用的、具有特定功能的语句块。如果想要使用函数,一般需要2步:

    ① 定义函数;

    ② 调用函数;

  1、函数的定义

    JavaScript中,函数可以分2种,一种是“没有返回值的函数”,另外一种就是“有返回值的函数”。

  1)没有返回值的函数

    没有返回值的函数,指的是函数执行完就算了,不会返回任何值。

    语法:

function 函数名(参数1 , 参数2 ,..., 参数n)

{

    ……

}

  2)有返回值的函数

    有返回值的函数,指的是函数执行完了之后,会用return语句返回一个值,这个返回值可以供我们使用。

    语法:

function 函数名(参数1 , 参数2 ,..., 参数n)

{

    ……

    return 返回值;

}

  2、函数的调用

    如果一个函数仅仅是定义而没有被调用的话,则函数本身是不会执行的(认真琢磨这句话,非常重要)。

    JavaScript函数调用方式很多,常见有4种:

    ① 直接调用;

    ② 在表达式中调用;

    ③ 在超链接中调用

    ④  在事件中调用;

    此外,对于嵌套函数和内置函数,我们稍微看看就行,不需要深入了解。

    【后话】:函数的内容是极其复杂的,我们在这一章学到的只是一点皮毛而已。高级部分如this、闭包、类、继承、递归函数、高阶函数等,都与函数有关。事实上,函数在JavaScript又被称为“第一等公民”,可见其重要程度。对于JavaScript进阶部分,可以关注绿叶学习网。

28章  字符串对象

    JavaScript中,字符串对象常用的属性和方法如下表28-1和表28-2所示:

表28-1  字符串对象的属性

属性

说明

length

获取字符串的长度

 

表28-2  字符串对象的方法

方法

说明

toLowerCase()toUpperCase()

大小写转换

charAt()

获取某一个字符

substring()

截取字符串

replace()

替换字符串

split()

分割字符串

indexOf()lastIndexOf()

检索字符串的位置

 

    实际上,字符串对象的属性和方法还有很多,不过我们只需要掌握上面这些就够了,不需要浪费时间和精力去记忆其他没用的东西。对于初学者来说,可能很多人会问上表中的属性和方法都有什么用。其实字符串更多的是结合其他技术一起使用,等真正到了实战开发的时候就知道了。所以我们一定要认真掌握上面的每一种属性和方法,把基础打好。

29章  数组对象

    JavaScript中,我们可以使用“数组”来存储一组“相同数据类型”(一般情况下)的数据类型。

    数组的创建一般用简写形式,如[1,2,3,4,5]。数组的获取和赋值,都是使用下标的方式,特别注意一点:数组的下标是从0开始,而不是从1开始的。

    其中,数组常用的属性和方法如下表29-1和表29-2所示:

29-1  数组的属性

属性

说明

length

获取数组的长度

29-2  数组的方法

方法

说明

slice()

截取数组部分

unshift()

添加数组元素,在开头添加

push()

添加数组元素,在末尾添加

shift()

删除数组元素,在开头删除

pop()

删除数组元素,在末尾删除

sort()

数组大小比较

reverse()

数组颠倒顺序

join()

将数组元素连接成字符串

 

    对于数组来说,最常用的方法是2个:push()join()。如果小伙伴们觉得上面方法太多记不住,可以只记住这2个,其他的等需要的时候再回来查一下就行。

30章  时间对象

    对于日期时间对象的方法来说,getXxx()用于获取时间,setXxx()用于设置时间。

表30-5  用于获取时间的getXxx()

方法

说明

getFullYear()

获取年份,取值为4位数字

getMonth()

获取月份,取值为0(一月)到11(十二月)之间的整数

getDate()

获取日数,取值为1~31之间的整数

getHours()

获取小时数,取值为0~23之间的整数

getMinutes()

获取分钟数,取值为0~59之间的整数

getSeconds()

获取秒数,取值为0~59之间的整数

 

表30-6  用于设置时间的setXxx()

方法

说明

setFullYear()

可以设置年、月、日

setMonth()

可以设置月、日

setDate()

可以设置日

setHours()

可以设置时、分、秒、毫秒

setMinutes()

可以设置分、秒、毫秒

setSeconds()

可以设置秒、毫秒

31章  数学对象

对于Math对象的属性来说,我们只需要掌握Math.PI就行。对于Math对象的方法来说,我们需要掌握表31-5中这些方法就行了。

表31-5  Math对象常用方法

方法

说明

max(a,b,,n)

返回一组数中的最大值

min(a,b,,n)

返回一组数中的最小值

sin(x)

正弦

cos(x)

余弦

tan(x)

正切

asin(x)

反正弦

acos(x)

反余弦

atan(x)

反正切

atan2(x)

反正切

floor(x)

向下取整

ceil(x)

向上取整

random()

生成随机数

32章  DOM基础

1DOM是什么?

    对于DOM,我们总结出以下几点:

  1DOM操作,可以简单理解成:元素操作;

  2)一个HTML文档就是一棵节点树,页面中的每一个元素就是一个树节点;

  3)每一个元素就是一个节点,而每一个节点就是一个对象。我们在操作元素时,就是把这个元素看成一个对象,然后用这个对象的属性和方法进行操作;

2、节点类型

    DOM节点共有12种类型,不过常见的只有3种(其他不用管):

  1)元素节点,nodeType值为1

  2)属性节点,nodeType值为2

  3)文本节点;nodeType值为3

3、获取元素

    JavaScript中,我们可以通过6种方式来获取指定元素:

  1getElementById()

  2getElementsByTagName()

  3getElementsByClassName()

  4querySelector()querySelectorAll()

  5getElementsByName()

  6document.titledocument.body

    虽然这些方法名又长又臭,不过根据英文意思来记忆就很轻松啦。此外对于这些获取元素的方式,有几点需要我们注意的:

  1)只有getElementsByTagName()可以操作动态DOM,其他的都不行

  2querySelector()表示选取满足选择条件的第1个元素,querySeletorAll()表示选取满足条件的所有元素

  3)当你选取的只有一个元素时,querySelector()querySelectorAll()是等价的

  4getElementsByName只用于表单元素,准确来说一般用于单选按钮和复选框

  5getElementsByTagName()getElementsByClassName()getElementsByName()3个方法返回的都是一个类数组(elements嘛),想要准确获取其中一个元素,可以使用数组下标来实现

4DOM操作

表32-2  DOM操作的方法

方法

说明

createElement()

创建元素节点

createTextNode()

创建文本节点

appendChild

插入元素,在父元素最后一个子元素后面插入

insertBefore()

插入元素,在父元素任意一个子元素前面插入

removeChild()

删除元素

cloneNode()

复制元素

replaceChild()

替换元素

HTML中直接添加元素,这是静态方法。而使用JavaScript添加元素,这是动态方法。这一章介绍的这些就是动态方法,也叫动态DOM操作。动态DOM操作在实际开发中用途是非常广的。

33章  DOM进阶

  1HTML属性操作

    JavaScript中,有2种操作HTML元素属性的方式,一种是用“对象属性”,另外一种是用“对象方法”。不管是用哪种方式,都涉及2种操作:①获取HTML属性值;②设置HTML属性值。

  1)“对象属性”方式

obj.attr        //获取值

obj.attr = ""   //设置值

  2)“对象方法”方式

obj.getAttribute("attr")        //获取值

obj.setAttribute("attr","")    //设置值

对于操作HTML属性的2种方式,我们总结一下:

   ①“对象属性方式”和“对象方法方式”,这两种方式都不仅可以操作静态HTML的属性,也可以操作动态DOM的属性;

   ②只有“对象方法方式”才可以操作自定义属性;

  2CSS属性操作

  1)获取值

getComputedStyle(obj).attr

  2)设置值

obj.style.attr = "";        //使用style对象

obj.style.cssText = ""      //使用cssText属性

  3DOM遍历

表33-2  DOM遍历的属性

属性

说明

parentNode

查找父元素

childNodesfirstChildlastChild

查找子元素,包含文本节点

childrenfirstElementChildlastElementChild

查找子元素,不包含文本节点

previousSiblingnextSibling

查找兄弟元素,包含文本节点

previousElementSiblingnextElementSibling

查找兄弟原始,不包含文本节点

  4innerHTMLinnerText

    JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本”。

34章  事件基础

    事件操作是JavaScript的核心,不懂事件操作,JavaScript等于白学。在JavaScript中,事件调用方式有2种:①在script标签中调用;②在元素中调用。

表34.2  鼠标事件

事件

说明

onclick

鼠标单击

onmouseover

鼠标移入

onmouseout

鼠标移出

onmousedown

鼠标按下

onmouseup

鼠标松开

onmousemove

鼠标移动

表34.3  键盘事件

事件

说明

onkeydown

键盘按下

onkeyup

键盘松开

表34.4  表单事件

事件

说明

onfocus

获取焦点

onblur

失去焦点

onselect

选择文本

onchange

选择某一项触发(单选框、复选框、下拉菜单)

 

表34.5  编辑事件

事件

说明

oncopy

用于防止文本被复制

onselectstart

用于防止文本被选取

oncontextmenu

用于禁止鼠标右键

11.6  页面事件

事件

说明

window.onload

页面加载完毕触发

window.onunload

离开页面触发

 

    上面列出来的都是JavaScript中最常用的事件,对于不常用的,我们已经舍弃掉了。学完这些,我们可以自己尝试开发一下各种效果了,如图片轮播、Tab选项卡、回顶部等。

    此外,这些事件大多数都是针对PC端的,像移动端还有一些特殊的事件如touchstarttouchendtouchemove等,这个可以关注绿叶学习网的移动Web开发教程。

 

35章  事件进阶

  1、事件监听器

    JavaScript中,想要给元素添加一个事件,其实我们有2种方式:①事件处理器;②事件监听器。

obj.addEventListener("click", function () {……);}, false);

obj.onclick = function () {……};

    如果想要为一个元素添加多个相同事件,必须要用事件监听器,而不能用事件处理器。

  1)绑定事件

    语法:

obj.addEventListener(type , fn , false)

  2)解绑事件

    语法:

    obj.removeEventListener(type , fn , false);

    说明:

    removeEventListener()只能解除“事件监听器”添加的事件,如果要解除“事件处理器”添加的事件,需要用“obj.事件名 = null;”方法来实现。

  2event对象

    当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是event对象。

表35-3  event对象的属性

属性

说明

type

事件类型

keyCode

键码值

shiftKey

是否按下shift

ctrlKey

是否按下Ctrl

altKey

是否按下Alt

 

  3this

在事件操作中,可以这样理解:哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象。

36章  window对象

    一个窗口就是一个window对象,这个窗口里面的HTML文档就是一个document对象,document对象是window对象的子对象。

表36-5  window对象下的重要子对象

子对象

说明

document

文档对象,用于操作页面元素

location

地址对象,用于操作URL地址

navigator

浏览器对象,用于获取浏览器版本信息

 

  1、窗口操作

  1)打开窗口

window.open(url, target)

  2)关闭窗口

window.close()

  2、对话框

表36-6  3种对话框

方法

说明

alert()

仅提示文字,没有返回值

confirm()

具有提示文字,返回“布尔值”(truefalse

prompt()

具有提示文字,返回“字符串”

  3、定时器

    JavaScript中,我们可以使用setTimeout()方法来“一次性”地调用函数,并且可以使用clearTimeout()来取消执行setTimeout()

    我们也可以使用setInterval()方法来“重复性”地调用函数,并且可以使用clearInterva()来取消执行setInterval()

  4location对象

表36-7  location对象的属性

属性

说明

href

当前页面地址

search

当前页面地址“?”后面的内容

hash

当前页面地址“#”后面的内容

  5navigator对象

    JavaScript中,我们可以使用window对象下的子对象navigator来获取浏览器的类型。

37章  document对象

    document对象其实是window对象下的一个子对象来的,它操作的是HTML文档里所有的内容。document对象常用的属性和方法如下:

表37-3  document对象常用的属性

属性

说明

document.title

获取文档的title

document.body

获取文档的body

document.URL

当前文档的URL

document.referrer

返回使浏览者到达当前文档的URL

表37-4  document对象常用的方法

方法

说明

document.getElementById()

通过id获取元素

document.getElementsByTagName()

通过标签名获取元素

document.getElementsByClassName()

通过class获取元素

document.getElementsByName()

通过name获取元素

document.querySelector()

通过选择器获取元素,只获取第1

document.querySelectorAll()

通过选择器获取元素,获取所有

document.createElement()

创建元素节点

document.createTextNode()

创建文本节点

document.write()

输出内容

document.writeln()

输出内容并换行

 

小伙伴们边学边练,不知不觉看完这本书的时候,应该已经对HTML、CSS、JavaScript有了基本的掌握,能够制作出简单的页面了。

要想成为一名合格的前端开发人员,接下来要学习更多的前端技术,如:jQuery、HTML5、CSS3等。

  • 6
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

软件测试李同学

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值