JavaScript入门

最新推荐文章于 2024-06-04 23:11:16 发布

沐12138

最新推荐文章于 2024-06-04 23:11:16 发布

阅读量39

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52173610/article/details/132589746

版权

概述
JS（JavaScript）是一种解释型脚本语言，运行在浏览器中，处理网页上行为（动作）

JS书写的位置
        标签的事件
        script标签
        外部文件

<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 3.用script标签引入独立js文件 -->
<script src="./js/my.js"></script>
</head>
<body>
<!-- 1. onxxxx就是标签的事件，事件里面可以直接写js代码 -->
<input type="button" value="点我" onclick="alert()">
<!-- 2. script标签里面写js代码
一般放在/body之前
-->
<script type="text/javascript">
// alert()
</script>
</body>
</html>

注释
// 单行
/* 多行注释 */

输出信息

alert() 弹出警告框
console.log() 控制台输出
document.write()

变量和函数定义

6种数据类型
string
number
boolean
object
function
symbol
3种对象类型
object
date
array
变量定义
var i = 10
var s = 'abc'
var arr = []
var obj = {}
let a = 5
const pi = 3.14
函数定义
参数没有类型
函数也没有返回类型，如果函数体有return语句就有返回；如果没有return语句，无返回
function fu1(arg1){
}

事件

onclick 点击事件
onchange 内容改变事件，一般用于输入框
onmouseover 鼠标滑过事件，类似hover
onload 页面加载事件
onfocus 获得焦点事件，一般用户输入框

增加和删除标签

createElement('div') 创建标签对象，参数是标签名
createTextNode(i) 创建标签的文字对象，参数是文字内容
xxx.appendChild(child) 添加子标签。xxx父标签，child要添加的子标签对象
outer.insertBefore(box1, p2) 在某个标签前面插入新标签。 outer父标签，box1要插入的标签
对象， p2插入的位置标签对象
outer.removeChild(p1) 删除子标签。outer父标签， p1要删除的子标签
p2.remove() 删除标签自己（p2）

<html>
<head>
<meta charset="utf-8">
<title>增加，删除标签</title>
<style type="text/css">
	.outer{
		width: 500px;
		height: 500px;
		border: 1px solid red;
		/* 内容超出范围之后的处理方式：scroll -滚动； hiden - 不显示 */
		overflow:scroll;
		}
	.box{
		width: 100px;
		height: 100px;
		border: 1px solid red;
	}
</style>
</head>
<body>
	<input type="button" value="新增标签" onclick="add()">
	<input type="button" value="删除标签" onclick="del()">
	<div class="outer" id="outer">
		<p id="one">第一个p标签</p>
		<p id="two">第二个p标签</p>
	</div>
<script type="text/javascript">
	let i = 1;
	//把对象添加到容器标签
	let outer = document.getElementById("outer")
	let p2 = document.getElementById("two")
	let p1 = document.getElementById("one")
	function add(){
	//创建标签对象
	let box1 = document.createElement('div')
	box1.className = "box"
	// // 创建标签的文本对象（innerText）
	// 标签的遍历
	// 在页面上，只要能得到任意一个标签，就可以通过兄弟，父子关系去访问到页面的所有标签
	// parentElement 父标签
	// children[] 子标签，子标签是数组，需要用序号访问
	// firstElementChild 第一个子标签
	// lastElementChild 最后一个子标签
	// nextElementSibling 下一个标签（弟弟）
	// previousElementSibling 上一个标签（哥哥）
	let txtNode1 = document.createTextNode(i)
	box1.appendChild(txtNode1)
	// 添加一个子标签对象(在innerHTML后面追加)
	outer.appendChild(box1)
	//在第二个P标签前面插入. 第一个参数box1新标签；第二个参数p2插入的位置（它之前）
	outer.insertBefore(box1, p2)
		i++
	}
	function del(){
	// 删除容器的子标签
	outer.removeChild(p1)
	// 删除标签对象自身
	p2.remove()
	}
</script>
</body>
</html>

标签的遍历

在页面上，只要能得到任意一个标签，就可以通过兄弟，父子关系去访问到页面的所有标签
parentElement 父标签
children[] 子标签，子标签是数组，需要用序号访问
firstElementChild 第一个子标签
lastElementChild 最后一个子标签
nextElementSibling 下一个标签（弟弟）
previousElementSibling 上一个标签（哥哥）

<html>
<head>
    <meta charset="utf-8">
    <title>遍历标签</title>
    <style type="text/css">
        .outer{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: auto;
        }
        .mid{
            width: 200px;
            height: 200px;
            border: 1px solid green;
            margin: auto;
        }
        .inner1,
        .inner2{
            width: 50px;
            height: 50px;
            border: 1px solid blue;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        outer
        <div class="mid" id="mid">
            mid
            <div class="inner1">
                inner1
            </div>
            <div class="inner2">
                inner2
            </div>
        </div>
    </div>
    <script type="text/javascript">
        let mid = document.getElementById("mid");
        // 获取父标签
        let outer = mid.parentElement;
        console.log(outer);
        let inner1 = mid.children[0];
        console.log(inner1);
        let inner2 = mid.children[1];
        console.log(inner2);
        inner1 = mid.firstElementChild;
        console.log(inner1);
        inner2 = mid.lastElementChild;
        console.log(inner2);
        inner2 = inner1.nextElementSibling;
        console.log(inner2);
        inner1 = inner2.previousElementSibling;
        console.log(inner1);
    </script>
</body>
</html>

沐12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript入门

outer.insertBefore(box1, p2) 在某个标签前面插入新标签。outer父标签，box1要插入的标签。xxx父标签，child要添加的子标签对象。outer父标签， p1要删除的子标签。JS（JavaScript）是一种解释型脚本语言，运行在浏览器中，处理网页上行为（动作）在页面上，只要能得到任意一个标签，就可以通过兄弟，父子关系去访问到页面的所有标签。createElement('div') 创建标签对象，参数是标签名。children[] 子标签，子标签是数组，需要用序号访问。
复制链接

扫一扫