前端基础3-2——JavaScript

最新推荐文章于 2022-10-13 09:14:19 发布

Bug一号质检员

最新推荐文章于 2022-10-13 09:14:19 发布

阅读量626

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_44238066/article/details/122829260

版权

这篇博客深入讲解了JavaScript中的Date对象和JSON格式，强调了AJAX异步请求和面向对象编程的概念。重点介绍了BOM对象如window、navigator、screen和location的操作，以及DOM对象的增删改查。通过实例展示了表单的交互和jQuery的使用，包括选择器、事件和DOM操作，提供了巩固前端基础的学习建议。

摘要由CSDN通过智能技术生成

内部对象

标准对象
在这里插入图片描述

Date

基本使用
在这里插入图片描述

转换
在这里插入图片描述

JSON

JSON是什么
在这里插入图片描述

在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示
格式

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和js对象转化
在这里插入图片描述

很多人搞不清楚，JSON和JS对象的区别在这里插入图片描述

AJAX

（后面web详细说）

原生的js写法 xhr异步请求

jQuery封装好的方法$(#name).

ajax("")axios请求

面向对象编程

原型对象 javascript、java、c#------面向对象；但是javascript有些区别！

类：模板
对象：具体实例

在javascript中，需要大家转换一下思维方式！原型：
在这里插入图片描述

class集继承

class关键字，是在ES6引入的
1、定义一个类、属性、方法
在这里插入图片描述

2、继承

 <script>
     //ES6之后========================
     //定义一个学生的类
     class Student{
         constructor(name){
             this.name = name;
         }
         hello(){
             alert('hello');
         }
 }
 
     class XiaoStudent extends Student{
         constructor(name,grade){
             super(name);
             this.grade = grade;
         }
         myGrade(){
             alert('我是一名小学生');
         }
     }
 
     var xiaoming = new Student("xiaoming");
     var xiaohong = new XiaoStudent("xiaohong",1);
 </script>

本质：查看对象原型
在这里插入图片描述

原型链
proto:
在这里插入图片描述

操作BOM对象（重点）

BOM：浏览器对象模型

window

window代表浏览器窗口

在这里插入图片描述

Navigator（不建议使用）

Navigator封装了浏览器的信息

在这里插入图片描述

大多数时候，我们不会使用navigator对象，因为会被认为修改!
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

在这里插入图片描述

location(重要)
location代表当前页面的URL信息
在这里插入图片描述

document（内容DOM）

document代表当前的页面，HTML DOM文档树
在这里插入图片描述

获取具体的文档树节点
在这里插入图片描述
获取cookie

劫持cookie原理
在这里插入图片描述

服务器端可以设置cookie为httpOnly

history（不建议使用）

history代表浏览器的历史记录

在这里插入图片描述

操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构！

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得DOM节点
在这里插入图片描述

这是原生代码，之后我们尽量都使用jQuery()

更新节点

在这里插入图片描述

操作文本
在这里插入图片描述

操作css
在这里插入图片描述

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己
在这里插入图片描述

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加
在这里插入图片描述

创建一个新的标签

 <script>
     var js = document.getElementById('js');//已经存在的节点
     var list = document.getElementById('list');
     //通过JS创建一个新的节点
     var newP = document.creatElement('p');//创建一个p标签
     newP.id = 'newP';
     newP.innerText = 'Hello,Kuangshen';
     //创建一个标签节点
     var myScript = document.creatElement('script');
     myScript.setAttribute('type','text/javascript');
     
     //可以创建一个style标签
     var myStyle = document.creatElement('style');//创建了一个空style标签
     myStyle.setAttribute('type','text/css');
     myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
     
     document.getElementByTagName('head')[0].appendChild(myStyle);
 </script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

操作表单form

表单是什么？form-----DOM树

文本框----text
下拉框----select
单选框----radio
多选框----checkbox
隐藏域----hidden
密码框----password
…

表单的目的：提交信息

获得要提交的信息

<body>
    <form action = "#">
        <p>
            <span>用户名：</span><input type="text" id = "username" />
        </p>
        <!--多选框的值就是定义好的value-->
        <p>
            <span>性别：</span>
            <input type = "radio" name = "sex" value = "man" id = "boy"/>男
           	<input type = "radio" name = "sex" value = "woman" id = "girl"/>女
        </p>
    </form>
    <script>
    	var input_text = document.getElementById("username");
        var boy_radio = document.getElementById("boy");
        var girl_radio = document.getElementById("girl");
        //得到输入框的值
        input_text.value 
        //修改输入框的值
        input_text.value  = "value";
        
        //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
        boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
        girl_radio.checked = true;//赋值
        
    </script>
</body>

提交表单。md5加密密码，表单优化

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <!--MD5加密工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表达绑定提交事件
    οnsubmit= 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接收
-->
<form action="https://www.baidu.com" method = "post" onsubmit = "return aaa()">
    <p>
        <span>用户名：</span><input type="text" id = "username" name = "username"/>
    </p>
    <p>
        <span>密码：</span><input type="password" id = "input-password" />
    </p>
    <input type = "hidden" id = "md5-password" name = "password">

    <!--绑定事件 onclick 被点击-->
    <button type = "submit">提交</button>

</form>

<script>
    function aaa(){
        alert(1);
        var username = document.getElementById("username");
        var pwd = document.getElementById("input-password");
        var md5pwd = document.getElementById("md5-password");
        //pwd.value = md5(pwd,value); //这行代码告诉了我们为什么有些网站一提交，密码就有一瞬间变长
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;

    }
</script>

</body>
</html>

jQuery

jQuery库，里面存在大量的JavaScript函数
jQuery文档工具站：https://jquery.cuishifeng.cn/

公式：$(selector).action()

<!DOCTYPE html>
 <html lang = "en">
     <head>
         <meta charset = "UTF-8">
         <title>Title</title>
         
         <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
     </head>
     <body>
         <a href="" id = "test-jquery">点我</a>
         <script>
             //选择器就是css选择器
             $('#test-jquery').click(function(){
                 alert('hello,jQuery!');
             });
         </script>
     </body>
 </html>

选择器

//原生js，选择器少，麻烦不好记
 //标签
 document.getElementByTagName();
 //id
 document.getElementById();
 //class
 document.getElementByClassName();
 
 //jQuery css中的选择器它全部都能用！
 $('p').click();//标签选择器
 $('#id1').click();//id选择器
 $('.class1').click;//class选择器

事件
鼠标事件、键盘事件，其他事件

 mousedown()(jQuery)----按下
 mouseenter()(jQuery)
 mouseleave()(jQuery)
 mousemove()(jQuery)----移动
 mouseout()(jQuery)
 mouseover()(jQuery)
 mouseup()(jQuery)

 <!DOCTYPE html>
 <html lang = "en">
     <head>
         <meta charset = "UTF-8">
         <title>Title</title>
         <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
         <style>
             #divMove{
                 width:500px;
                 height:500px;
                 border:1px solid red;
             }
         </style>
     </head>
     <body>
         <!--要求：获取鼠标当前的一个坐标-->
         mouse：<span id = "mouseMove"></span>
         <div id = "divMove">
             在这里移动鼠标试试
         </div>
         <script>
             //当网页元素加载完毕之后，响应事件
             //$(document).ready(function(){})
             $(function(){
                 $('#divMove').mousemove(function(e){
                     $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
                 })
             });
         </script>
     </body>
 </html>

操作DOM

节点文本操作

 $('#test-ul li[name=python]').text();//获得值
 $('#test-ul li[name=python]').text('设置值');//设置值
 $('#test-ul').html();//获得值
 $('#test-ul').html('<strong>123</strong>');//设置值

CSS的操作

$(’#test-ul li[name=python]’).css({“color”,“red”});

元素的显示和隐藏，：本质display:none

 $('#test-ul li[name=python]').show();
 $('#test-ul li[name=python]').hide();

娱乐测试

 $(window).width()
 $(window).height()
 $('#test-ul li[name=python]').toggle();

之后学的ajax()；

 $('#form').ajax()
 
 $.ajax({url:"test.html",context:document.body,success:function(){
     $(this).addClass("done");
 }})

如何巩固前端基础

1、如何巩固JS（看jQuery源码，看游戏源码！

2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）

Bug一号质检员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端基础3-2——JavaScript

目录

内部对象

Date

JSON

AJAX

面向对象编程

操作BOM对象（重点）

操作DOM对象（重点）

操作表单form

jQuery

如何巩固前端基础