Web前端

最新推荐文章于 2025-04-18 00:00:00 发布

原创最新推荐文章于 2025-04-18 00:00:00 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

前端css

13 篇文章

订阅专栏

一 Java Script基础标签

（1）输出：

alert()-------- 弹框输出
confirm() -------- 带确定取消按钮的弹框
document.write() -------- 在文档流中输出
document.getElementById.innerHTML-------- 修改页面中的html元素
console.log() -------- 在调试平台中输出

（2）声明变量

var x=值，多个变量之间逗号间隔
+ 相加，连接
数据类型：数字（number），字符串(string)，布尔(boolean)，数组(array)，对象(object)，空NULL ，未字义类型(undefined)
对象：document.getElementById("id名")-------- 只有一个，不用加索引值；

document.getElementsByClassName(“类名”)[索引值]-------- 多个，必须加索引值，索引值从0开始；

对象.innerHTML=新值；
获取值方式：针对html元素-------- 对象.innerHTML;

对于表单元素-------- 对象.value

innerText 定义语法：

function 函数名(){
//函数体
}

函数调用：

触发事件＝函数名（）
事件：onclick--------点击事件 onmouseover --------鼠标悬停事件

更改样式：

修改属性值：对象.属性名＝属性值
修改CSS样式：对象.style.样式名＝样式值样式名（驼峰式写法 font-size:fontSize）

变量的作用域

局部变量-------- 在函数体内，函数结束，局部变量消失；
全局变量 --------在函数外部，页面关闭，全局变量消失。

算术运算符

+ － * / % ++ －－
a++和++a区别：a++先赋值，后自加；++a先自加，后赋值

赋值运算符

＝ +＝－＝ *＝ /= %=

比较运算符

== 相等
=== 绝对相等
！＝！＝＝ > < >= <= 结果都为布尔值

逻辑运算符

&& || ! --------与或非

与运算：当两边都为true时，结果为true；
或运算：当有一边为true时，结果为true；
非运算：你为true,结果为flase。

条件运算符

语法：
条件?条件成立时输出内容：条件不成立时输出内容

条件判断语句

if(条件){
条件成立时执行语句
}else{
条件不成立时执行语句
}

switch语句

语法：
switch(判断条件){
case 值：
执行语句；
break;
default:
其他情况下执行语句；}

break跳出循环
continue 跳出当前循环

for循环
语法：
for(初始条件;终止条件;变量变化的条件)
{
执行语句；
}
while // do while
区别：当条件不成立时，do while至少会执行一遍

getAttribute(属性名) 获取元素属性
setAttribute(属性名，属性值) 设置元素属性

获取子节点方式

childNodes-------- 包含空白节点
children -------- 不包含空白节点
子节点个数-------- .childNodes.length //.children.length

获取对应节点方式

childNodes[索引号]
children[索引号]

父节点：parentNode

第一个子元素 -------- firstChild
最后一个子元素-------- lastChild
前一个兄弟元素 -------- previousSibling
后一个兄弟元素-------- nextSilbling
添加元素 appendChild -------- 添加到内部后面
创建元素 -------- ps=document.creatElement("p");

赋属性值方式

ps.属性名＝属性值
ps.setAttribute(属性名，属性值)
在节点前插入元素 insertBefore(新节点，参考的节点)
父元素.insertBefore(新元素，参考元素)
删除元素-------- 父元素.removeChild(子元素)
替换元素-------- 父元素.replaceChild(替换的新元素，被替换的旧元素)

二示例展示

本节将展示一个简易计算器的代码设计，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        body{
            line-height: 30px;
        }
    </style>
</head>
<body>
数：<input type="text" class="num1"/><br/>
数：<input type="text" class="num2"/><br/>
<input type="button" value="+" class="add" onclick="results('+')"/>
<input type="button" value="-" class="sub" onclick="results('-')"/>
<input type="button" value="*" class="mul" onclick="results('*')"/>
<input type="button" value="/" class="chu" onclick="results('/')"/><br/>
结果：<input type="text" id="result"/>
<script>
    function results(op){
        var num1=parseFloat(document.getElementsByClassName("num1")[0].value);
        var num2=parseFloat(document.getElementsByClassName("num2")[0].value);
        if(op=="+"){
            document.getElementById("result").value=num1+num2;
        }
        if(op=="-"){
            document.getElementById("result").value=num1-num2;
        }
        if(op=="*"){
            document.getElementById("result").value=num1*num2;
        }
        if(op=="/"){
            document.getElementById("result").value=num1/num2;
        }
    }
</script>
</body>
</html>

执行结果为：

运算示例：