前端语法知识汇总

一览众山小-br

已于 2023-11-14 10:38:52 修改

阅读量211

点赞数 1

文章标签： javascript

于 2023-11-13 12:08:05 首次发布

本文链接：https://blog.csdn.net/qq_42760375/article/details/134374432

版权

一、HTML

菜鸟教程：HTML5 教程 | 菜鸟教程

1、网页基本信息 - <html>

标题 - <h1>

段落 - <p>

换行 - <br>

水平线 - <hr>

注释 - #

特殊符号 -  

2、图像标签 - <img>

<map> 带有可点击区域的一幅图像

3、超链接 - <a>

属性：herf、id、target

<base> 作为HTML文档中所有的链接标签的默认链接

4、行内元素和块元素 - <>

<div> 块级元素，它可用于组合其他 HTML 元素的容器

<span> 内联元素，可用作文本的容器

5、列表 - <>

有序列表 - <ul>

无序列表 - <ol>

自定义列表 - <dl>

6、表格 - <table>

行 - <tr>

列 - <td>

跨行 - <rowspan="2">

跨列 - <colspan="2">

7、媒体元素 - <media>

音频 - <video>

视频 - <audio>

8、网页的简单布局 - <>

头部 - <header>

脚部 - <footer>

一块独立区域 - <section>

导航类辅助内容 - <nav>

独立的文章内容 - <article>

侧边栏 - <aside>

9、内联框架 - <iframe>

属性：src、frameborder

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

10、表单 - <form>

属性：action、method、

<input> - 输入框

属性：type=text

文本框 - <text>

按钮 - <button>

提交 - <submit>

重置 - <reset>

密码框 - <password>

单选 - <radio>

多选 - <checkbox>

文本域 - <textarea>

文件域 - <file>

邮箱 - <email>

数字 - <number>

滑块 - <range>

搜索框 - <search>

<select> - 下拉框

单个选项 - <option>

11、表单的具体应用

属性：

placeholder - 提示性的消息

表单的基本校验

required - 必填

pattern - 正则表达式

二、CSS

Less：Less.js 中文网

1、CSS的核心

发展史：CSS 二十年发展简史-CSDN博客

选择器

基本选择器

标签

class

高级选择器

层次选择器：> ~ +

结构伪类选择器：

属性选择器：a[ * ^ $ ]

2、美化网页

字体：color、font-size

排版网页：text-align、text-indent、line-height、text-decoration

超链接伪类：hover

样式：list-style

背景样式：背景颜色、背景图片

3、盒子模型 - box

边框：border

内边框：padding

外边框：margin

盒子模型尺寸计算：border + padding + margin + 内容元素

box-size

圆角边框：box-radius

box-shadow

4、浮动 - flex

网页布局：标准文件流

display：bolck、inline、inline-block

浮动：左浮动、右浮动

清除浮动：

clear：left、right、both、none

解决父级边框塌陷问题：空div、父元素高度、overflow、:after

inline-block：float

5、定位

相对定位：relative

绝对定位：absolute

固定定位：fixed

层级区分：z-index

透明度：opacity

6、

三、JavaScript

1、数据类型

Number

string

boolean

逻辑运算

比较运算符

null、undefined

数组

对象

2、严格检查模式

‘use strict’

3、流程控制

while

for i

for in

for of

foreach

4、集合

map

set

iterator == for of

5、函数、变量的作用域

function abs()

匿名函数 function()

内置对象 arguments、rest

变量作用域

和java类似

6、方法

        // 对象和方法的结合
        // 第一种：对象和方法合起来写
        var person = {
            name: "sly1",
            age: 3,
            getDate: function (x) {
                return 'nihao' + x;
            }
        }
        document.write('通过对象调用函数:' + person.getDate('5') + '</br>');

反射：控制this的指向

getDate.apply(person, [])

7、内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

日期对象

<script>
    let now = new Date();
    now.getFullYear();
    now.getMonth();     // 0~11月
    now.getDate();      // 日
    now.getDay();
    now.getHours();
    now.getMinutes();
    now.getSeconds();
 
    now.getTime();      // 获取时间戳
    now.toLocaleString()
    now.toUTCString()
</script>

JSON对象

    // 对象转化为json字符串
    let jsonUser = JSON.stringify(user);
    // Json字符串转换成对象
    let userBean = JSON.parse('{"name":"xiaofaner","age":28,"set":"男"}');

8、继承

原型链：https://www.cnblogs.com/loveyaxin/p/11151586.html

原型继承

        // 原型继承
        var student = {
            name: "学生",
            birth: 2000,
            run: function () {
                document.write('学生会跑:' + '</br>');
            }
        }
        var child = {
            name: "xiaomming"
        }

        // 父类
        child._proto_ = student;
        document.write('父类的值:' + child._proto_.birth + '</br>');
        document.write('父类的方法:' + child._proto_.run() + '</br>');

        // 给ss新增加一个爸爸方法
        function ss(name) {
            this.name = name;
        }
        ss.prototype.hello = function () {
            document.write('我是爸爸:' + '</br>');
        }

        document.write('爸爸的方法:' + ss.prototype.hello() + '</br>');

一切对象的父类都是Object

类继承

        class class1 {
            constructor(name) {
                this.name = name;
            }

            hello() {
                document.write('hello:' + name + '</br>');
            }
        }
        // 本质还是_proto_
        class class2 extends class1 {
            constructor(name, grade) {
                super(name);
                this.grade = grade;
            }

            hello2() {
                super.hello();
                document.write('hello2:' + grade + '</br>');
            }
        }
        var student1 = new class1("东山小红");
        var student2 = new class2("五条悟", 111);

9、操作Bom

BOM（Browser Object Model）: 浏览器对象模型

    <script>
        // window 代表浏览器窗口
        document.write('窗口内部高度:' + window.innerHeight + '</br>');
        document.write('窗口外部高度:' + window.outerHeight + '</br>');
        document.write('窗口名字:' + window.name + '</br>');
        document.write('窗口X轴下标:' + window.pageXOffset + '</br>');
        document.write('窗口屏幕y:' + window.screenY + '</br>');
        document.write('窗口设备的像素:' + window.devicePixelRatio + '</br>');
        document.write('窗口虚拟视图:' + window.visualViewport + '</br>');
    </script>

    </br>
    <script>
        // navigator 代表浏览器
        document.write('浏览器名:' + navigator.name + '</br>');
        document.write('浏览器应用名:' + navigator.appName + '</br>');
        document.write('浏览器应用版本:' + navigator.appVersion + '</br>');
        document.write('浏览器类型:' + navigator.userAgent + '</br>');
        document.write('浏览器平台:' + navigator.platform + '</br>');
        document.write('浏览器驱动:' + navigator.webdriver + '</br>');
    </script>

    </br>
    <script>
        // screen 代表系统屏幕
        document.write('系统屏幕高:' + screen.height + '</br>');
        document.write('系统屏幕像素:' + screen.pixelDepth + '</br>');
    </script>

    </br>
    <script>
        // location 代表当前页面的URL信息
        document.write('当前URL的主机:' + location.host + '</br>');
        document.write('当前URL的路径:' + location.href + '</br>');
        document.write('当前URL的协议:' + location.protocol + '</br>');
        document.write('当前URL的来源:' + location.origin + '</br>');
    </script>

10、操作Dom

DOM（Document Object Model）：文档对象模型

    <script>
        // DOM 主要用来对HTML的节点增删改查
        document.write('DOM的标题:' + document.title + '</br>');
        document.write('DOM的路径:' + document.URL + '</br>');
        document.write('DOM的面包屑:' + document.cookie + '</br>');
        document.write('DOM的文档类型:' + document.doctype + '</br>');
        document.write('DOM的字符集:' + document.charset + '</br>');
        document.write('DOM的属性节点:' + document.ATTRIBUTE_NODE + '</br>');
        document.write('DOM的注释节点:' + document.COMMENT_NODE + '</br>');
        document.write('DOM的文档节点:' + document.DOCUMENT_NODE + '</br>');
        document.write('DOM的元素节点:' + document.ELEMENT_NODE + '</br>');
        document.write('DOM的实体节点:' + document.ENTITY_NODE + '</br>');
        document.write('DOM的文本节点:' + document.TEXT_NODE + '</br>');
    </script>

Dom的选择器，可进行增删改查

    <div id="div1">
        <h1>你好</h1>
        <p id="p1">GG</p>
        <p id="p2" class="p2">very well!</p>

        <div id='child1'>
            <p>儿子1</p>

        </div>
    </div>

    <script>
        // 选择器
        // 查询
        document.write('根据id选择:' + document.getElementById('div1').localName + '</br>');
        document.write('根据Tag选择:' + document.getElementsByTagName('h1').length + '</br>');
        document.write('根据Class选择:' + document.getElementsByClassName('p2').length + '</br>');
        // 修改
        var div1 = document.getElementById('div1');
        var p2 = document.getElementById('p2');
        p2.innerText = '456';
        div1.style.color = 'red';
        div1.style.padding = '2em';
        // 删除
        var father = p2.parentElement;
        father.removeChild(p2);
        // 删除时，节点index是一直在变化的
        // father.removeChild(father.children[0]);

        // 新增
        var newP = document.createElement('p');
        newP.setAttribute('id', 'newP');
        newP.id = 'newP';
        newP.innerText = '我是新增的dom';
        div1.appendChild(newP);
        p2.insertBefore(newP);
    </script>

四、Jquery

中文网：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

1、选择器

    <h1>jquery</h1>

    <a id="test-jquery" href="">点我</a>

    <div id="div1">
        <h1>你好</h1>
        <p id="p1">GG</p>
        <p id="p2" class="class1">very well!</p>

        <div id='child1'>
            <p>儿子1</p>

        </div>
    </div>

    </br>
    <script>
        // js原生选择器，种类少，名字长
        document.write('原生选择器:' + document.getElementById('test-jquery') + '</br>');
        // 公式  $(选择器).action(方法)
        $("#test-jquery").click(function () {
            alert("hello jquery!")
        });
        // $(selector).action()
        $('p').click();         // 标签选择器
        $('#child1').click();   // id选择器
        $('.class1').click();   // class选择器
    </script>

2、事件

    <!--要求：获取鼠标当前的一个坐标-->
    mouse: <span id="mouseMove"></span>
    <div id="divMove">
        在这里移动看看
    </div>

    </br>
    <script>
        $("#divMove").mousemove(function (e) {
            $("#mouseMove").text(`x: ${e.pageX}, y: ${e.pageY}`)
        })
    </script>

3、JQuery 操作DOM

    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>

    <script>
        // 获取值
        let text1 = $("#test-ul li[name=python]").text();
        let text2 = $("#test-ul li[class=js]").text();
        console.log(text1)
        console.log(text2)
        // 设置值
        $("#test-ul li[class=js]").text("JS");
        // 设置css样式
        $("#test-ul li[name=python]").css({ "color": "#ff0011", "background": "blue" })
        // 元素的显示和隐藏
        $("#test-ul li[name=python]").show()
        $("#test-ul li[name=python]").hide()
        // 更多查看文档
        // https://jquery.cuishifeng.cn/
    </script>

4、Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

伪造Ajax

<script type="text/javascript">
    'use strict'
    window.onload = function(){
        let myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.toLocaleString()
    };
 
    function LoadPage(){
        let targetUrl = document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }
</script>
 
<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>
 
<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

实际用法

    <script>
        // Ajax
        $.get("https://www.baidu.com", function (data) { 
            alert("Data Loaded: " + data);
        });

        $.post("https://www.baidu.com", { "func": "getNameAndTime" },
            function (data) {
                alert(data.name); // John
                console.log(data.time); //  2pm
            }, "json");
    </script>