JavaScript语法

一杯清泉

已于 2022-03-15 21:42:29 修改

阅读量256

点赞数

分类专栏：前端文章标签： 1024程序员节 javascript

于 2020-10-24 11:54:52 首次发布

本文链接：https://blog.csdn.net/yoonerloop/article/details/109256904

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、变量修饰符

（1）var

作用域：全局

嵌套定义，会覆盖原有的变量，并且在函数中定义函数外的变量，会导致函数中声明前的所有同名变量undefined

（2）let

作用域：声明所在的块，及子块，不可提升

（3）const：常量

作用域：声明所在的块，及子块，不可提升

2、if判断

var w = '阴天';
if (w === "晴天") {
    console.log('心情好')
} else {
    console.log("888")
}

== 表示相等（值相等），===表示恒等（类型和值都要相等），js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等。

3、switch判断

switch (w) {
    case "晴天":
        console.log('qingt');
        break
    case '阴天':
        console.log('yintian');
        break
    default:
        console.log('默认');
        break
}

4、while循环

var i = 0;
while (i <= 10) {
    i++;
    if (i % 2 === 0) {
        continue
    }
    console.log(i)
    if (i > 2) {
        break
    }
}

5、方法调用

//方法一：
function f() {
    alert('f调用了')
}
f()
//方法二
const b = function () {
    alert('b调用了')
};
b()

6、对象

/**
 * 对象
 * @type {{}}
 */

//方法一
var beyond = {}
beyond.name = 'zhangsan';
beyond.age = 18;
console.log(beyond)
console.log("-----------")
//方法二
var beyonds = {};
beyonds['name'] = '李四';
beyonds['age'] = 88
console.log(beyonds)
console.log("-----------")
//方法三
var be = {
    name: '啦咔咔',
    age: 20,
    list: ['微信', 'qq', '朋友圈'],
    show: function (text) {
        console.log(text)
    }
}
console.log(be)
console.log("-----------")
console.log(be.list[0])
console.log("-----------")
console.log(be.show('添加函数'))
console.log("-----------")

//循环输出属性
var s;
for (s in be) {
    if (typeof be[s] !== 'function') {
        console.log(s + "---" + be[s])
    }
}

7、dom

/**
 * dom
 *
 *  <ui>
     <li id = "id">内容</li>
    </ui>
 */

//根据ID获取对象
var id = document.getElementById("id");
var list = document.getElementsByTagName("li");

//所以元素
var query = document.querySelectorAll("")
//第一个元素
var query = document.querySelector("")

//节点名称：li
let nodeName = id.nodeName;
//节点文字：内容
let innerText = id.innerText;
//父节点：ui
let parentNode = id.parentNode;
//上一个兄弟元素
let previousElementSibling = id.previousElementSibling;
//下一个兄弟元素
let nextElementSibling = id.nextElementSibling;

8、dom操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<h1>哈哈哈</h1>
<p id="content">内容</p>
<ul class="ceshi">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
    <li>测试4</li>
</ul>

<script>
    //获取标签属性
    var cot = document.getElementById('content');
    console.log(cot.nodeName)
    console.log(cot.innerText)
    console.log(cot.parentNode)
    console.log(cot.previousElementSibling)
    console.log(cot.nextElementSibling)
    //查找标签属性
    var selectorAll = document.querySelectorAll('.ceshi li');
    for (let i = 0; i < selectorAll.length; i++) {
        console.log(selectorAll[i].className)
        console.log(selectorAll[i].innerText)
    }
    //追加元素
    let element = document.createElement('h1');
    let text = document.createTextNode('我的这里');
    element.append(text)
    cot.parentNode.append(element)
    //插入元素
    let ele = document.createElement('h3');
    ele.innerText = '777';
    cot.parentNode.insertBefore(ele, cot.previousElementSibling)

    window.onload = function () {
        let id = document.getElementById('btn');
        // id.onclick = function () {
        //     console.log('onclick')
        // }
        // id.onmouseover = function () {
        //     console.log('onmouseover')
        // }

        id.addEventListener('click', function () {
            console.log('addEventListener——>click')
            //event事件的相关属性
            console.log(event)
            //停止事件
            event.stopPropagation()

        }, false)
    }
</script>

<!--事件-->
<a href="#" onclick="console.log('被点击了')" onmouseover="console.log('鼠标划过了')">事件测试</a>
<a href="#" id="btn">事件测试2</a>
</body>
</html>

9、==和===

1 == '1'：true
1 === '1'：false

if(obj.name == null){

}

相当于

obj.name === null并且obj.name === undefined

程序中所有的等于都需要使用===，obj == null除外

总结：

（1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
（2）同类型比较，直接进行“值”比较，两者结果一样
（3）对于Array,Object等高级类型，==和===是没有区别的

一杯清泉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语法

1、变量修饰符（1）var作用域：全局嵌套定义，会覆盖原有的变量，并且在函数中定义函数外的变量，会导致函数中声明前的所有同名变量undefined（2）let作用域：声明所在的块，及子块，不可提升（3）const：常量作用域：声明所在的块，及子块，不可提升2、if判断var w = '阴天';if (w === "晴天") { console.log('心情好')} else { console.log("888")}== 表示相等（值...
复制链接

扫一扫