2018-08-08 javascript的继续学习

今天大致学了四个内容：
1.第一个是select对象：select对象集合，select对象属性，select对象方法。
select对象集合：
options[ ]：返回包含下拉列表中的所有选项的一个数组。
select对象属性：
disabled：设置或返回是否应禁用下拉列表。
length：返回下拉列表中的选项数目。
selectedIndex：设置或返回下拉列表中被选项目的索引号。
select对象方法：
add()：向下拉列表添加一个选项。
remove()：从下拉列表中删除一个选项。
select对象集合和select对象属性的用法举例：

< html>
< head>
< meta charset=”utf-8” />
< title>< /title>
< /head>
< body>
< select id=”grade”>
< option value=”1”>一年级< /option>
< option value=”2”>二年级< /option>
< option value=”3”>三年级< /option>
< option value=”4”>四年级< /option>
< /select>
< input type=”button” οnclick=”test()” value=”按钮” />
< script>
function test(){
var select=document.getElementById(“grade”);
console.log(select.disabled);
console.log(select.selectedIndex);
console.log(select.length);

            console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");

            var options=select.options;
            console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");

            console.log(options[select.selectedIndex].value);
            for(var i=0;i<options.length;i++){
                console.log(options[i].value);
                console.log(options[i].selected);
                console.log(options[i].text);
                console.log("########################");
            }               
        }
    </script>
</body>

< /html>

select对象集合和select对象方法的用法举例：

< html>
< head>
< meta charset=”utf-8” />
< title>< /title>
< /head>
< body>
< select id=”grade”>
< option value=”1”>一年级< /option>
< option value=”2”>二年级< /option>
< option value=”3”>三年级< /option>
< option value=”4”>四年级< /option>
< /select>
< input type=”button” οnclick=”test()” value=”按钮” />
< script>
function test(){
var select=document.getElementById(“grade”);

            var option=new Option("五年级","5");
            select.add(option);
            select.remove(0);
        }
    </script>
</body>

< /html>

2.第二个是Window对象，学习了两个Window 对象方法：
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

< html>
< head>
< meta charset=”UTF-8”>
< title>< /title>
< /head>
< body>
< input type=”button” οnclick=”test()” value=”按钮” />
< script>
function test(){
alert(“窗口”);
var result=confirm(“您确定退出吗？”);
if(result){
console.log(“退出”);
}
else{
console.log(“不退出”);
}
//location.href=”http://www.baidu.com”;

            document.domain
        }
    </script>
</body>

< /html>
3.第三个是div对象，学习了一种新的定义div样式的方法，与之前的两种在一起可以成为第三种：

< html>
< head>
< meta charset=”UTF-8”>
< title>< /title>
< style>
.square{
background-color: pink;
width: 100px;
height: 100px;
}
< /style>
< /head>
< body>
< div class=”“>< /div>
< script>
//第一种：获取相应标签对应的javascript对象.style
/*(function(){
var div=document.getElementsByTagName(“div”)[0];
div.style.backgroundColor=”pink”;
div.style.width=”100px”;
div.style.height=”100px”;

        })();*/
        //第二种：获取相应标签对应的javascript对象.className
        //var div=document.getElementsByTagName("div")[0];
        //div.className="square";
        //第三种：通过setAttribute（属性名，属性值）；
        var div=document.getElementsByTagName("div")[0];
        div.setAttribute("class","square");
        div.removeAttribute("class","square");
    </script>
</body>

< /html>

4.第四个是body 对象，学习了一个cloneNote，克隆：

< html>
< head>
< meta charset=”UTF-8”>
< title>< /title>
< /head>
< body>
< p>黄河入海流< /p>
< script>
var body=document.getElementsByTagName(“body”)[0];
console.log(body.cloneNode(false));
console.log(body.cloneNode(true));
< /script>
< /body>
< /html>

今天就大致学了这四个内容，记忆的还不牢固，需要多加练习巩固。