2021-05-06

1.1JavaScript简介

为何学习 JavaScript?

JavaScript 是 web 开发者必学的三种语言之一:

  • HTML定义网页的内容
  • CSS规定网页的布局/样式
  • JavaScript对网页行为进行编程

 

JavaScript的应用:淘宝的搜索功能、团立方中的轮播图、产品经理建立项目等等。

JavaScript组成:

  • ECAMScript:JavaScript语法和基本对象
  • DOM:文档对象模型
  • BOM:浏览器对象模型。

 

1.2JavaScript基本用法

JavaScript应该放在什么位置?

①行内JS

<button onClick="alert('Hello Everybody!')">按钮</button>

优点:非常的直观,直接作用于你写的元素

缺点:1、结构分离不清晰(html/csss/js)

2、复用性底

3、不利于后期维护与修改

②内部JS

<script>

//JavaScript 代码

</script>

优点:1、结构分离更清晰(较行内JS)。2、当前页面可复用 3、利于后期维护和修改

缺点:1、只能当前页面使用,不能多页面复用。2、多页面之间的维护比较麻烦。

③外部JS

<script src="./js/script.js"></script>

 

1.3JavaScript-输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

 

 

 

1.4document. getElementById()方法

语法:document.getElementById("ID ")

翻译:通过ID获取元素。

 

1.5 JavaScript语句、注释、变量

1.JavaScript语句是发给浏览器的命令,

这些命令的作用是告诉浏览器要做的事情。

每一句JavaScript代码格式: 语句;

例:alert("hello!");就是一个JavaScript语句

2.JavaScript-注释很重要

注释可分为单行注释多行注释两种

单行注释,在注释内容前加符号 “//”

多行注释以"/*"开始,以"*/"结束。

3.变量

什么是变量?

什么是变量? 从字面上看,变量是可变的量;从编程角度讲,JavaScript 变量是存储数据值的容器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。

给变量取个名

我们为了区分盒子,可以用box1,box2等名称代表不同盒子,box1就是盒子的名字(也就是变量的名字)。

注意:变量名字可以任意取,只不过取名字要遵循一些规则:

  1. 必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。例如:mysum _mychar, $numa198   
  2. 变量名区分大小写,如:A与a是两个不同变量。
  3. 不允许使用JavaScript关键字和保留字做变量名。

 例如:mysum, _mychar, $numal

变量声明

声明变量语法: var 变量名;

var mysum;一次声明一个变量

var mysum=12,mynum="str";一次声明多个变量

注意:变量也可以不声明,直接使用,但为了规范,需要先声明,后使用。

变量赋值

var mynum=5;//声明变量mynum并赋值

注:这里 "="号的作用是给变量赋值,不是等于号。

 

2.JavaScript基础

2.1document.querySelector()

定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

语法:document.querySelector(CSS selectors)

参数值

参数

类型

描述

CSS 选择器

String

必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

 

查找HTML元素的方法:

方法

描述

document.getElementById(id)

通过元素 id 来查找元素

document.getElementsByTagName(name)

通过标签名来查找元素

document.getElementsByClassName(name)

通过类名来查找元素

 

 

2.4JavaScript-style属性

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

使用 Style 对象属性的语法:

document.getElementById("id").style.property="值"

Style 对象的属性:

  1. 背景
  2. 边框和边距
  3. 布局
  4. 列表
  5. 杂项
  6. 定位
  7. 打印
  8. 滚动条
  9. 表格
  10. 文本
  11. 规范

Background 属性

属性

描述

background

在一行中设置所有的背景属性

backgroundAttachment

设置背景图像是否固定或随页面滚动

backgroundColor

设置元素的背景颜色

backgroundImage

设置元素的背景图像

backgroundPosition

设置背景图像的起始位置

backgroundPositionX

设置backgroundPosition属性的X坐标

backgroundPositionY

设置backgroundPosition属性的Y坐标

backgroundRepeat

设置是否及如何重复背景图像

 

Border 和 Margin 属性

属性

描述

border

在一行设置四个边框的所有属性

borderBottom

在一行设置底边框的所有属性

borderBottomColor

设置底边框的颜色

borderBottomStyle

设置底边框的样式

borderBottomWidth

设置底边框的宽度

borderColor

设置所有四个边框的颜色 (可设置四种颜色)

borderLeft

在一行设置左边框的所有属性

borderLeftColor

设置左边框的颜色

borderLeftStyle

设置左边框的样式

borderLeftWidth

设置左边框的宽度

borderRight

在一行设置右边框的所有属性

borderRightColor

设置右边框的颜色

borderRightStyle

设置右边框的样式

borderRightWidth

设置右边框的宽度

borderStyle

设置所有四个边框的样式 (可设置四种样式)

borderTop

在一行设置顶边框的所有属性

borderTopColor

设置顶边框的颜色

borderTopStyle

设置顶边框的样式

borderTopWidth

设置顶边框的宽度

borderWidth

设置所有四条边框的宽度 (可设置四种宽度)

margin

设置元素的边距 (可设置四个值)

marginBottom

设置元素的底边距

marginLeft

设置元素的左边距

marginRight

设置元素的右边据

marginTop

设置元素的顶边距

outline

在一行设置所有的outline属性

outlineColor

设置围绕元素的轮廓颜色

outlineStyle

设置围绕元素的轮廓样式

outlineWidth

设置围绕元素的轮廓宽度

padding

设置元素的填充 (可设置四个值)

paddingBottom

设置元素的下填充

paddingLeft

设置元素的左填充

paddingRight

设置元素的右填充

paddingTop

设置元素的顶填充

 

 

Layout 属性

属性

描述

clear

设置在元素的哪边不允许其他的浮动元素

clip

设置元素的形状

content

设置元信息

counterIncrement

设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。

counterReset

设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。

cssFloat

设置图像或文本将出现(浮动)在另一元素中的何处。

cursor

设置显示的指针类型

direction

设置元素的文本方向

display

设置元素如何被显示

height

设置元素的高度

markerOffset

设置marker box的principal box距离其最近的边框边缘的距离

marks

设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外

maxHeight

设置元素的最大高度

maxWidth

设置元素的最大宽度

minHeight

设置元素的最小高度

minWidth

设置元素的最小宽度

overflow

规定如何处理不适合元素盒的内容

verticalAlign

设置对元素中的内容进行垂直排列

visibility

设置元素是否可见

width

设置元素的宽度

List 属性

属性

描述

listStyle

在一行设置列表的所有属性

listStyleImage

把图像设置为列表项标记

listStylePosition

改变列表项标记的位置

listStyleType

设置列表项标记的类型

Positioning 属性

属性

描述

bottom

设置元素的底边缘距离父元素底边缘的之上或之下的距离

left

置元素的左边缘距离父元素左边缘的左边或右边的距离

position

把元素放置在static, relative, absolute 或 fixed 的位置

right

置元素的右边缘距离父元素右边缘的左边或右边的距离

top

设置元素的顶边缘距离父元素顶边缘的之上或之下的距离

zIndex

设置元素的堆叠次序

Printing 属性

属性

描述

orphans

设置段落留到页面底部的最小行数

page

设置显示某元素时使用的页面类型

pageBreakAfter

设置某元素之后的分页行为

pageBreakBefore

设置某元素之前的分页行为

pageBreakInside

设置某元素内部的分页行为

size

设置页面的方向和尺寸

widows

设置段落必须留到页面顶部的最小行数

Scrollbar 属性 (IE-only)

属性

描述

scrollbar3dLightColor

设置箭头和滚动条左侧和顶边的颜色

scrollbarArrowColor

设置滚动条上的箭头颜色

scrollbarBaseColor

设置滚动条的底色

scrollbarDarkShadowColor

设置箭头和滚动条右侧和底边的颜色

scrollbarFaceColor

设置滚动条的表色

scrollbarHighlightColor

设置箭头和滚动条左侧和顶边的颜色,以及滚动条的背景

scrollbarShadowColor

设置箭头和滚动条右侧和底边的颜色

scrollbarTrackColor

设置滚动条的背景色

Table 属性

属性

描述

borderCollapse

设置表格边框是否合并为单边框,或者像在标准的HTML中那样分离。

borderSpacing

设置分隔单元格边框的距离

captionSide

设置表格标题的位置

emptyCells

设置是否显示表格中的空单元格

tableLayout

设置用来显示表格单元格、行以及列的算法

Text 属性

属性

描述

color

设置文本的颜色

font

在一行设置所有的字体属性

fontFamily

设置元素的字体系列。

fontSize

设置元素的字体大小。

fontSizeAdjust

设置/调整文本的尺寸

fontStretch

设置如何紧缩或伸展字体

fontStyle

设置元素的字体样式

fontVariant

用小型大写字母字体来显示文本

fontWeight

设置字体的粗细

letterSpacing

设置字符间距

lineHeight

设置行间距

quotes

设置在文本中使用哪种引号

textAlign

排列文本

textDecoration

设置文本的修饰

textIndent

缩紧首行的文本

textShadow

设置文本的阴影效果

textTransform

对文本设置大写效果

unicodeBidi

 

whiteSpace

设置如何设置文本中的折行和空白符

wordSpacing

设置文本中的词间距

标准属性

属性

描述

dir

设置或返回文本的方向

lang

设置或返回元素的语言代码

title

设置或返回元素的咨询性的标题

 

 

3.JavaScript流程控制

什么是流程?

程序中的三种基本流程结构:

  1. 顺序结构
  2. 分支结构
  3. 循环结构

顺序结构:按照顺序一条一条的执行代码,从上到下。

分支结构:执行代码的时候,可以根据条件进行选择,条件越多对应的结果越多,分支也就越多。例如if…else…语句,switch语句

循环语句:用来重复不断的做一件事,for循环,while循环,do…while循环

3.1 if…else 语句

1.if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。

语法:

if(条件){

    条件成立时执行的代码

}

else{

    条件不成立时执行的代码

}

2.多重判断(if..else嵌套语句)

要在多组语句中选择一组来执行,使用if..else嵌套语句。

语法:

if(条件1){

    条件1成立时执行的代码

}

else if(条件2){

    条件2成立时执行的代码

}

...

else if(条件n){

        条件n成立时执行的代码

}

else{

    条件1、2至n不成立时执行的代码

}

3.2 switch… case

switch 语句用于基于不同条件执行不同动作.

switch(表达式){

    case 值1:

        执行代码块1;

        break;

    case 值2:

        执行代码块2;

        break;

        ...

    case 值n:

        执行代码块n;

        break;

    default:

        与 case值1 、 case值2...case值n 不同时执行的代码

}

语法说明:switch必须赋初始值,值与每个case值匹配。满足执行该 case 后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。

3.3 for循环

for循环是编程语言中一种循环语句,而循环语句由循环体及循环的判定条件两部分组成,for语句结构:

for(初始化变量;循环条件;循环迭代){     

    循环语句 ;

}

For循环 用来重复不断的做一件事。

 

 

初来乍到,请多多指教,大神勿喷。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值