//JS操纵HTML对象步骤://获取对象
var Obj = document.getElementById("id");
//操纵对象属性
obj.style.backgroundColor="#ff0";
(3)Location对象
location
获取当前页面URL
设置当前页面URL(完成网页跳转)
var url = window.location.href; //获取地址栏URL
window.location.href = "http://www.baidu.com"; //设置跳转URL
(4)History对象
go(int)方法
function goBack(){ //后退一个网页
history.go(-1);
}
(8)Demo练习
实现表单的隔行换色
(1)表单隔行换色
<script>
//当前页面加载成功
onload=function(){
//1.获取所有的tr
var arr = document.getElementsByTagName("tr");
//alert(arr);//alert(arr.length);//2.判断奇偶数for(var i = 1; i < arr.length; i++){
if(i%2 == 0){
arr[i].style.backgroundColor = "aqua";
}else{
arr[i].style.backgroundColor = "coral";
}
}
}
</script>
(2)复选框全选
由一个单选框决定其他所有复选框的状态(比如购物车中常见的全选按钮)
<script>
function checkAll(obj){
//获取当前框的状态
var flag = obj.checked;
//获取所有复选框
var arr = document.getElementsByClassName("itemSelect");
//改变所有复选框的状态for(var i=0; i < arr.length; i++){
arr[i].checked = flag;
}
}
</script>
(3)省市联动
在复选框中选中省之后后面的选项中是对应的市区集合选择(比如注册或者购买火车票的时候)
<script>
function selCity(index){
var cities = arr[index];
var cityChoices = document.getElementsByName("city")[0]; //ByName返回的是数组类型,获取市的下拉选项:因为只有一个元素,所以取[0],
cityChoices.innerHTML = ("<option >-请选择-</option> ");
for(var i=0; i < cities.length; i++){
cityChoices.innerHTML += ("<option>" + cities[i] + "</option>");
}
}
</script>