javaScript

获取元素 如果id是变量不需要加引号,如果是字符串需要添加 引号""

document.getElementById("id名称") 

获取元素里面的值value

document.getElementById("id名称").value;

警告框:

alert();

向页面指定位置写入内容:

innerHTML(属性)

向页面写入内容:

document.write(“”);

Html部分代码:

<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="1300px" style="display: none;" id="img1"/>

设置标签内属性值。

//根据id获取dom对象
var imgEl = document.getElementById("img1");
//设置标签的src属性
imgEl.src="../img/"+i+".jpg";
//设置图片的属性(display)让其显示
imgEl.style.display="block";
//获取图片并设置隐藏的属性
document.getElementById("img1").style.display="none";

页面加载事件onload)并为其绑定一个函数init()onload  加在body里面!

<body onload="init()">

Location 对象

Location 对象包含有关当前 URL 的信息。

href:该属性可以完成通过JS代码控制页面的跳转。

<html>

<head>

    <meta charset="UTF-8">

    <title>location对象</title>

    <script>

        function tiao() {

            window.location.href = "http://www.baidu.com";

        }

    </script>

</head>

<body>

<a href="#" onclick="tiao()">跳转到百度首页</a>

</body>

</html>

History对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

历史页面:使用location页面(把href属性值改为当前的history)

History页面代码:

<input type="button"  value="返回上一个页面" onclick="javascript:history.back()"/>

go(参数)

参数:-1 返回上一个历史记录页面;-2返回上上一个历史记录页面,1进入下一个历史记录页面

Navigator对象

Navigator 对象包含有关浏览器的信息

Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

向页面指定位置写入内容:innerHTML属性(该属性的值存在覆盖现象)

//获取span元素,给出提示信
document.getElementById(id+"span").innerHTML="<font color='gray'>"+xxxx+"</font>";

 javascript的事件

设置背景颜色(.style.backgroundColor)
 

<script>
	function changeColor(id,flag){
		if(flag=="over"){
			document.getElementById(id).style.backgroundColor="red";
		}else if(flag=="out"){
			document.getElementById(id).style.backgroundColor="white";
		}
	}

使用JS完成表格的一个隔行换色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
</head>
<script>
    function init(){
        //获取table对象
        var elementById = document.getElementById("myTable");
        //获取tbody行数
        var length = elementById.tBodies[0].rows.length;
        //遍历获取tbody
        for (var i = 0; i < length; i++) {
            //判断奇数偶数
            if(i%2==0){
                //获取当前行
                elementById.tBodies[0].rows[i].style.backgroundColor="red";
            }else{
                elementById.tBodies[0].rows[i].style.backgroundColor="blue";

            }

        }

    }

</script>
<body onload="init()">
<table bgcolor="#faebd7" border="1" width="500" align="center" id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <th>张三</th>
        <th>12</th>
    </tr>
    <tr>
        <th>2</th>
        <th>李四</th>
        <th>12</th>
    </tr>
    <tr>
        <th>3</th>
        <th>王五</th>
        <th>12</th>
    </tr>
    <tr>
        <th>4</th>
        <th>马六</th>
        <th>12</th>
    </tr>
    </tbody>
</table>
</body>
</html>


使用js实现一个表格鼠标聚焦和失焦的高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格高亮显示</title>
</head>
<script>
function trChange(id,flag) {
    if (flag=='over') {
        document.getElementById(id).style.backgroundColor="red";
    }else{
        document.getElementById(id).style.backgroundColor="white";
    }
}
</script>
<body >
<table bgcolor="white" border="1" width="500" align="center" >
    <thead>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
    <tr onmouseover="trChange('tr1','over')" onmouseout="trChange('tr1','out')" id="tr1">
        <th>1</th>
        <th>张三</th>
        <th>12</th>
    </tr>
    <tr onmouseover="trChange('tr2','over')" onmouseout="trChange('tr2','out')" id="tr2">
        <th>2</th>
        <th>李四</th>
        <th>12</th>
    </tr>
    <tr onmouseover="trChange('tr3','over')" onmouseout="trChange('tr3','out')" id="tr3">
        <th>3</th>
        <th>王五</th>
        <th>12</th>
    </tr>
    <tr onmouseover="trChange('tr4','over')" onmouseout="trChange('tr4','out')" id="tr4">
        <th>4</th>
        <th>马六</th>
        <th>12</th>
    </tr>
    </tbody>
</table>
</body>
</html>

使用JS完成省市二级联动

事件(onchange)

使用一个二维数组来存储省份和城市(二维数组的创建?)

获取用户选择的省份(使用方法传参的方式:this.value)

遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市)

创建文本节点和元素节点并进行添加操作

createTextNode()

createElement()

appendChild()

 

 

javascriptDOM操作

Document对象

整个html文件都成为一个document文档

Element对象

我们所认知的html页面中所有的标签都是element元素

 Attribute对象 

我们所认知的html页面中所有标签里面的属性都是attribute

常用方法: 

方法描述
getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值