JavaScript_基础

最新推荐文章于 2024-05-22 21:18:46 发布

我也要奔跑

最新推荐文章于 2024-05-22 21:18:46 发布

阅读量59

点赞数

分类专栏： Java学习ing 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52550657/article/details/122416784

版权

Java学习ing 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、简介

1.1概念

JavaScript是解释性脚本语言（不进行预编译）
注释方式和java相同

1.2作用

为网页添加动态响应

二、使用

2.1创建

使用script围堵标签（双标签）；
可以写在head、body、属性中；
type="text/javascript"可以省略不写
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>create</title>
</head>
<body>
<h1>创建js</h1>
<!--写在属性中-->
<a href="javascript:alert('你点击了点击')">点击</a>
</body>
<script type="text/javascript">// 这里可以省略type属性
    alert("创建成功")
</script>
</html>

2.2三种弹窗及显示数据的四种方式

三种弹窗

alter();警告弹窗
confirm();确认弹窗
prompt();输入弹窗

显示数据的四种方式

window.alert();
console.log();写入到浏览器控制台；
document.write();在页面写入，如果页面已经加载完毕，写入会覆盖原有内容；
innerHtml;获取元素对象进行写入；

<script>
    alert("页面加载了");//001 弹窗
    console.log("页面加载完成");//002 控制台
    window.document.write("我进来了，嘿嘿嘿");// 003 Dom
    let hh = document.getElementById("hh");// 004 元素对象
    hh.innerHTML= hh.innerHTML + "（这里）";
</script>

2.3window对象

2.3.1属性

document
history
location
name

2.3.2方法

alert();警告弹窗
conform();确认弹窗
prompt();输入弹窗
open();打开一个新的浏览器窗口或者查找一个已命名的窗口
close();关闭浏览器窗口
setTimeout();在指定的毫秒数后调用函数或计算表达式；
setInterval();按照指定周期来调用函数；
clearIntervl();取消setInterval()设置的timeout;
clearTimeout();取消setTimeout()方法设置的timeout;

2.4常用事件

onchange HTML元素改变
onclick 用户点击HtmL元素
onmouseover 移动鼠标至元素上
onmouseout 从元素上移开鼠标
onkeydown 按下键盘按键
onload 浏览器加载页面完成
onfocus 元素取焦点
onblur 元素失去焦点

2.5document

2.5.1获取元素的四种方式

document.getElementById(); 获取第一个指定id的对象引用；
document.getElementsByClassName();获取指定类的元素的集合，作为NodeList对象；
document.getElementsByTagName();获取带有指定标签的对象的集合；
document.getElementsByName();获取指定名称的对象集合；

2.5.2修改内容和属性

修改内容：document.getElementById(id).innerHTML = 新的HTML；
修改属性：
- document.getElementById(id).attribute = 新属性值;
- document.getElementById(is).setAttribute(属性名，属性值);
修改css:document.getElementById(id).style.property=新样式；

2.5.3操作元素

新增元素：
- 1 需要在其内添加元素的标签：let div = document.getElementById(id);
- 2 创建新的元素：let newElement =document.createElement(“p”);let text = document.createTextNode(“11”);newElement.appendChild(text);
- 3 添加 div.appendChild(newElement);
- 4 也可以插入到另一个元素之前；div.insertBefore(newElement,p1);
替换元素：

<body>
<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p></div>
<button type="button" onclick="changeElemnt()">替换p1</button>
<script> 
    function changeElemnt() {
    var newElementP = document.createElement("p");//创建一个新的段落元素
    var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点 
    newElementP.appendChild(text); //将文本的节点添加到新创建的元素中 
    //获取要被替换的元素p1及其父元素
    var div=document.getElementById("div1"); 
    var p1=document.getElementById("p1"); 
    div.replaceChild(newElementP,p1);//将div中的元素p1替换为新创建的元素  
    } 
</script>
</body>

删除元素

<body>
<div id="div">
    <p id="p1">段落一：哈哈哈</p>
    <p id="p2">段落二：嘿嘿嘿</p>
    <button onclick="f1()">删除方式1</button>
    <button onclick="f2()">删除方式2</button>
</div>
<script>
let f1 = function (){
    let p1 = window.document.getElementById("p1");
    let div = window.document.getElementById("div");
    div.removeChild(p1);
}
let f2 = function (){
    let p2 = window.document.getElementById("p2")
    p2.parentNode.removeChild(p2);
    //p2.parentElement.removeChild(p2);
}

我也要奔跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_基础

一、简介1.1概念JavaScript是解释性脚本语言（不进行预编译）注释方式和java相同1.2作用为网页添加动态响应二、使用2.1创建使用script围堵标签（双标签）；可以写在head、body、属性中；type="text/javascript"可以省略不写例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl
复制链接

扫一扫