目录
一、javescript的概念和作用
简称“JS”, 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript可以实现页面的效果切换、动画效果、页面游戏等效果。
二、引入方式
内部式、外部式、行内式。
三、数据类型
number boolean string undefined null
数字类型 布尔类型 字符串 未定义 空
三、语句
3.1 分支语句:if条件判断:if的括号内,就是对条件的判断,括号内的值只能是布尔值。在if 条件判断的 代码块中,如果满足其中一个条件,只会选择执行一个代码块,然后结束条件判断语句。
if 的使用场景为在范围性的内容判断时使用。
结构:(1)if(条件){
代码块
}
(2)if(条件){
代码块
}else if(){
代码块
}else{
代码块
}
(3) if(条件){
代码块
}else{
代码块
}
3.2 switch语句:是在有特定或者固定值的时候来使用。
结构:switch(){
case 1:语句;break;
case 2:语句;break;
case 3:语句;break;
...............
default:语句;break;
}
3.3循环语句
3.3.1 for循环
结构:for(var i=0;i<i;i++){
循环体
}
3.3.2 while循环:会先进逻辑判断,如果为假则不会执行循环体内的代码。
结构:while(){}
3.3.3 do while 循环:不管括号内的条件是否为真,都会先进行一次循环体内的代码执行。
结构:do{}while()
四、数组
声明方式:例:var num = [1, 2, 3, 4, 5];
五、对象
创建方式
(1)字面量创建
var star = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
方法名:函数(){
}
}
var people = {
name: '张三',
gender: 'male',
age: 38,
eat: function () {
console.log('我可以吃饭了');
},
sleep: function () {
console.log('我可以睡觉了');
}
}
(2)new 关键字
var name = new Object();
name.属性名 = 值;
name.属性名 = 值;
name.方法名 = 函数(){}
var jack = new Person('jack', 28, 'male');
var Rose = new Person('Rose', 25, 'Female');
console.log(jack);
console.log(Rose);
console.log(Rose.name);
(3)构造函数创建
function Person(name,age,gender){
this.name = "jack";
this.age = 15;
this.gender = male;
}
var jack = new Person;
};
function Person(name1, age1, gender1) {
// 下方 第一个 name是该对象的属性, 第二个name是该函数的形参
this.name = name1;
this.age = age1;
this.gender = gender1;
}
六、DOM操作
6.1含义:DOM,即Document Object Model。简单来说,HTML DOM 定义了访问和操作HTML文档的标准方法。HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
6.2节点分类:文档节点、元素节点、属性节点、文本节点。
6.3查询获取元素的方法
(1)getElementById:通过id获取元素 (单个)。
(2)getElementsByTagName:通过标签名称获取元素 (多个)。
(3)getElementsByClassName:通过类名获取元素 (多个)。
(4)querySelector :通过我们给定的名称获取第一个元素 (单个)。
querySelector可以通过 id、类名、标签名等方式 获取到我们的元素,但要加上相应的标识符。
(5) querySelectorAll:通过我们给定的名称获取所有该名称的元素(多个)。
通过标签名、类名、querySelectorAll获取到的元素无论个数 都会被存放在数组内,我们要操作元素的时候需要用下标选择到某一元素。
ul class="demo">
<li>1</li>
<!-- <li>2</li>
<li>3</li> -->
</ul>
<div>222</div>
<div></div>
var test = document.getElementsByTagName('li');
console.log(test);
var p = document.createElement('p');
// console.log(document.createElement('p'));
p.innerText = "你好,p标签";
console.log(p);
test[0].appendChild(p)