WEB--javaScript基础

文章目录

3种引用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/demo.css" type="text/css">
    <!-- 方式2 头部嵌入-->
    <script>alert('你好')</script>
    <!-- 方式3 外链式 -->
    <script type="text/javascript"  src="../static/js/demo.js"></script>
</head>
<body>
    <!-- 方式1 行内嵌入式-->
    <a href="https://www.baidu.com"  onclick="alert('您将要跳转到百度')">百度</a>
</body>
</html>

变量命名

命名方式：建议小驼峰，且 js大小写敏感

// 变量命名
var sss='zhangsan'
// 一般采用小驼峰
var studentName = 'lisi'

var age
age = 18

// 控制台输出
console.log(sss)
console.log(studentName)
console.log(age)

数据类型

js是弱类型语言，比python还要弱。
js数据类型：数字类型、字符串、数组、null、undefined、boolean

// number
var a=100;
console.log(typeof(a));

// string
var str = 'hello';
console.log(typeof(str));

// boolean
var s = true;
console.log(typeof(s));

// Array

var aList =  Array(1, 2, 3, 4, 5);

console.log(aList);
console.log(aList.length);


aList.push('a');    // 列表最后新增元素
console.log(aList);

aList.pop();  // pop() 删除列表最后一个
aList.pop();
console.log(aList);

// null
var c = null;

console.log(c);

// undefined

var d;
console.log(d)

运算符

算数运算符

// 算数运算符
var a = 3;
var b = 2;

c = a + b
d = a - b
e = a * b
f = a / b
g = a % b 
console.log(c)
console.log(d)
console.log(e)
console.log(f)
console.log(g)

赋值运算符

// 赋值运算符

var a = 3
console.log(a)

a += 1 
console.log(a)

a -= 2
console.log(a)

a *= 2
console.log(a)

a /= 2
console.log(a)

a %= 2 
console.log(a)

// a++与++a:原理还是运算符的优先级不同
// a++是表示先把值赋给其他为数字类型的变量，自己再+1

var a = 5  

b = a ++

console.log(a)  // 6
console.log(b)  // 5

// ++a是自己先+1，再把值赋给数字类型的变量

var c = 5  

d = ++ c

console.log(c)  // 6
console.log(d)  // 6

条件运算符

// 条件运算符

// ==： 先检查数据类型，相同则进行===比较， 不同则转换成相同类型后再进行比较
// ===： 先检查数据类型，不同直接false
var a = 3
var b = '3'
console.log(a == b)  // true
console.log(a === b) // false

var c = 5
console.log(a < c)   // true
console.log(a > c)   // false
console.log(a <= c)   // true
console.log(a >= c)   // false
console.log(a != c)  // true

逻辑运算符

// 逻辑运算符
var a = 6
var b = 3

// 且 ， &&前面是false，返“&&”前面的值，否则返回后面的值
console.log(a&&b)   //3
console.log(b&&a)   //6

// 或，  ||前面是false，返“||”后面的值，否则返回前面的值
console.log(a||b)   //6
console.log(b||a)   //3


// 非 
console.log(!(a == b)) // true

条件语句

if条件语句

// 语法
if (condition1) {
    
    
    如果 condition1 为 true 执行该代码块
} else if (condition2) {
    
    
    如果 condition1 为 false 且 condition2 为 true 执行该代码块
} else {
    
    
    如果 condition1 为 false 且 condition2 为 false 执行该代码块
}

var a = 4
 
if (a < 5){
    
    
    alert('小于5');
}else if (a > 5){
    
    
    alert('大于5');
}else{
    
    
    alert('等于5');
}

switch条件判断

// switch条件判断
var a = 4
var b = 4
 
switch (a + b){
    
    
    case 5:
        alert('等于5');
        break
    case 6:
        alert('等于6');
        break
    case 7:
        alert('等于7');
        break
    default:
        alert('都对不上')
        break
}

循环

while循环

var i = 0;
while (i<10){
    
    
    console.log(i);
    i++;
}

for循环

for (var j=0;j<10;j++){
    
    
    console.log(j)
}

for in

// Array
var aList = Array(11,22,33,44)
for (i in aList){
    
    
    console.log(i)   // 打印序列索引
    console.log(aList[i])  // 打印列表索引对应的数值
}

// object

var objA = {
    
    
    name: '张三',
    age: 18,
    gender: '男'
}


for (i in objA){
    
    
    console.log(i)   // 输出对象属性
    console.log(objA[i])   // 输出对象属性值
}

函数

// 如果缺少return,则现实undefied
function m(){
    
    
    return 3
}


function  add(a, b){
    
    
    return a + b
}

对象

定义对象

// 方式一
var objA = new Object()

// 方式二
var objB = {
    
    }

对象属性和方法

function  add(a, b){
    
    
    return a + b;
    }

var objC = {
    
    
    name: 'zhangsan', 
    age: 18, 
    address: 'wuhan', 
    func: add
    };
// 属性操作:  objC.name 或 objC["name"]
// 访问方法:  objC.func(2, 3)

DOM及Element元素操作

DOM: Document Object Model,文档对象模型。html页面加载之后会自动生成文档对象模型DOM

获取页面标签

可以通过id、class、tag 3种常用

<script type="text/javascript">
    // window.onload 页面加载完成了之后再执行
    window.onload = function (){
    
    
        // 通过id选择
        var box1 = document.getElementById('box1');
        console.log(box1)
        box1.style.background = 'red';

        // 通过ClassName选择，返回结果集列表
        var box2 = document.getElementsByClassName('box2')[0];
        console.log(box2);

        // 通过TagName选择，返回结果集
        var box = document.getElementsByTagName('div');  // demo.html:17 HTMLCollection(5) [div#box1, div.box2, div, div, div, box1: div#box1]
        console.log(box);
    };

获取标签注意问题

html顺序从上往下加载，当元素节点还未解析时，获取元素会出现undifined问题。解决方案1: 将对应js脚本放到页面最下面，等待页面加载完成后再执行；方案2: 放入window.onload触发的函数里就可以了。

操作标签内容

.innerHTML: 读取节点内html
.innerText: 读取节点内文本

<script type="text/javascript">
    window.onload = function (){
    
    
        // 获取html标签内容
        var box1Content = document.getElementById('box1').innerHTML;  //输出标签之间的所有内容
        var box1Text = document.getElementById('box1').innerText;  // 输出标签内的文本内容
        console.log(box1Content)
        console.log(box1Text)

        // 获取html标签内的文本内容

        // 修改html标签内容
        box1Content = '替换的内容'
        console.log(box1Content)
    };
</script>

修改标签属性

获取标签属性

方式1: .属性名
方式2: ['属性名']

修改标签属性

方法：先获取标签属性，并对标签属性重新赋值

<script type="text/javascript">
    window.onload = function (){
    
    
        // 获取html中对象
        var box1 = document.getElementById('box1');
        // 通过.方式获取属性值
        var classValue = box1.className;
        console.log(classValue)
        // 通过[]方式获取属性值
        var idValue = box1['id']
        console.log(idValue)

        // 修改
        box1.className = 'box1Class';
        console.log(classValue)
        box1['id'] = 'box1Id';
        console.log(box1.id)

    };
    </script>

onclick事件

function func1(){
    
    
    var box1 = document.getElementById('box1')
    box1.style = "background-color: red; width: 100px; height: 100px"
}


<div id='box1' onclick="func1()" style="width: 80px; height: 80px; background-color: blue;"></div>

文章目录

3种引用方式

变量命名

数据类型

运算符

条件语句

循环

函数

对象

DOM及Element元素操作

获取页面标签

操作标签内容

修改标签属性

onclick事件

猜你喜欢