javaScript

最新推荐文章于 2022-09-07 16:54:39 发布

别浪呀

最新推荐文章于 2022-09-07 16:54:39 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/adminBfl/article/details/85759572

版权

获取元素如果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()

javascript的DOM操作

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
评论
javaScript

获取元素如果id是变量不需要加引号,如果是字符串需要添加引号""document.getElementById("id名称") 获取元素里面的值valuedocument.getElementById("id名称").value;警告框：alert();向页面指定位置写入内容：innerHTML(属性)向页面写入内容：document.write(...
复制链接

扫一扫