今天大致学了四个内容:
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>
今天就大致学了这四个内容,记忆的还不牢固,需要多加练习巩固。