本文介绍了JavaScript的基本操作，包括引入方式、变量类型、获取元素的方法。深入讲解了操作元素属性，如点操作和中括号操作，以及函数的定义、执行、匿名函数和封闭函数。还探讨了运算符和条件语句，如条件语句、算术运算符和赋值运算符。
原生js
javascript的组成
- ECMAscript javascript的语法（变量、函数、循环语句等语法）
- DOM 文档对象模型 操作html和css的方法
- BOM 浏览器对象模型 操作浏览器的一些方法
一、基本操作
1.js的引入的三种方式
-
行间事件
<!-- 第一种引入js方式 行间事件 --> <input type="button" name="" value="点击" onclick="alert('hello word')"> -
内嵌式
<script type="text/javascript"> alert("hello word 1") </script> -
外联式
<!-- 外联式js --> <script type="text/javascript" src="js/hello.js"></script>
2. 变量类型
-
number：数字类型
-
string：字符串类型
-
boolean：布尔值 true/false
-
undefined：变量声明后没有赋值
-
null ： 表示为空对象
-
object：符合类型
-
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js变量声明和类型</title> <script type="text/javascript"> // js中没有严格的缩进 /* // 整数的话变量名前加个i var iNum = 12; // 字符串变量名前加一个s var sTr = "abc" 两句合成一句 */ // 1. number数字类型 // 2. string 字符串类型 // 3. boolean类型 true / false var iNum = 12, sTr = "abc"; alert(iNum); alert(sTr); // 4. undefined 类型 变量声明后没有赋值 var iNum02; alert(iNum02); // 5. null 类型 表示空对象 定义的变量准备保存对象，可以将变量值初始化为null,获取不到返回null // 6. 复合类型 object </script> </head> <body> </body> </html>
3.获取元素的方法一
-
document.getElementById(元素id) 来获取
-
演示：
<script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> .... <div id="div1">这是一个div元素</div> -
用2中延时的会出现问题，应为页面从上往下加载执行时获取不到div元素
-
更正 方法一：
将script标签放到最后<div id="div1"> 这是一个div元素</div> <!-- 如果出现元素找不到的问题 解决方法一：可以将js的插入放到后面 --> <script type="text/javascript"> // 可以解决元素找不到的错误 // 获取div元素 document.getElementById("div1").style.color = "red" </script> -
使用方法二：
在获取元素前加上window.onload =function（{获取元素的东西
}）如下：<script type="text/javascript"> // 解决方法二: // 可以解决元素找不到的错误 // 文件加载完之后然后运行里面的语句 window.onload = function(){ /* // 获取div元素 document.getElementById("div1").style.color = "red"; // 中间由-的不能直接写 如 font-size 要写成 fontSize document.getElementById("div1").style.fontSize = "30px"; */ // 合成一句 用变量简化代码 var oDiv = document.getElementById("div1"); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; } </script>
4.获取元素的方法二:
-
-
通过标签名称获取元素
-
如：获取所有的li标签
document.getElementsByTagName("li");
-
如：获取所有的li标签
-
在使用这种方法获取元素的时候，获取到的是选择集，不能直接给选择集加样式
-
实例： 隔行换色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过标签获取元素</title> <script type="text/javascript"> window.onload = function(){ // 获取li 通过标签名称 --- 生成一个选择集 // 将页面中的所有的li都选中 var aLi = document.getElementsByTagName("li"); // 获取选择集内元素的个数 alert(aLi.length); //13 // 不能给选择集设置样式属性 // aLi.style.backgroundColor = "gold"; // 给单独一个设置背景色 // aLi[0].style.backgroundColor = "gold"; // 同时给所有的li加背景色 /* var aLen = aLi.length; for (var i=0;i<aLen; i++){ aLi[i].style.backgroundColor = "gold"; } */ // 如果指向选id="list1"中的li这样选 ` var oUl = document.getElementById("list1"); var aLi2 = oUl.getElementsByTagName("li"); alert(aLi2.length); // 8 var aLen2 = aLi2.length; // 实现隔行换色 CSS3也可以做 用nth-child(2n) for (var i=0; i<aLen2; i++){ if (i%2 == 0){ aLi2[i].style.backgroundColor="gold"; } } } </script> </head> <body> <ul id="list1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
效果：
二、操作元素属性
1. 点操作 “.”
-
、html的属性和js里面属性写法一样
-
“class” 属性写成 “className”
-
“style” 属性里面的属性，有横杠的改成 驼峰式，比如：“font-size”，改成”style.fontSize”
-
使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素属性操作</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1") var oA = document.getElementById("link") var oDiv2 = document.getElementById("div2") // 读取属性 var sId = oDiv.id; alert(sId); // 写属性 oDiv.style.color = "red"; oA.href = "https://www.baidu.com"; oA.title = "这是去到百度网的连接"; // 当js写属性 class 的时候要用className 原因是class是js终的一个保留字 oDiv2.className = "box2"; } </script> <style type="text/css"> .box{ font-size: 20px; color:gold; } .box2{ font-size:30px; color:pink; } </style> </head> <body> <div id="div1">这是一个div标签</div> <a href="#" id="link">这是一个链接</a> <div class="box" id="div2">这是第二个div</div> </body> </html>
2. 中括号操作“[]”
- 使用方法：
oDiv.style[“color”] = “red”;<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素属性操作</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1") // 如果要用变量操作属性的话 var sMystyle = "color"; var sValue = "red"; // oDiv.style.sMystyle = sValue; -- 这种方式没有作用 且不会报错 // oDiv.style.color =sValue; -- 这个可以操作颜色值 // 如果属性和值都是变量的话要用 [] 来操作 oDiv.style[sMystyle] = sValue; } </script> </head> <body> <div id="div1">这是一个div</div> </body> </html>
3.操作元素包裹的内容
-
获取： x.innerHTML
-
修改： x.innerHTML = “xxxx”
-
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作元素包裹的内容</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); // 读取元素中的内容 var sTr = oDiv.innerHTML; alert(sTr); // 改写元素内的内容 oDiv.innerHTML = "修改的文字"; // 也可以往里面增加标签内容 往页面上放数据 oDiv.innerHTML = "<a href='https://www.baidu.com'>百度</a>" } </script> </head> <body> <!-- #div1 --> <div id="div1">这是一个div元素</div> </body> </html>
4. 获取当前元素
- 用.this来获取当前元素
三、函数
1. 函数的定义与执行
- 函数的定义: function a(){}
<script type="text/javascript">
// 函数的定义
function fnMyalert(){
alert("hello word");
}
</script>
-
-
函数的执行 ：
-
在js中调用：a()
在标签内调用：onclick = a()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数定义个执行</title> <script type="text/javascript"> // 函数的定义 function fnMyalert(){ alert("hello word"); } function fnChange(){ var oDiv = document.getElementById("div1"); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; } // 函数的执行 // fnMyalert() </script> </head> <body> <!-- 标签内调用 当点击div的时候执行fnMyalert() --> <div id="div1" onclick="fnMyalert()">这是一个div元素</div> <input type="button" name="" value="改变div" onclick="fnChange()" /> </body> </html> -
在js中调用：a()
2. 提取行间事件 让html与js实现解耦
- 提取行间事件 在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
-
-
实现
- 在js中用onclick绑定函数名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提取行间事件</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("btn01"); // 提取行间事件后 函数名后不能加小括号 加小括号是直接执行 oBtn.onclick = fnChange; // 函数的定义 function fnChange(){ var oDiv = document.getElementById("div1"); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; } // 函数的执行 // fnMyalert() } </script> </head> <body> <!-- 提取行间事件 将标签中的函数放到Js中 --> <div id="div1">这是一个div元素</div> <input type="button" name="" value="改变div" id="btn01" /> </body> </html>
3.匿名函数
-
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
-
使用如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>匿名函数</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("btn01"); // 匿名函数：将函数的定义直接赋值到一个事件上 --- 注 function后要加括号 oBtn.onclick = function(){ var oDiv = document.getElementById("div1"); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; }; } </script> </head> <body> <!-- 提取行间事件 将标签中的函数放到Js中 --> <div id="div1">这是一个div元素</div> <input type="button" name="" value="改变div" id="btn01" /> </body> </html>
4. 变量和函数与解析
-
变量：
预解析会将变量的定义提前，但是不会将赋值提前 -
函数：
预解析会将函数的声明和定义整体提前 ，程序不会死掉 -
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量和函数的预解析</title> <script type="text/javascript"> // 预解析会将变量的定义提前，但是不会将赋值提前 alert(iNum); // 会弹出一个undefined var iNum = 12; // alert 一个为定义的变量的话程序会崩掉 // alert(a); // 程序直接死掉 报错 not defined // 预解析会将函数的声明和定义整体提前 ，程序不会死掉 fnMyalert(); function fnMyalert(){ alert("hello word!"); } </script> </head> <body> </body> </html>
5.函数传参
-
在函数定义的时候可以设置参数，方便传递参数的时候使用
<script type="text/javascript"> window.onload = function(){ // 定义的时候留参数位置 function fnChange(Cstyle, val){ var oDiv = document.getElementById("box"); oDiv.style[Cstyle] = val; } // 函数调用传递参数 fnChange("color","red"); } </script> -
如果一个函数有返回值可以用return
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function fnAdd(a,b){ var c = a+b; alert("内部c= "+ c); // return 的作用是将函数执行的结果返回，并且而结束函数 还可以阻止默认行为 -- 阻止表单的提交 return c; alert("return 后的 c=" + c); } var iNum = fnAdd(2,7); alert(iNum); </script> </head> <body> </body> </html>
6.封闭函数
-
封闭函数的作用
创建一个封闭的空间，字啊这个空间中创建的变量不受外界影响，也不影响外界 -
封闭函数的写法
- 给函数整体加括号
- 在函数定义前加感叹号
- 在函数定义前加波浪线
-
三种写法如下：
<script type="text/javascript"> // 封闭函数写法一 整体加括号 (function(){ alert("hello word"); })(); // 封闭函数写法二 加感叹号 !function(){ alert("hello word 2"); }(); // 封闭函数写法三 加波浪线 ~function(){ alert("hello word 3"); }(); </script> -
注：为了防止程序出现错误 就在封闭函数前加一个";" 可以避免压缩的时候出错
四、运算符和条件语句
1.条件语句
-
if else 和switch
-
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随着星期变换背景</title> <script type="text/javascript"> window.onload = function(){ var iWeek = 4; var oBody = document.getElementById("body01"); /* if (iWeek == 1){ oBody.style.backgroundColor="gold"; } else if (iWeek == 2){ oBody.style.backgroundColor="blue"; } else if (iWeek == 3){ oBody.style.backgroundColor="green"; } else if (iWeek == 4){ oBody.style.backgroundColor="lightgreen"; } else if (iWeek == 5){ oBody.style.backgroundColor="pink"; } else{ oBody.style.backgroundColor="yellogreen"; } 简写： */ switch(iWeek){ case 1: oBody.style.backgroundColor="gold"; break; // 没有break则会自动向下匹配 case 2: oBody.style.backgroundColor="blue"; break; case 3: oBody.style.backgroundColor="green"; break; case 4: oBody.style.backgroundColor="lightgreen"; break; case 5: oBody.style.backgroundColor="pink"; break; // 如果上面都不满足执行下面那句 default: oBody.style.backgroundColor="yellogreen"; } } </script> </head> <body id="body01"> </body> </html>
2. 算术运算符
- +(加)、 -(减)、 (乘)、 /(除)、 %(求余）
- 实例：
加法：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script type="text/javascript"> window.onload = function(){ var oInput01 = document.getElementById("input01"); var oInput02 = document.getElementById("input02"); var oBtn = document.getElementById("btn"); oBtn.onclick = function(){ var sVal01 = oInput01.value; var sVal02 = oInput02.value; // 字符串转成数字 parseInt--去掉小数部分 / Number // iVal01 = Number(sVal01) // iVal02 = Number(sVal02) iVal01 = parseInt(sVal01); iVal02 = parseInt(sVal02); alert(iVal01+iVal02); } } </script> </head> <body> <input type="text" name="" id="input01"> + <input type="text" name="" id="input02"> <input type="button" name="" value="相加" id="btn"> </body> </html>
求余数：
<script type="text/javascript">
var iNum01 = 10;
var iNum02 = 3;
alert(iNum01%iNum02);
var iNum03 = 0;
var iNum04 = 10;
alert(iNum03%iNum04); //弹出一个0
</script>
3.赋值运算符
-
=、 +=、 -=、 =、 /=、 %=
-
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>赋值运算</title> <script type="text/javascript"> var iNum01 = 12; // iNum01 = iNum01 + 2; 可以简写成下面的方法 iNum01 += 2 // iNum01 = iNum01 -2; iNum01 -= 2; // iNum01 = iNum01*2; iNum01 *= 2; // iNum01 = iNum01 / 2; iNum01 /= 2; // iNum01 = iNum01 % 2; iNum01 %= 2; alert(iNum01); iNum01++; // 等同于 iNum01+=1 alert(iNum01) </script> </head> <body> </body> </html>
4. 条件运算符
== 、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件运算符</title>
<script type="text/javascript">
var iNum01 = 2;
var sNum01 = "2";
// == 判断的话会是相等 --> 会将两个变量的类型转成同一类型
// 解决这个问题要用 === : 先比较两个变量的类型
if (iNum01==sNum01){
alert("相等");
}
else{
alert("不相等");
}
// !=
if (3!=4){
alert(true);
}
// ! -- 否 取反 运算是true 取反后为false
if (!3>4){
alert("不大于");
}
else{
alert("大于");
}
// && 而且 两个都要成立 有一个不成立则为false
if (4>3 && 5>2){
alert("都是大于");
}
else{
alert("不是都大于");
}
// || 或者 有一个是true则最终就是true
if (4>3 || 4>5){
alert("至少有一方成立");
}
else{
alert("两方都不成立")
}
</script>
</head>
<body>
</body>
</html>
五、总结
-
-
return的作用：
-
- 返回函数的执行结果
- 结束函数的运行
- 阻止默认行为
- 阻止事件冒泡
-
-
-
== 和 ===的区别
-
== :判断的话会是相等 --> 会将两个变量的类型转成同一类型
===：会先比较两个变量的类型
-
== :判断的话会是相等 --> 会将两个变量的类型转成同一类型
-
-
在原生js中如果获取元素要注意一下几点
-
- 使用要将获取元素的过程写在最后或者要写在window.onload中 ，要补回出现找不到的情况
- 使用标签获取元素的方法获取的时候，获取的是一个选择集，不能直接加样式
-
- 封闭函数
为了防止压缩后js代码出问题一般在函数结束后就一个分号";"
扫一扫
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
