JS入门基础

最新推荐文章于 2024-07-06 16:47:02 发布

小张同学（恩师白云）

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量1k

点赞数 14

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

本文链接：https://blog.csdn.net/weixin_68489989/article/details/139662093

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、基本语法

HTML 中的JavaScript脚本必须位于 <script> 与 </script> 标签之间。
<script>标签可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> //标识标签
alert("我的第一个 JavaScript");//脚本语句
</script>
也可以使用外部脚本<script src="myScript.js"></script>
几种输出语句：

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 console.log() 写入到浏览器的控制台（类似日志功能）

使用window.confirm();输出带有判断的弹出框

如果⽤户单击“确定”，该框返回 true。如果⽤户单击“取消”，该框返回 false。

使用 window.prompt("请输入姓名");输出提示框

如果⽤户单击“确定”，该框返回输⼊值。如果⽤户单击“取消”，该框返回 NULL。

二、数据类型

unfined，null，boolean，number，string，object，function

返回数据类型typeof()

三、选择器

document.getElementById() 通过元素id来查找元素

document.getElementByTagName() 通过标签名来查找元素

document.getElementByClassName() 通过类名来查找元素

document.getElementByName() 通过指定的name值来查找元素

通过id查找，得到的是一个元素，通过标签，类，name属性查找到的是一个数组，不是单个的元素，使用其中的内容需要遍历。

四、修改元素

修改元素内容

<html>
    <head>
        <script>
            function upd(){
                // 获取元素对象
                var a = document.getElementById("a");
                var ipt = document.getElementById("ipt");
                a.innerHTML = "京东";
                ipt.value = "hello world";
            }
        </script>
    </head>
    <body>
        <a href="" id="a">百度一下</a>
        <input type="text" id="ipt"><br>
        <button onclick="upd()">修改内容</button>
    </body>
</html>

修改元素样式

元素对象.style.样式 = “样式值”

<html>
    <head>
        <script>
            function upd(){
                // 获取元素对象
                var a = document.getElementById("a");
                a.style.color = "green";
                a.style.backgroundColor = "red";
            }
        </script>
    </head>
    <body>
        <a href="" id="a">百度一下</a>
        <button onclick="upd()">修改内容</button>
    </body>
</html>

修改元素属性

元素对象. setAttribute(“属性名”,”属性值”)	添加元素属性
元素对象. removeAttribute (“属性名”)	移除元素属性
元素对象. getAttribute(“属性名”)	获取元素属性
inp.classList.add("123");	追加一个class属性
inp.classList.remove("123")	移除一个class属性

<html>
    <head>
        <script>
            function upd(){
                // 获取元素对象
                var a = document.getElementById("a");
                //添加属性
                a.setAttribute("href","http://www.baidu.com");
                //移除属性
                a.removeAttribute("id");
            }
        </script>
    </head>
    <body>
        <a href="" id="a">百度一下</a>
        <button onclick="upd()">修改内容</button>
    </body>
</html>

添加/删除元素

parentNode	获取父节点
childNodes	获取子节点
document. createElement	创建标签节点
document. createTextNode	创建文本节点
appendChild	添加节点
parent.removeChild(child);	删除节点
parent.replaceChild(para, child);	替换节点

添加
<div id="div1"> 
    <p id="p1">这是一个段落。</p> 
    <p id="p2">这是另外一个段落。</p>
 </div> 
<script> 
    var para = document.createElement("p");//创建标签
    var node = document.createTextNode("这是一个新的段落。"); //创建内容
    para.appendChild(node);  //将文本添加到标签中
    var element = document.getElementById("div1");//获取元素
    element.appendChild(para); //添加到元素后面
</script>

移除
<div id="div1"> 
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p> 
</div> 
<script> 
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child); 
</script>

替换
<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div> 
<script> 
    var para = document.createElement("p"); 
    var node = document.createTextNode("这是一个新的段落。"); 
    para.appendChild(node); 
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child); 
</script>

五、事件

常用事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

六、常用工具类

date类

日期设置方法

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

定时器

设置定时器

setInterval(方法，毫秒)

取消定时器

clearTimeout(定时器名称

常用对象String

方法	描述
charAt()	返回指定位置处的字符。
charCodeAt()	返回指定位置处字符编码。
codePointAt()	返回字符串中索引（位置）处的 Unicode 值。
concat()	返回两个或多个连接的字符串。
constructor	返回字符串的构造函数。
endsWith()	返回字符串是否以指定值结尾。
fromCharCode()	将 Unicode 值作为字符返回。
includes()	返回字符串是否包含指定值。
indexOf()	返回值在字符串中第一次出现的位置。
lastIndexOf()	返回值在字符串中最后一次出现的位置。
length	返回字符串中的字符数。
localeCompare()	使用基于本地的顺序来比较字符串。
match()	在字符串中搜索值或正则表达式，并返回匹配项。
prototype	允许您向对象添加属性和方法。
repeat()	返回拥有多个字符串副本的新字符串。
replace()	在字符串中搜索值或正则表达式，并返回替换值的字符串。
search()	检索字符串中与正则表达式匹配的子串。
slice()	提取字符串的一部分并返回新字符串。
split()	将字符串拆分为子字符串数组。
startsWith()	检查字符串是否以指定字符开头。
substr()	从字符串中抽取子串，该方法是 substring() 的变种。
substring()	从字符串中抽取子串。
toLocaleLowerCase()	使用主机的语言环境返回转换为小写字母的字符串。
toLocaleUpperCase()	使用主机的语言环境返回转换为大写字母的字符串。
toLowerCase()	返回转换为小写字母的字符串。
toString()	将字符串或字符串对象作为字符串返回。
toUpperCase()	返回转换为大写字母的字符串。
trim()	返回删除了空格的字符串。
trimEnd()	返回从末尾删除空格的字符串。
trimStart()	返回从开头删除空格的字符串。
valueOf()	返回字符串或字符串对象的原始值。

七、正则表达式

修饰符	描述
g	执行全局匹配（查找所有匹配而不是在第一个匹配后停止）。
i	执行不区分大小写的匹配。
m	执行多行匹配。

表达式	描述
[abc]	查找括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[^0-9]	查找任何不在括号内的字符（任何非数字）。
(x\|y)	查找任何指定的选项。

元字符	描述
.	查找单个字符，除了换行符或行终止符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	在单词的开头/结尾查找匹配项，开头如下：\bHI，结尾如下：HI\b。
\B	查找匹配项，但不在单词的开头/结尾处。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

方法	描述
compile()	在 1.5 版中已弃用。编译正则表达式。
exec()	测试字符串中的匹配项。返回第一个匹配项。
test()	测试字符串中的匹配项。返回 true 或 false。
toString()	返回正则表达式的字符串值。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何以 n 结尾的字符串。
^n	匹配任何以 n 开头的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。