JavaScript学习记录

最新推荐文章于 2023-08-15 00:42:53 发布

羁之绊

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量152

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.youkuaiyun.com/qq_44897467/article/details/124851656

版权

1.引入方式

内联定义

<script type="text/javascript">
    var div = document.querySelector(".wrap");
    div.innerHTML = 'Hello JavaScript(内联JS)!';
</script>

外部引入

<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

2.创建数组


var cars = ["奔驰", "宝马", "保时捷"];
var arr = ["aa", 23, 3.14, false];

3.遍历数组

for(var i = 0; i < cars.length; i++) {
    var car = cars[i];
    console.log('car: ' + car);
}

// ECMA5.1新增 
cars.forEach((item, index, array) => {
    console.log('idx: ' + index+', item: ' + item);
})

4.自定义函数

//1
function myFunction(a, b) {
     return a * b;
}
//2
var x = function (a, b) {return a * b};
var z = x(4, 3);

5.参数规则

JavaScript 函数定义不会为参数（parameter）规定数据类型。
JavaScript 函数不会对所传递的参数（argument）实行类型检查。
JavaScript 函数不会检查所接收参数（argument）的数量。

6.arguments对象


x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i;
    var max = -Infinity;
    // 通过arguments遍历传进来的所有参数
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

7.对象

创建自定义对象



// 使用构造函数

function Student(sname, age, sex) {
    this.sname = sname;
    this.age = age;
    this.sex = sex;
}

// 构造函数定义对象支持通过prototype属性扩展对象功能(是在对象原型上扩展功能，类似与Java中的类，所以后续通过该构造函数创建出的对象都带有扩展的功能)
Student.prototype.say = function() {
    console.log("Hi, I'm " + this.sname + "!");
}

let stu2 = new Student("李四", 23, "女");
console.log(stu2.sname); // 李四
stu2.say();        // Hi, I'm 李四!

8.JavaScript事件DOM定时器


<button id="btn"></button>


// 给按钮绑定点击事件
var btn = document.getElementById("btn");
btn.onclick = function() {
    alert('您点击了按钮');
}

// 给文档对象绑定加载完成事件
window.onload = function() {
    console.log('当前页面已经加载完毕');
}

9.常用的DOM操作API

document.getElementById(id) 按照标签的id属性值获取dom对象，返回单个
document.getElementsByTagName(name) 按照标签名称获取dom对象，返回dom数组
document.querySelector(cssSelector) 按照css选择器获取dom对象，返回单个
document.querySelectorAll(cssSelector) 按照css选择器获取dom对象，返回dom数组
document.createElement(name) 创建DOM元素
parentNode.appendChild(node) 将元素添加到父元素中
element.innerHTML 设置标签内容
element.style.left 设置样式属性值
element.setAttribute() 设置属性值
element.getAttribute() 获取属性值
element.addEventListener() 绑定事件处理函数
window.scrollTo() 滚动窗口

10定时器

setInterval() 和 setTimeout()。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

示例：

用定时器实现时钟效果


<html>
    <body>
        <form>
            <input type="text" id="clock" size="35" />
            <button onclick="stop()">停止</button>
        </form>
    </body>
    <script type="text/javascript">
        function clock(){
            var now=new Date();
            document.getElementById("clock").value=now;
        }

        // 开启计时器，50毫秒刷新一次时间
        var timerId = self.setInterval("clock()",50); 

        // 停止计时器
        function stop() {
            clearInterval(timerId);
        }
    </script>
</html>

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

示例：

function test() {
   alert('5 seconds!'); 
}
var timerId = setTimeout(test,5000);  // 延时5秒弹窗

// 如果想取消定时任务
clearTimeout(timerId);

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。