JavaScript基础（一）

最新推荐文章于 2022-08-25 17:56:43 发布

lijiuchangxin

最新推荐文章于 2022-08-25 17:56:43 发布

阅读量168

点赞数

分类专栏： web前端文章标签： js JavaScript web前端 h5

本文链接：https://blog.csdn.net/lijiuchangxin/article/details/80658145

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一：JavaScript简介与数据类型

JavaScript 是一种弱类型的脚本编程语言。

JavaScript数据类型：string 字符串、boonlean布尔、number数字，undefineda、null、object

判断数据的类型使用：typeof（数据）

二：JavaScript的组成结构

JavaScript由三部分组成：ECMAscript、DOM、BOM。

ECMAScript是一种标准，规定了JavaScript的语法、数据类型、保留关键字等

DOM：document object model，文档对象模型

BOM：Browser Object Model ，浏览器对象模型

三：DOM模型中常用操作：

document对象常用方法：

1. getElementByID(“元素id”) // 通过元素获取某个

2. getElementsByName("元素的name") // 通过元素的标签名获取一组元素

3. getElementsByTagName（“元素标签名” ） //通过元素的标签名获取一组元素，

获取到的元素也就是DOM对象，根据DOM对象关联的html元素，DOM对象也有相关的属性。当DOM对象关联的html元素之间可以添加其他内容时候，可以使用DOM对象的innerHTML属性设置之间的内容

dom对象的方法：

dom对象.setAttribute("属性名",“属性值”) //设置dom对象的属性

dom对象.getAttribute("属性名") // 通过属性名获取属性值

四：BOM模型

BOM模型中，window对象是顶级对象，代表浏览器。window对象有三个常用的三个附属对象：location（代表地址栏）、document（代表内容文档）、history（代表前进后退）

1. location

属性： location的href属性用来设置地址栏的网址

方法： location的reload()方法用来刷新网页

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>BOM中的location对象</title> 
        
             <script type="text/javascript"> 
        
                 function changeURL(){ 
        
                     // location对象的href属性决定了跳转路径 
        
                     window.location.href="http://www.baidu.com" 
        
         ​ 
        
                 } 
        
                 function refresh(){ 
        
                     // location的reload()方法重新载入本网页 
        
                     window.location.reload(); 
        
                 } 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="跳转" onclick="changeURL()"> <br> 
        
             <input type="button" value="刷新" onclick="refresh()"> <br> 
        
         </body> 
        
         </html>

2. history

方法：back（）后退至上一个页面

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>history</title> 
        
             <script type="text/javascript"> 
        
             function backTo(){ 
        
                 window.history.back() 
        
         ​ 
        
             } 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="后退" onclick="backTo()"> 
        
         </body> 
        
         </html>

go（n）前进n个页面，如果n为正，则前进，如果n为负，则后退

            
<!DOCTYPE html>
 
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>test</title> 
        
             <script type="text/javascript"> 
        
                 function goTo(){ 
        
                     window.history.go(1); 
        
                 } 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <a href="history.html">点击跳转至histor.html页面</a> 
        
             <input type="button" value="前进" onclick="goTo()"> 
        
         </body> 
        
         </html>

3.window对象代表浏览器，是BOM的顶级对象，系统函数就属于window对象。

常用的系统函数：

alert（"警告信息"） //弹出警告框

confirm（“确认信息”）// 弹出确认框，返回一个boolean值

            
#确认信息
 
             <title>confirm确认函数</title> 
        
             <script type="text/javascript"> 
        
                 function deleteContent(){ 
        
                     var isdelete = confirm("您真的要删除吗？！"); 
        
                     if (isdelete) { 
        
                         document.getElementById("msg").innerHTML=""; 
        
                     } 
        
                 } 
        
             </script> 
        
         </head> 
        
         <body> 
        
             <input type="button" value="点击删除" onclick="deleteContent()"> 
        
             <div id="msg">好好学习，天天向上！</div> 
        
         </body> 
        
         </html>

prompt("提示信息","提示框中的默认内容") //返回用户的输入的内容

parseInt（“要转换的字符串”） // 将指定字符串转换为整数

parseFloat（“要转换的字符串“） // 将制定的字符串转换为小数

            
#prompt,parseInt,parseFloat 
 
         <script type="text/javascript"> 
        
                 var s1 = prompt("请输入第一个数字：",""); 
        
                 var s2 = prompt("请输入第二个数字：",""); 
        
                 var num1 = parseInt(s1);   //这是转换成整数 
        
                 var num2 = parseFloat(s2); //这是转换成小数 
        
                 alert(num2+num1) 
        
             </script>     
        
         ​

setInterval("调用函数"，“间隔时间（以毫秒计算）”)：

五：自定义函数

注意：在JavaScript中函数也是对象

            
function 函数名(参数列表) {
 
             函数体代码[可以通过return返回值]     
        
         }

六、JavaScript操作CSS样式

通过dom对象操作CSS样式：

dom对象.style.CSS属性名=属性值；

常用CSS属性：

backgroundColor 背景色

visibility 可见性（隐藏后继续占用空间），有两个属性值：visible(显示)，hidden(隐藏)

display （隐藏后不占用空间），有两个属性值：block（显示）、none（隐藏，不占用空间）

            
#函数文件 》》》》 myjs.js
 
         function changeBackground(obj){ 
        
             obj.style.backgroundColor="yellow"; 
        
         } 
        
         ​ 
        
         function shouDiv(_id){ 
        
             var div = document.getElementById(_id); 
        
             div.style.visibility="visible"; 
        
         } 
        
         ​ 
        
         function hiddenDiv(_id){ 
        
             var div = document.getElementById(_id); 
        
             div.style.visibility="hidden"; 
        
         ​ 
        
         } 
        
         ​ 
        
         ​ 
        
         #网页部分 
        
         <!DOCTYPE html> 
        
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <title>demo</title> 
        
             <script type="text/javascript" src="myjs.js"></script> 
        
             <style type="text/css"> 
        
                 #mydiv{ 
        
                     width: 100px; 
        
                     height: 100px; 
        
                     background-color: #aabbcc; 
        
         ​ 
        
                 } 
        
             </style> 
        
         </head> 
        
         <body> 
        
             <div id="mydiv" onclick="changeBackground(this)"></div> 
        
             <input type="button" value="显示" onclick="shouDiv('mydiv')"> 
        
             <input type="button" value="隐藏" onclick="hiddenDiv('mydiv')"> 
        
         ​ 
        
         ​ 
        
         </body> 
        
         </html>

七：对象的实例化与初始化

方式一：“空手套白狼”：

通过Object“从无到有”地实例化一个对象。

例如： var per=new Object(); // 实例化

per.name="tom";

per.age="20";

delete per.age; // 删除对象的某个属性

            
    <script type="text/javascript">
 
                 var per=new Object(); 
        
                 per.name = "tom"; 
        
                 per.age=20; 
        
                 per.getName=function (){ 
        
                     return this.name 
        
                 }; 
        
                 per.getAge=function(){ 
        
                     return this.age; 
        
                 }; 
        
                 alert("姓名："+per.name); 
        
                 alert("年龄："+per.age); 
        
                 alert(per.getName()); 
        
                 alert(per.getAge()); 
        
                 delete per.age; //删除对象的age属性 
        
                 alert(per.age)

方式二：通过函数模板来创建对象

            
#例如：创建person模板  
 
         function Person(name,age){ 
        
                     this.name = name || "令狐冲" ; 
        
                     this.age = age || 20; 
        
                     this.setName = function(new_name){ 
        
                         this.name  = new_name; 
        
                     } 
        
                     this.setAge = function(new_age){ 
        
                         this.age = new_age; 
        
                     } 
        
         ​ 
        
                     this.getName=function(){ 
        
                         return this.name; 
        
                     } 
        
                     this.getAge=function(){ 
        
                         return this.age; 
        
                     } 
        
                 } 
        
                 var per = new Person(); 
        
                 per.setName("tom") 
        
                 per.setAge(25) 
        
                 alert(per.name) 
        
                 alert(per.age)

方式三：通过“字面量”方式

            
    <script type="text/javascript">
 
                 var stu={"name":"alice","age":20,"sex":"girl","score":83.5} 
        
                 for(var  key in stu){ 
        
                     alert(key+">>>>>>>>"+stu[key]) 
        
                 } 
        
             </script> 
        
         ​