前端JavaScript、实用前端网站、前端小技巧

最新推荐文章于 2024-09-25 10:59:43 发布
最新推荐文章于 2024-09-25 10:59:43 发布
阅读量253 收藏
点赞数
分类专栏： html js Jquery 文章标签： js java dom jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RElim/article/details/106379967
版权
html 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏
Jquery
1 篇文章 0 订阅
订阅专栏

1. 什么是JavaScript?

概述:JavaScript是一门世界上最流行的脚本语言

注:Java与JavaScript本身并无干系
  一个合格的Java程序员必须必须必须精通JavaScript,甚至超过Java,因为在工作中极大可能写JavaScript的工程量大于Java
  JavaScript起源小故事:https://blog.csdn.net/kese7952/article/details/79357868
(仅供学习,并无商业用途)

2. JavaScript语言规范是什么?

JavaScript遵循ECMAScript规范,最新版本已经更新到ES6,但大部分浏览器不兼容,但对于ES5所有浏览器绝对兼容

3.快速入门

3.1 引入JavaScript
  • 内部引入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js入门</title>
<!--js需要使用Script标签-->
    <script>
        //一个简单的弹窗
        alert("hello world");
    </script>
</head>
<body>

</body>
</html>
  • 外部引入
alert("hello")

	<!--js需要使用Script标签-->
    <!--script标签必须成对出现-->
    <script src="js2.js"></script>
3.2 基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法入门</title>
    <script>

        // 定义变量
        // js严格区分大小写
        var 变量名 = 变量值;

        // 条件控制
        if(2>1){
            alert(2);
        }

        //在浏览器的控制台打印变量
        console.log(变量);
    </script>
</head>
<body>

</body>
</html>

4. 数据类型

//js不区分整数和小数
数字: number
字符串: "" '' ``
布尔值: true false
逻辑运算: && || !
//建议坚持使用===比较
比较运算: = ==(只比较值) ===(绝对等于)
null 和 undefined 
空       未定义

//数组
//js中的数组没有java数据类型那么严谨
//如果取数组下标越界时就会报undefined
var arr = [1,2,3,"","123","数字"]

//对象
 var 对象名 = {
            属性:属性值,
            属性2:属性值
        }

NaN与所有数值都不相等,甚至NaN不等于NaN

在Java和JS中尽量避免使用浮点数进行运算可能出现精度问题

4.1 严格检查模式
/*
    严格检查模式
    'use strict';
    一般放在js代码块的第一行
    ide必须支持se6格式
    局部变量推荐使用let定义
 */
4.2 字符串
  1. 普通字符串使用 ‘单引号’ 或 “双引号”
var name = "喵喵喵";
var name = '喵呜';

  1. 一些特殊字符要用到转义字符(具体可自行百度)

  2. 多行字符串使用tab键上面的``

var abc = `别看
            我只是
             一只羊
         ` ;
  1. 模板字符串
  let name = "喵喵喵";

  console.log(`你好${name}`);

  1. 字符串的不可变性

  2. 大小写转换

let name = "abc";
    //转大小写
    console.log(name.toUpperCase());
    console.log(name.toLowerCase());
  1. indexOf()获取索引
//得到该字符在字符串中的索引值
console.log(name.indexOf('b'))
  1. subString()截取
//截取第一个到最后一个
console.log(name.substring(1))
//截取[1,3)
console.log(name.substring(1,3))
4.3 数组
  1. js数组长度可变赋值过小,元素会丢失
  2. slice()截取数组的一部分,返回新的数组
//数组截取
var array1 = [1,2,3,4,5,6];
array1.slice(2);
alert(array1.slice(2));
  1. push(): 向数组尾部推送元素
//push() 向尾部推送数据
var array1 = [1,2,3,4,5,6];
array1.push(1,2,3);
alert(array1);
  1. pop(): 将数组最后一个元素弹出
//pop() 将尾部最后一个数据弹出
var array1 = [1,2,3,4,5,6];
array1.pop(1);
alert(array1);
  1. unshift(): 向数组头部推送元素
//unshift() 向头部推送数据
var array1 = [1,2,3,4,5,6];
array1.unshift(1,1,1);
alert(array1);
  1. shift(): 将数组头部的元素弹出
//shift() 将头部数据弹出
var array1 = [1,2,3,4,5,6];
array1.shift(1);
alert(array1);
  1. sort(): 排序
//sort(): 排序
var array1 = [1,4,6,3,2,7];
array1.sort();
alert(array1);
  1. reverse(): 元素反转
//reverse() 反转
var array1 = [1,4,6,3,2,7];
array1.reverse();
alert(array1);
  1. concat(): 追加数据到一个新的数组中(不会修改原数组)
//concat() 追加数据到一个新数组,原数组不变
var array1 = [1,4,6,3,2,7];
var array2 = array1.concat(1,2,3);
alert(array1);
alert(array2);
  1. 连接符join(): 数组间每个数据之间的连接符号
//join() 连接符号
var array1 = [1,4,6,3,2,7];
alert(array1.join("*"));
  1. 多维数组:
//多维数组
var array1 = [[1,2,3],[4,5,6]];
alert(array1[1][1]);
4.4 对象

对象的属性就是一堆键值对组成,所有的键,也就是属性名都是字符串,值可以是任意类型

//对象
 var 对象名 = {
            属性:属性值,
            属性2:属性值
        }
  1. 对象赋值
对象名.属性名=新属性值;
  1. 使用一个不存在的对象属性不会报错,只会undefined
  2. 动态的删减属性
delete 对象名.属性名
  1. 动态添加属性
对象名.新属性名 = 新属性值;
  1. 判断属性值是否在某对象中
//返回布尔值
'属性名' in person
  1. 判断一个属性是否是这个对象自身拥有的
对象名.hasOwnProperty('字段或者方法名')
4.5 流程控制
//选择结构
if(){}else{}

//while do while循环结构
while(){}
do while(){}

//for循环
for(初始化值;循环条件;迭代语句){
}

//数组循环1
var arr = [1,2,3,4,5];
arr.forEach(function (value, index, array) {

})

//数组循环2
//遍历出下标
for (let 变量 in 对象){
        
}
4.6 Map和Set (ES6新特性)

Map:

//Map中都是键值对
    var Map = new Map();
    //向Map中添加键值对
    Map.set("小明",18);
    //从Map中获取数据
    Map.get("小明");
    //从Map中删除数据
    Map.delete("小明");

Set(数据无序不可重复):

//Set
    var set = new Set();
    //添加数据
    set.add("小明",18)
    //删除数据
    set.delete("小明");
    var boolean = set.has("小明");
    console.log(boolean);
4.7 Iterator (ES6新特性)
for (let 变量 of arr){
        
}

for (let 变量 of set){
        
}

for (let 变量 of map){
        
}

5 函数

5.1 定义函数

//函数的两种定义方式
function 函数名(参数可有可无) {

}
var 变量名 = function () {

}
//函数调用
函数名(参数);

var 变量名 = function (参数1,参数2,...rest) {
            //rest参数只能写在最后面
        }

5.2 变量的作用域

js中定义的变量是有作用域的,若在函数体中声明,则在函数体外不可以使用 (非要想实现的话,后面可以研究一下闭包)

  • 若内部函数与外部函数都有变量,则内部函数可以访问外部,外部不能访问内部,当内外变量名相同时,内部默认屏蔽外部
  • 系统唯一全局对象windows (默认所有的全局变量都会绑定在windows对象下面)

5.3 规范

  • 自己定义一个函数为全局,将所有自己的代码放入其中,减少全局命名冲突的问题

5.4 方法

//函数名
        function 函数名() {
            属性名:function () {
                方法内容
            }
        }
        //调用
        函数名.属性名();

6. 内部对象 (相当于java的内部类)

6.1 Date

  • 基本使用
 var date = new Date();
        date.getFullYear() //年
        date.getMonth(); //月 老外的月份是0~11
        date.getDate() //日
        date.getDay() //星期几
        date.getHours() //时
        date.getMinutes() //分
        date.getSeconds() //秒
        date.getTime() //时间戳
  • 时间转换
//根据事件戳,返回当前事件
console.log(new Date(时间戳));

//转换为本地事件,注意,这里调用的是一个方法名为date
date.toLocaleDateString();

6.2 JSON

  • JSON是一种轻量级的数据格式
  • 任何JS支持的数据类型都可以用JSON无缝转换

格式:

  • 对象都用{ }
  • 数组都用[ ]
  • 所有键值对都用k:v

JS对象和JSON字符串的转换:

 'use strict';
        var user = {
            year:"11",
            name:"以梦"
        }

        //将对象转换为JSON数据
        JSON.stringify(user);
        alert(JSON.stringify(user));

        //将JSON字符串转换为对象
        var user1 = JSON.parse('{"year":"11","name":"以梦"}');

JSON串和JS的区别(具体可自行对比上面代码):

  • JSON串都是由引号包裹的,而且本身就是一个字符串

  • JS对象属性名没有被引号包裹,且本身不是一个字符串

6.3 Ajax

  • 原生的js写法 xhr异步请求
  • JQuery封装好的方法 $("#name").ajax("")
  • axios请求

7. 面向对象编程

7.1 什么是面向对象

JS、Java、C#都是面向对象语言,JS有些区别

  • 类: 模板
  • 对象: 具体的事例
  • 类是对象的抽象,对象是类的具体表现

ES6之后新特性 class{}

  • js类
  class 类名{
            //构造
         constructor(属性名) {
         this.属性名=初始化名
            }
         方法名(){
             
         }
        }
  • js类的继承
class Boy extends Student{
    constructor(name age){
        super(name);
        this.age=age;
    }
    myGrade(){
        alert("我是一名男生")
        }
}

js类的本质还是原型

原型链:js的原型到object后会一直循环,成为一个循环链
  _ proto_:

8. 操作BOM对象(重点)

BOM全称: Browser OBject Module 浏览器对象模型

8.1 浏览器介绍

JavaScript和浏览器的关系

JavaScript的诞生就是为了让它能在浏览器中运行

  • IE6-11
  • Chrome
  • Safari
  • Firefox

8.2对象

window (浏览器窗口 重点)

//内部高度
window.innerHeight 
864
//外部高度
window.outerHeight
850
//内部宽度
window.innerWidth
687
//外部宽度
window.outerWidth
1522

Navigator (封装浏览器信息)

window.navigator
Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 8, …}

大多数时候不会使用navigator对象,因为会被人为修改!
不建议使用这些属性判断浏览器的信息来编写代码

screen (屏幕)

//屏幕宽高
screen.width
1536
screen.height
864

location (代表当前页面的URL信息 重点)

href: "https://www.bilibili.com/video/BV1JJ41177di?p=19" //路径
host: "www.bilibili.com" //主机
protocol: "https:" //协议
reload: ƒ reload() //重新加载刷新
location.assign("www.baidu.com") //设置新的地址

document (文档页面)

document.title
"【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"
  • 获取具体的文档树节点信息
document.getElementById("app")
<div id=​"app">​…​</div>​
  • 获取cookie
document.cookie
"_uuid=4614887E-7BD8-17FE-96D1-2BFEFA5F7C1914532infoc; buvid3=7A28D6C8-C495-47A3-8388-DE0872EBE6C253933infoc; sid=54voewjf; DedeUserID=89016828; DedeUserID__ckMd5=a058ad8a4978d8d1; bili_jct=12b95fea3533cbc25ba8a334cf3ce675; PVID=1; CURRENT_FNVAL=16; rpdid=|(u|JJ)|kRJ~0J'ulm|J~uukm; CURRENT_QUALITY=32"

某些恶意的病毒网站会劫持cookie
在服务端设置 cookie: HttpOnly 防止cookie被劫持

history (浏览器的历史记录)

//回退
history.back
ƒ back() { [native code] }
//前进
history.forward
ƒ forward() { [native code] }

9. 操作DOM对象(重点)

DOM全称:Document Object Module 文档对象模型

核心: 浏览器是一个DOM树形结构

  • 更新: 更新DOM节点
    操作文本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文本</title>

</head>
<body>
<div id="div1"></div>
<script>
//一定要注意js代码的位置以及执行顺序
    var div1 = document.getElementById("div1")
	div1.textContent=("111");
    div1.innerText=("喵喵喵");
    div1.innerHTML=("<a href='#'>超链接<a/>");
</script>
</body>
</html>

操作js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作js</title>

</head>
<body>
<div id="div1">喵喵喵</div>
<script>

    var div1 = document.getElementById("div1");
    div1.style.fontSize="100px";
    div1.style.color="skyblue";
</script>
</body>
</html>

  • 遍历DOM节点: 得到DOM节点

  • 删除: 删除一个DOM节点

//删除节点需要先找到父节点,从父节点删
//毕竟自己无法把自己拎起来丢进垃圾桶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点</title>

</head>
<body>
<div id="div1">喵喵喵</div>
<script>
    var father = div1.parentElement;
    var son =document.getElementById("div1")
    father.removeChild(son);
//也可以使用下标移除
	father.removeChild(father.children[0]);
</script>
</body>
</html>
  • 添加: 添加一个节点
appendChild();

	//新建一个标签
 	var pp = document.createElement('p');
    pp.id="p1";
    var p01 =document.getElementById("p1");
  • 获取DOM节点进行操作
//通过标签名获取元素
document.getElementsByTagName("div")
//通过ID获取元素
document.getElementById("app")
//通过class获取元素
document.getElementsByClassName("player-fullscreen-fix")

10. 操作表单(验证)

form,DOM树

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

表单目的:提交信息

//表单取值
document.getElementById("name").value
"123"
//表单赋值
document.getElementById("name").value="111"
"111"
//单选框是否选中
document.getElementById("nan").checked=="checked"
false
//js代码改动单选框选中状态,赋值
document.getElementById("nan").checked="checked"

表单信息可以进行md5加密(具体自行百度学习)
前端md5加密(需要引用md5js文件)

onsubmit需要return

11.JQuery

Jquery库中存在大量的js函数

获取Jquery

  • 可以自己去下载Jquery文件导入
  • 可以去CDN使用在线文件引入
  • JQuery公式
$(selector).action()
$(选择器).动作()

事件(很简单,自学谢谢)

操作DOM元素

//获得值
$(选择器).html();
$(选择器).text();
//设置值
$(选择器).html("");
$(选择器).text("");

实用网站

  1. Layui
  2. ElementUI
  3. bootStrap
  4. AntDesign

前端小技巧

  1. 如何巩固JS (看JQuery源码,看游戏源码)
  2. 如何巩固HTML CSS (扒网站,download网站自己修改)

关键字

arguments
js自带的一个关键字 代表调用函数时传入的所有参数

rest
获取除了已经定义过的其他参数

let
SE6引入,定义局部变量推荐使用,解决局部作用域冲突问题

const
SE6引入用来定义常量

apply
.apply(对象名,数组),精确指向引用的对象

RElim143
关注
专栏目录
前端技术搭建拼图小游戏（内含源码）
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
前端jsmd5加密，需要者可直接引用
09-15
MD5是通过前台js加密的方式对密码等私密信息进行加密的工具
十三、客户端检测
coderxsj
01-18 265
一、能力检测 测试浏览器是否支持某种特性。不要求事先知道浏览器信息，只需要检测自己关心的能力是否在 首先检测最常用的方式；（如，先检测document.getElementById,然后检测document.all) 其次必须检测切实需要的特性（不能通过检测document.all是否存在判断window.innerHeight是否存在） 安全能力检测： 检测某个特性是否存在的同时，验证其是否具有预期的能力 尽量使用typeof，但不够（DOM对象是宿主对象，IE8及以下版本中，由COM实现..
学会这12个JavaScript实用技巧，做一个优雅的前端人
流绪@微梦
07-25 1167
JavaScript 最初是为了给网站添加一些功能而被设计出来的简单语言。但是时至今日，它无处不在，而且还更加复杂了。随着 Web 应用程序越来越复杂，JavaScript 也发展得越来越快。编写简洁、可读且可维护的 JavaScript 程序不再像以前那么容易了。这些技巧可以帮助您更高效地编写和维护代码，助力高效开发。
前端开发应知网站(强烈推荐)
热门推荐
吴小迪的博客
03-31 12万+
作为一名前端开发者（所有程序员）最起码遇到bug就算不会解决也应该会搜解决问题的答案。 一般笔者会先在百度搜（关键词一定要输入正确） 如果没搜到会再去bing里面看看 还没有的话就去github的Issues里面再看看 如果还不行就只能自己去看官方文档然后自己研究了。 只是知道搜解决问题的方法这是最基础的，遇到问题才会去想办法解决，而作为一名...
JavaScript前端性能优化技巧分享
ElvaRaleign的博客
04-21 1024
本文将分享一些JavaScript前端性能优化的技巧，帮助开发者提升Web应用的性能。通过减少DOM操作、避免全局查找、优化循环和递归、使用Web Workers、优化数据结构和算法、图片优化、利用缓存以及使用性能分析工具等技巧，我们可以显著提升Web应用的性能，提升用户体验。例如，对于需要频繁查找、插入和删除元素的场景，使用哈希表（如JavaScript中的对象或Map）通常比使用数组更高效。此外，了解并应用常见的算法优化技巧（如时间复杂度和空间复杂度的优化）也可以显著提高性能。五、优化数据结构和算法。
JavaScript前端学习大全
2301_79744036的博客
04-01 1803
函数（方法）是被那些设计为执行特定任务的代码块。①定义：JavaScript函数通过function关键字进行定义，语法为：function functionName（参数1,参数2…）{要执行的代码注意：①形式参数不需要类型。因为JavaScript是弱语言。②返回值不需要定义类型，可以在函数内部直接使用return返回即可。return a+b;②调用：函数名称（实际参数列表）;var functionName=funtion（参数列表）{
提升前端性能的JavaScript技巧
hong161688的博客
08-15 819
在Web开发中，前端性能是一个至关重要的因素，它直接关系到用户体验和网站的整体质量。JavaScript作为前端开发中不可或缺的一部分，其性能优化对于提升前端性能具有显著作用。以下是一些提升前端性能的JavaScript技巧，涵盖了多个方面，包括DOM操作、代码优化、资源加载、缓存策略以及使用现代工具和框架等。
前端小技巧: 数组去重的15种方法
Wang的专栏
11-11 1457
去重，就是去除重复的选项，得到一组唯一的选项集合的过程上述整理了14条去重方式，大同小异，只是实现方式上的区别注意: 在前端或者说javascript中的集合，是可以使用不同的数据类型的所以，需要注意上述方法中的一些适用场景。
JavaScript前端开发时数值运算的小技巧
11-20
1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor()，代替负数的...
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
12-13
和许多其他语言一样，JavaScript 也需要靠很多小技巧去完成各种不同的事情。有的可能早已经广为人知，有的却可能会让你感到有些迷惑。接下来先介绍27个马上就能用起来的 JavaScript 小技巧，下面和小编一起来看看吧...
浅谈前端网络、JavaScript优化以及开发小技巧
09-22
开发者需要了解各种前端性能的最佳实践，并通过不断的优化来提升网站的用户体验。随着HTTP2.0等新标准的普及，未来的前端优化将会有更多的技术可用，这将有助于开发者更好地管理前端性能和用户体验。
web 笔记，包含JavaScript、CSS、HTML 等；各种前端开发的小技巧及总结.zip
01-02
各种前端开发的小技巧及总结. web 笔记，记录自己学习前端的历程，记录自己学习的代码，包含JavaScript、CSS、HTML 等；各种前端开发的小技巧及总结. web 笔记，记录自己学习前端的历程，记录自己学习的代码，包含...
前端JavaScript小技巧「建议收藏」
江拥羡橙的博客
09-29 5万+
在JavaScript世界里，有些操作会让你无法理解，但是却无比优雅 有时候读取变量属性时，他可能不是Ojbect。这个这个你就要判断这个变量是否为对象，如果是在如引用 var obj; if(obj instanceof Object){ console.log(obj.a); }else{ console.log('对象不存在'); }ES6中有简便写法，可以帮我们简短代码，从而更加明确 var obj; console.log(obj?.a || '对象不存在'
提升前端性能的JavaScript技巧（下）
Good_tea_h的博客
08-15 1214
我们继续深入讨论提升前端性能的JavaScript技巧，这些技巧涉及更高级的策略和最佳实践。
工厂模式的介绍及实现
最新发布
户伟伟的博客
09-25 81
工厂模式（Factory Pattern）是一种创建型设计模式，提供了一种创建对象的接口，而无需显式指定对象的具体类。在这种模式中，我们通过定义一个工厂类，专门负责生产各种类型的对象，这样我们可以避免直接在代码中实例化具体类，使代码更具扩展性、灵活性和维护性。解耦：客户端代码与具体的类解耦，避免了对象创建逻辑的重复。简化对象创建：通过工厂统一管理对象的创建逻辑，使代码更清晰易懂。扩展性强：新增类时，只需在工厂中增加创建逻辑，而不必修改现有的业务代码。
Java Stream流编程入门
2301_77207909的博客
09-21 517
Java StreamAPI的使用与常用方法
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 805
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
jQuery前端开发实用小技巧集锦
"这篇文档是关于jQuery前端开发的35个实用小技巧，涵盖了各种功能增强和用户体验优化的方法。" 1. 禁止右键点击： 在网页中，有时为了防止用户通过右键菜单复制内容或执行其他不希望的行为，可以使用jQuery禁用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值