JavaScriptの基本を確認する[02]

JavaScriptを学習するには、w3school、新人チュートリアル、その他の学習Webサイトにアクセスして確認してください。

HTMLファイルの内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 基础02</title>
</head>

<body>
    <input type="button" value="向后添加input" id="id01">
    <input type="button" value="向前添加input" id="id02">
    <hr>
    <input type="button" value="按钮" id="id03">
    <ul id="id04">
        <li>小印01</li>
        <li>小印02</li>
        <li>小印03</li>
    </ul>
    <hr>
    <input type="button" value="按钮" id="id05">
    <hr>
    <div id="id06">
        <span>Hello</span>
        <span>World</span>
    </div>
    <hr>
    <div id="id07">
        <span>Hello</span>
        <span>小印</span>
    </div>
    <hr>
    <p id="id08" class="class01">HEllo p1</p>
    <p id="id09">HEllo p2</p>
    <h3>小印01</h3>
    <h3>小印02</h3>
    <br id="id10">
    <input type="button" value="按钮1" onclick="change1()">
    <input type="button" value="按钮2" onclick="change2()">
    <input type="button" value="按钮3" onclick="change3()">
    <hr>
    <input type="button" value="关闭定时器" onclick="stop1()">
    <hr>
    <input type="button" value="跳转到百度" onclick="toBaiDu()">

    <!-- ******************************************************************************************** -->

    <script src="../StudyJavaScript/js/Demo02.js"></script>
    <style>
        .class01 {
     
     
            background-color: red;
            color: blue;
            font-size: 25px;
            font-family: "宋体";
        }
    </style>
</body>

</html>

JSファイルの内容：

document.getElementById("id01").onclick = function() {
    
    
    // 动态操作元素
    var newTag01 = document.createElement("input"); // 创建元素
    document.body.appendChild(newTag01); // 在后面添加子元素
}
document.getElementById("id02").onclick = function() {
    
    
    // 动态操作元素
    var newTag02 = document.createElement("input"); // 创建元素
    document.body.insertBefore(newTag02, document.getElementById("id02")); // 在某个元素前面添加元素
}

/** 
 * document.firstChild; 获得第一个子元素
 * document.childNodes; 获得所有子节点元素【在此处文字和空格都被看做节点】
 * document.removeChild(); 移除指定的子节点元素
 */
var btn01 = document.getElementById("id03");
btn01.onclick = function() {
    
    
    var list1 = document.getElementById("id04");
    console.log(list1.childNodes[1]);
    console.log(list1.firstChild);
    console.log(list1.lastChild);
    list1.removeChild(list1.childNodes[1]); // 移除一个 li标签，因为 li标签 前面有空格，所以这里的下标是[1]
    console.log("-----------------分割线--------------------");

}

var btn02 = document.getElementById("id05");
btn02.onclick = function() {
    
    
    var newTag03 = document.createElement("div");
    newTag03.innerHTML = "Hello 小印~";
    document.body.appendChild(newTag03);
};

// innerHTML 用于获取与赋值有开闭标签的元素中完整的内容
// innerHTML 赋值可以识别并添加 HTML标签
var conent01 = document.getElementById("id06").innerHTML;
console.log(conent01);
console.log("-----------------分割线--------------------");

// 当使用 innerHTML 添加内容，会把原有的内容偶读覆盖【可以说是替换内容】
var conent02 = document.getElementById("id06").innerHTML = "<b>Hello 小印</b>";
console.log(conent02);
var conent03 = document.getElementById("id06").innerHTML;
console.log(conent03);
console.log("-----------------分割线--------------------");

// innerText 用于获取与赋值拥有开闭标签的元素中文字部分的内容
var conent04 = document.getElementById("id07").innerText;
console.log(conent04);
// innerText 也会替换内容，但是不会识别标签
var conent05 = document.getElementById("id07").innerHTML = "<b>Hello 小印</b>";
console.log(conent05);
console.log("-----------------分割线--------------------");

// 操作样式
/**
 * 操作 style 属性【直接在标签中赋值属性】
 * style 属性可以设置或返回样式
 * style 设置 css 特征值时，需要吧特征的 短横线命名法 改成 驼峰命名法 后使用
 */
function change1() {
    
    
    var p2 = document.getElementById("id09");
    p2.style.backgroundColor = "#eeeeee"
    p2.style.color = "red";
    p2.style.fontFamily = "宋体";
    p2.style.fontSize = "25px";
    var mycolor1 = p2.style.color;
    console.log("我的字体颜色是：" + mycolor1);
    console.log("-----------------分割线--------------------");
    // float 是 js 的保留字，故在给元素设置 float 属性时，需要写为：
    p2.style.cssFloat = "left";
    document.getElementById("id08").style.cssFloat = "left";
    document.getElementById("id10").style.clear = "both";
}

function change2() {
    
    
    var p2 = document.getElementById("id09");
    p2.className = "class01";
    console.log(p2.className);
}

// 批量设置属性
function change3() {
    
    
    var hh1 = document.getElementsByTagName("h3");
    for (let i = 0; i < hh1.length; i++) {
    
    
        const element1 = hh1[i];
        element1.style.backgroundColor = "red";
    }
}

// BOM 即 Browser Object Model【浏览器对象模型】
// BOM 用于操作浏览器行为
// 操作 BOM 对象，一般使用 window 关键字调用

// window.alert("Hello 小印~");
// window.document 前面的 window 都可以省略

// 询问框
var bool1 = confirm("是否要关闭浏览器？");
console.log(bool1);
console.log("-----------------分割线--------------------");

// window.close(); 关闭浏览器

// prompt 输入确定会返回输入框里面的内容，取消返回 null【不填内容后确认返回的是空白内容不是null】
var txt1 = prompt("尽情的输入吧！！！");
console.log(txt1);

function run1() {
    
    
    console.log("疯狂跑~");
}
// setInterval(); 定时器【参数1：运行的程序, 参数2：定时的时间间隔是一毫秒为单位】
// setInterval(run1, 100);
var i = 0;
var setIntervalId1 = setInterval(() => {
    
    
    console.log(++i);
}, 100);
/**
 * var setIntervalId1 = setInterval(() => {
 *     console.log(++i);
 * }, 100);
 * 也可以写成：
 * var setIntervalId1 = setInterval(function(){
 *     console.log(++i);
 * }, 100);
 */

function stop1() {
    
    
    // 停止定时器
    clearInterval(setIntervalId1);
    console.log("-----------------分割线--------------------");
}

// 如果只想执行一次可以使用 setTimeout() 方法
// setTimeout() 一次性定时器，方法用于在指定的毫秒数后调用需要执行的代码
setTimeout(() => {
    
    
    console.log("我就相当于延时器，我执行完之后不会重复执行,我是延时了2秒的哦");
}, 2000);

// location.href 后面不给参数的时候是返回完整的 URL，给地址就是跳转到所给的地址
console.log(location.href);

function toBaiDu() {
    
    
    location.href = "https:\\www.baidu.com";
}

/**
 * location 浏览器地址栏对象
 * ☆href 返回完整的URL
 * ☆port 返回一个 URL 服务器使用的端口号
 * onload 页面加载完成后调用
 */
// 页面加载完完成后调用【可以用于头部的js，调用下方 body 中的标签】
window.onload = function() {
    
    
    console.log("页面加载完成后才调用我");
};

ソースコードに注意

後で読むことができるように、いくつかメモを取ります。

JavaScriptの基本を確認する[02]

おすすめ