js学习与总结（包含了js中小型项目的截图和代码）(包含了Json、Ajax、Jquery等知识）

于 2021-05-31 17:46:49 发布
阅读量392 收藏 1
点赞数 1
分类专栏： 前端知识 文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46741750/article/details/117387986
版权

javaScript简介

1. 什么是JavaScript

JavaScript简称为JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行
Web前端三层：
结构层 HTML 定义页面的结构
样式层 CSS 定义页面的样式
行为层 JavaScript 用来实现交互，提升用户体验

2. JavaScript作用

在客户端动态的操作页面
在客户端做数据的校验
在客户端发送异步请求

引用方式

内联方式

   <script type="text/javascript">         
    alert("欢迎使用javascript程序的代码")        
</script>

这个打开标签之后就自动显示出来对应的标签，也就是会自动弹出对应的声明

行内样式

这个稍微要难以理解一些，因为上面的内联一般是存放在头部当中的，但其实内联是放在哪里都可以的，然而行内样式是结合事件来写的，比如对应着<button οnclick=“document.getElementById('id名”）.src=“对应着的点击之后对应的变化图像的位置”>开灯
于是顺藤摸瓜我们可以往后面继续写button οnclick="document.getElementById("id名“）.src("关灯后对应的灯泡照片的位置)
看懂了这个理解之后我们直接看一下写的代码

<!DOCTYPE html>                                                                             
<html lang="en">                                                                            
<head>                                                                                      
    <meta charset="UTF-8">                                                                  
    <title>Title</title>                                                                    
                                                                                            
                                                                                            
                                                                                            
                                                                                            
</head>                                                                                     
<body>                                                                                      
                                                                                            
     <button onclick="document.getElementById('myImage').src='eg_bulbon.gif'">开灯</button>   
                                                                                            
<img id="myImage" border="0" src="eg_bulboff.gif" style="text-align:center;">               
<button onclick="document.getElementById('myImage').src='eg_bulboff.gif'">关灯</button>       
</body>                                                                                     
</html>

然后对应着的显示出来的变化效果是
：按按钮之前：
在这里插入图片描述
按下开灯之后的变化效果：
在这里插入图片描述
举例2
上面的代码如果你觉得比较复杂的话，我还总结了一下比较简单的代码，那就是通过点击之后形成的事件是一个提示框显示出来，我们可以来看看具体代码的写法

<button value="点我" onclick=alert("我都快被点晕了") style="color: red; text-decoration-line: overline" >点我呀</button>

这个代码的显示效果是这样的：
当你点击了那个button按钮之后就会弹出对应的提示框出来
在这里插入图片描述

外部方式

这个就是自己创建一个纯javascript的文件，然后在这当中进行
直接显示代码就是这样的：

 <script type="text/javascript" src="javascript/Test01.js">

   </script>

于是就可以在对应的js文件当中进行书写
接下来我们来看的是关于行类样式的例子

<body>
<p id="name">javascript能够改变html的显示文本</p>
<button type="button"  onclick='document.getElementById("name").innerHTML="这就是生活"'>点我</button>
</body>
</html>

上图代码的目的就是通过点击这个按钮之后将html文本当中的文字给改变了，其实实现起来还是相当简单的，就是看你想怎么去实现它了。
首先你需要将这个html当中的文本写上id的名字，然后根据这个id名字利用document.getElementById(“name”）将对应的地址找到，然后写入相应的另外名字就是对这个的表示
结果如下图所示
在这里插入图片描述

变量

1. 变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
语法： var 变量名=变量值;
在ECMAScript 6规范中新增let关键字，也用于声明变量
使用let声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域
注：在IDEA中配置ES版本 Settings——>Languages & FrameWorks——>JavaScript——>JavaScript
Language version
简单的注意
这里你需要注意的就是在设置var的时候，其对应的大括号外也能进行申明，然而在设置let的时候其对应的大括号外的alert不能进行申明

{
   
        let a = 3;
    }
    alert(a);

上图代码加上括号之后和不加括号对应的结果是完全不同的。

输入输出

这当中主要有三个对应的输出：

alert("")
console.log("")
document.write("")

就是这三种，需要注意的是这三种对应的表现形式也是不相同的，当中，有alert(""),它是直接弹出来的窗口，有console.log(""),这个是在控制台当中显示出来的，还有一个就是document.write(""),它是在正文当中直接显示出来的。

 <script>
        alert("嘿嘿");
        console.log("这是什么人生");
        document.write('人生还是充满希望的');
    </script>

你需要做的就是简单了解这几个形式就行了
在这里插入图片描述
大家看到上图的显示肯定会感到惊奇，为什么会有我的名字呢，那是因为当我弹出了一个窗口之后，需要我输入对应的名字的时候，这个时候就是根据相应的控制台存储来进行的写出

 <script>
        alert("嘿嘿");
        console.log(name);
        document.write('人生还是充满希望的');
        var name=prompt("请输入你的姓名");
    </script>

这个就是对应的代码图，不了解的可以上网查看一下其他地方对应的东西。

数据类型

不管是整数还是小数，其对应的数字类型都是Number，还有相关的parseint()还有parseFloat
字符串是可以改变的，下面我们就可以来看到相关对应的变化

 var a=12;
        a=a+'';
        console.log(typeof a);

在这里插入图片描述
这就是代表的是结束的东西在里面
当我们要设置一个东西看它是否是真的时候，我们仅仅需要做的就是看它对应的东西

var m=Boolean(4);
        console.log(m,typeof m);

在这里插入图片描述
这就是设置出来对应的东西。
例子

<body>
<p id="m2"></p>
<script>


    var x=520+"一生一世";
    document.getElementById("m2").innerHTML=x;


</script>
</body>

首先进行的是一个对于id的写入，然后就是当你设置相应的东西的时候将这个对应的东西进行一个写出，当中包含了id的名字，还有就是相应的一个写入的东西在这里面，其中无非就是相连接嘛。

var arr=new Array("2","4");
document.write(arr);

这个就是对于数组的一个书写，当中的书写包含的内容也是比较不错的。

var person={
   
    firstname:"Bill",
    lastname:"gates"
};
document.getElementById("bill").innerHTML=person.firstname+" "+person.lastname;
</script>

在这里你需要明白的就是我们可以设置这个id来在整个html当中进行相应的设置，设置完成之后我们就可以达到一种可以的状态
定义数组的方法
也就是arr[‘张三’,’李四’]这样的定义即可

二维数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>


        var x=520+"一生一世";
        document.getElementById("m2").innerHTML=x;


    </script>
</head>
<body>
<p id="m2"></p>
<p id="bill"></p>
<script>
var arr1=[
    [11,12,13],
    [14,15,16],
    [17,18,19]

];
for(var i=0;i<arr1.length;i++){
   
    for(var j=0;j<arr1[i].length;j++)
    {
   
        document.write(arr1[i][j]+"&nbsp");
    }
    document.write('<br>');
}



</script>
<button onClick="this.innerHTML=Date()">现在的时间是？</button>
</body>
</html>

在这个当中，我一共写了两个小的程序，就是对应的是数组和时间的计时器，这里面稍加理解就可以解决出来。

函数

自定义函数

function mm(num1,num2){
   
    var sum=num1+num2;
    console.log(sum);
}
var result=mm(1,5);
console.log(result);

</script>

对于函数的设置当中我们仅仅需要明白的就是这个东西在里面进行

回调函数

<script>
function m(){
   
    document.write(2);
}
window.onclick=m();

</script>

在这个当中需要做的就是将整个对应的东西放进去就是了

匿名函数

var a=function (){
   
    console.log(222);
};
document.write(a);

就是说没有名字的函数，就叫做匿名函数

箭头函数

var c=(x,y)=>{
   
    var sum=x+y;
    return sum;
}
console.log(c(2,3));

这个显示的就是在对应的当中进行的一个分析，这个是箭头函数，然后就是将这个函数当中设置为没有名字的

String类型

<script>
var str="Hello world";
console.log(str.length);
console.log(str.charAt(0));
console.log(str.replace('Hello','hello'));
</script>

在这个当中可以对一个字符串进行相应的设置，这当中就包含了对于字符串长度的计算还有对于字符串字符的一个替换，这就达成了一个很好达成的目标。

Date日期

当你要设置对应的日期的年的时候，你可以首先var date=new Date(),然后根据这个var来进行不同的日期进行计算，下面是代码块：

var date=new Date();
var year=date.getFullYear();
document.write(year);

JSON

JavaScript Object Nation是一种轻量级的数据交换格式，采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成。

注意：
JSON是由一系列的键值对组成的，并且它的属性名必须使用双引号括起来才可以。

<p id="demo"></p>
<script>
    var myObj, x;
    myObj = {
    name: "Bill Gates", age: 62, city: "Seattle" };
    x = myObj.name;
    document.getElementById("demo").innerHTML = x;
</script>

在对应的网页当中就会显示相应的结果，即Bill Gates。

<script>

    document.getElementById("demo").innerHTML = x;
    var str='{"name":"zhangsan","age":"22"}';
    var obj=JSON.parse(str);
    console.log(typeof  obj);
</script>

看到这段代码的过程当中，你会发现，在控制台当中就会出现对应的结果，如下图所示
在这里插入图片描述
因此对于JSON当中的parse就是这样的作用。

下面来介绍和对比一下JSON和JavaScript的关系和比较状态

JSON 和 XML 均可用于从 web 服务器接收数据。

下面的 JSON 和 XML 实例都定义了雇员对象，包含了由 3 个雇员构成的数组：

JSON 实例

{
   "employees":[
    {
    "firstName":"Bill", "lastName":"Gates" },
    {
    "firstName":"Steve", "lastName":"Jobs" },
    {
    "firstName":"Elon", "lastName":"Musk" }
]}

当中必须表示的是双引号
XML 实例

<employees>
    <employee>
         <firstName>Bill</firstName>
         <lastName>Gates</lastName>
     </employee>
     <employee>
         <firstName>Steve</firstName>
         <lastName>Jobs</lastName>
     </employee>
     <employee>
         <firstName>Elon</firstName>
         <lastName>Musk</lastName>
     </employee>
</employees>

JSON 类似 XML，
因为:
JSON 和 XML 都是“自描述的”（人类可读的）
JSON 和 XML 都是分级的（值中有值）
JSON 和 XML 都能被大量编程语言解析和使用
JSON 和 XML 都能被 XMLHttpRequest 读取
JSON 与 XML 的差异在于：
JSON 不使用标签
JSON 更短
JSON 的读写速度更快
JSON 可使用数组
最大的不同在于：

XML 必须使用 XML 解析器进行解析。而 JSON 可通过标准的 JavaScript 函数进行解析。

为什么 JSON 比 XML 更好？
XML 比 JSON 更难解析。
JSON 被解析为可供使用的 JavaScript 对象。
对于 AJAX 应用程序，JSON 比 XML 更快更易用：

使用 XML

读取 XML 文档
使用 XML DOM 遍历文档
提取变量中存储的值
使用 JSON

读取 JSON 字符串
JSON.Parse JSON 字符串

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>

<h1>使用XMLHttpRequest获取文件的内容</h1>

<p>JSON格式的内容能够轻松转化为javascript对象</p>

<p id="demo"></p>

<script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     
        if (this.readyState == 4 && this.status == 200) {
     
            var myObj = JSON.parse(this.responseText);
            document.getElementById("demo").innerHTML = myObj.name;
        }
    };
    xmlhttp.open("GET", "json_demo.txt", true);
    xmlhttp.send();
</script>

<p>查看:<a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
这就是代码和对应的结果，参考于W3School当中对应的知识点分析。

对象类型

<script>
    var stu=new Object();
    stu.name='明怀';
    stu.age=20;
    stu.study=function (){
     
        console.log('我叫'+stu.name+"正在学习");
    };
    console.log(stu.name);
    stu.study();
</script>

这个指的就是在指定的方法当中进行相应的运行即可
在这里插入图片描述
这个就是对应的结果

DOM操作

1. DOM简介

Document Object Model 文档对象模型
浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树

  • HTML文档和DOM树是一一对应的关系
  • 当DOM树被改变时，与之对应的HTML文档也会随之改变
  • 当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
  • DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件
    树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function query(){
     
            /*
             * 1.根据id获取，返回单个对象
             */
            /*var objDiv=document.getElementById('mydiv');
            console.log(typeof  objDiv); // DOM对象
            console.log(objDiv);*/

            /*
             *　2.根据name获取，返回集合
             */
            /*var objs = document.getElementsByName('hobby');
            // console.log(objs);*/

            /*
             * 3.根据标签名获取，返回集合
             */
           /*var objs =  document.getElementsByTagName('input');
           for(var index in objs){
                console.log(objs[index]);
           }*/

            /*
             * 4.根据css选择器来获取单个对象
             */
            // var obj = document.querySelector('p.aaa');
            // console.log(obj);

            /*
             * 5.根据css选择器来获取多个对象
             */
            // var objs = document.querySelectorAll('.aaa');
            // console.log(objs);

            /*
             * 根据已有节点来获取其他节点
             */
            var obj=document.getElementById('second');
            console.log(obj.parentNode);
            console.log(obj.previousSibling);
            console.log(obj.nextSibling);
            console.log(obj.parentNode.firstChild);
            console.log(obj.parentNode.lastChild);
        }
    </script>
</head>
<body>
    <input type="button" value="获取页面中的元素" onclick="query()">

    <div id="mydiv" class="aaa">hello</div>
    <div id="div2" class="aaa">world</div>
    <p class="aaa">welcome</p>
    爱好：<input type="checkbox" value="eat" name="hobby"> 吃饭
          <input type="checkbox" value="sleep" name="hobby"> 睡觉
          <input type="checkbox" value="doudou" name="hobby"> 打豆豆
          <br>
    姓名：<input type="text" name="username"> <br>

    <ul>aaa
        <li>tom</li>bbb
        <li id="second">jack</li>
        <li>mike</li>
        <li>alice</li>ccc
    </ul>
</body>
</html>

DOM访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wo</title>
</head>
<body>
<script>
    function  pro(){
     
        let obj=document.getElementById('iii');
        console.log(obj.target);
        console.log(href);
    }



</script>
<input type="button" onclick="pro()" value="点我">
<br>
<br>
<a href="https://www.baidu.com" target="_blank" id="iii">百度</a>

</body>
</html>

两种方式： 使用innerHTML 用法： DOM对象.innerHTML 将内容解析为HTML 使用innerText 用法：
DOM对象.innerText 将内容作为纯文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hello{
     
            width: 300px;
            height: 300px;
            background: green;
            font-size: 40px;
        }
        .world{
     
            text-de
最低0.47元/天 解锁文章
小鱼爱吃菜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值