JavaScript 学习笔记 p97 - 100

 

// 定义一个函数，用来为指定元素绑定单击响应函数
// 参数： idStr 绑定单机响应函数的对象的 ID 属性值;fun 事件的回调函数，单击元素时，该函数将会被触发
function myClick (idStr, fun) {
    var btn = document.getElementById (idStr);
    btn.onclick = fun;
}
//为ID为btn07的按钮绑定一个单击响应函数
myClick ("btn07",function () {
    var bj = document.getElementById ("bj");
// 返回#bj的父节点
    var pn = bj.parentNode;
    alert (pn.innerHTML);
});

~ innerText: 该属性可以获取到元素内部的文本内容。他和innerHTML类似，不同的是它会自动将html去除。

myClick ("btn08", function ( ) {
    var and = document.getElementById ("android");
// 返回 #Android 的前一个兄弟节点
    var ps = and.previousSibling;
// 获取前一个兄弟元素
    var pe = and.previousElementSibling;
    alert (ps);
});

my Click ("btn09", function () {
// 读取 #username 的 value 属性值
    var um = document.getElementById ("username");
    alert (um.value);
});

my Click ("btn10", function () {
// 设置 #username 的 value 属性值
    var um = document.getElementById ("username");
    um.value = "金坛天气真不错~~~";
});

my Click ("btn11", function () {
// 返回 #bj 的文本值
    var bj = document.getElementById ("bj");
    alert (bj.innerHTML);
});

// 获取 bj 中的文本节点
var fc = bj.firstChild;
alert (fc.nodeValue);
// 或者 alert (bj.firstChild.nodeValue);

全选练习：

// 全选按钮 #checkedAllBtn
var checkedALLBtn = document.getElementById ("checkedAllBtn");
checkedAllBtn.onclick = function () {

// 获取四个多选框
    var items = document.getElementByName ("items");
// 遍历 items
    for (var i = 0; i<items.length; i++) {
// 多选框变为选中
    items[i].checked = true;
    }
};

反选按钮：

// 反选按钮 #checkedRevBtn
var checkedRevBtn = document.getElementById ("checkedRevBtn");
checkedRevBtn.onclick = function () {

// 获取四个多选框
    var items = document.getElementByName ("items");
// 遍历 items
    for (var i = 0; i<items.length; i++) {
// 多选框变为选中
    items[i].checked = true;
    }
};

全不选 & 反选：

// 获取四个多选框 items
var items = document.getElementByName ("items");

var checkedNoBtn = document.getElementById ("checkedNoBtn");
checkedNoBtn.onclick = function ( ) { 
    for ( var i=0; i<items.length; i++) {
        if (items[i].checked) {
            items[i].checked = false;
        }else {
              items[i].checked = true;  
              }
    }
    
};

提交：

var sendBtn = document.getElementById ("sendBtn");
sendBtn.onclick = function ( ) {
    for (var i=0; i<items.length; i++) {
        if (items[i].checked) {
            alert (items[i].value);
        }
    }
}

全选/全不选 多选框 （当他选中时，其他的也选中，）

var checkedAllBox = document.getElementById ("checkedAllBox");
sendBtn.onclick = function ( ) {
    for (var i=0; i<items.length; i++) {
        if (items[i].checked) {
            alert (items[i].value);
        }
    }
}