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就是盒子的名字(也就是变量的名字)。
注意:变量名字可以任意取,只不过取名字要遵循一些规则:
- 必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。例如:mysum _mychar, $numa198
- 变量名区分大小写,如:A与a是两个不同变量。
- 不允许使用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 对象的属性:
- 背景
- 边框和边距
- 布局
- 列表
- 杂项
- 定位
- 打印
- 滚动条
- 表格
- 文本
- 规范
Background 属性
属性 | 描述 |
在一行中设置所有的背景属性 | |
设置背景图像是否固定或随页面滚动 | |
设置元素的背景颜色 | |
设置元素的背景图像 | |
设置背景图像的起始位置 | |
设置backgroundPosition属性的X坐标 | |
设置backgroundPosition属性的Y坐标 | |
设置是否及如何重复背景图像 |
Border 和 Margin 属性
属性 | 描述 |
在一行设置四个边框的所有属性 | |
在一行设置底边框的所有属性 | |
设置底边框的颜色 | |
设置底边框的样式 | |
设置底边框的宽度 | |
设置所有四个边框的颜色 (可设置四种颜色) | |
在一行设置左边框的所有属性 | |
设置左边框的颜色 | |
设置左边框的样式 | |
设置左边框的宽度 | |
在一行设置右边框的所有属性 | |
设置右边框的颜色 | |
设置右边框的样式 | |
设置右边框的宽度 | |
设置所有四个边框的样式 (可设置四种样式) | |
在一行设置顶边框的所有属性 | |
设置顶边框的颜色 | |
设置顶边框的样式 | |
设置顶边框的宽度 | |
设置所有四条边框的宽度 (可设置四种宽度) | |
设置元素的边距 (可设置四个值) | |
设置元素的底边距 | |
设置元素的左边距 | |
设置元素的右边据 | |
设置元素的顶边距 | |
在一行设置所有的outline属性 | |
设置围绕元素的轮廓颜色 | |
设置围绕元素的轮廓样式 | |
设置围绕元素的轮廓宽度 | |
设置元素的填充 (可设置四个值) | |
设置元素的下填充 | |
设置元素的左填充 | |
设置元素的右填充 | |
设置元素的顶填充 |
Layout 属性
属性 | 描述 |
设置在元素的哪边不允许其他的浮动元素 | |
设置元素的形状 | |
设置元信息 | |
counterIncrement | 设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。 |
counterReset | 设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。 |
设置图像或文本将出现(浮动)在另一元素中的何处。 | |
设置显示的指针类型 | |
设置元素的文本方向 | |
设置元素如何被显示 | |
设置元素的高度 | |
markerOffset | 设置marker box的principal box距离其最近的边框边缘的距离 |
marks | 设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外 |
设置元素的最大高度 | |
设置元素的最大宽度 | |
设置元素的最小高度 | |
设置元素的最小宽度 | |
规定如何处理不适合元素盒的内容 | |
设置对元素中的内容进行垂直排列 | |
设置元素是否可见 | |
设置元素的宽度 |
List 属性
属性 | 描述 |
在一行设置列表的所有属性 | |
把图像设置为列表项标记 | |
改变列表项标记的位置 | |
设置列表项标记的类型 |
属性 | 描述 |
设置元素的底边缘距离父元素底边缘的之上或之下的距离 | |
置元素的左边缘距离父元素左边缘的左边或右边的距离 | |
把元素放置在static, relative, absolute 或 fixed 的位置 | |
置元素的右边缘距离父元素右边缘的左边或右边的距离 | |
设置元素的顶边缘距离父元素顶边缘的之上或之下的距离 | |
设置元素的堆叠次序 |
Printing 属性
属性 | 描述 |
orphans | 设置段落留到页面底部的最小行数 |
page | 设置显示某元素时使用的页面类型 |
设置某元素之后的分页行为 | |
设置某元素之前的分页行为 | |
设置某元素内部的分页行为 | |
size | 设置页面的方向和尺寸 |
widows | 设置段落必须留到页面顶部的最小行数 |
Scrollbar 属性 (IE-only)
属性 | 描述 |
设置箭头和滚动条左侧和顶边的颜色 | |
设置滚动条上的箭头颜色 | |
设置滚动条的底色 | |
设置箭头和滚动条右侧和底边的颜色 | |
设置滚动条的表色 | |
设置箭头和滚动条左侧和顶边的颜色,以及滚动条的背景 | |
设置箭头和滚动条右侧和底边的颜色 | |
设置滚动条的背景色 |
Table 属性
属性 | 描述 |
设置表格边框是否合并为单边框,或者像在标准的HTML中那样分离。 | |
设置分隔单元格边框的距离 | |
设置表格标题的位置 | |
设置是否显示表格中的空单元格 | |
设置用来显示表格单元格、行以及列的算法 |
Text 属性
属性 | 描述 |
设置文本的颜色 | |
在一行设置所有的字体属性 | |
设置元素的字体系列。 | |
设置元素的字体大小。 | |
设置/调整文本的尺寸 | |
设置如何紧缩或伸展字体 | |
设置元素的字体样式 | |
用小型大写字母字体来显示文本 | |
设置字体的粗细 | |
设置字符间距 | |
设置行间距 | |
设置在文本中使用哪种引号 | |
排列文本 | |
设置文本的修饰 | |
缩紧首行的文本 | |
textShadow | 设置文本的阴影效果 |
对文本设置大写效果 | |
unicodeBidi |
|
设置如何设置文本中的折行和空白符 | |
设置文本中的词间距 |
标准属性
属性 | 描述 |
设置或返回文本的方向 | |
设置或返回元素的语言代码 | |
设置或返回元素的咨询性的标题 |
3.JavaScript流程控制
什么是流程?
程序中的三种基本流程结构:
- 顺序结构
- 分支结构
- 循环结构
顺序结构:按照顺序一条一条的执行代码,从上到下。
分支结构:执行代码的时候,可以根据条件进行选择,条件越多对应的结果越多,分支也就越多。例如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循环 用来重复不断的做一件事。
初来乍到,请多多指教,大神勿喷。