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

最新推荐文章于 2024-04-17 15:41:02 发布

RElim143

最新推荐文章于 2024-04-17 15:41:02 发布

阅读量236

点赞数

分类专栏： html js Jquery 文章标签： js java dom jquery

本文链接：https://blog.csdn.net/RElim/article/details/106379967

版权

html 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

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 字符串

普通字符串使用 ‘单引号’ 或 “双引号”

var name = "喵喵喵";
var name = '喵呜';

一些特殊字符要用到转义字符(具体可自行百度)
多行字符串使用tab键上面的``

var abc = `别看
            我只是
             一只羊
         ` ;

模板字符串

  let name = "喵喵喵";

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

字符串的不可变性
大小写转换

let name = "abc";
    //转大小写
    console.log(name.toUpperCase());
    console.log(name.toLowerCase());

indexOf()获取索引

//得到该字符在字符串中的索引值
console.log(name.indexOf('b'))

subString()截取

//截取第一个到最后一个
console.log(name.substring(1))
//截取[1,3)
console.log(name.substring(1,3))

4.3 数组

js数组长度可变赋值过小,元素会丢失
slice()截取数组的一部分,返回新的数组

//数组截取
var array1 = [1,2,3,4,5,6];
array1.slice(2);
alert(array1.slice(2));

push(): 向数组尾部推送元素

//push() 向尾部推送数据
var array1 = [1,2,3,4,5,6];
array1.push(1,2,3);
alert(array1);

pop(): 将数组最后一个元素弹出

//pop() 将尾部最后一个数据弹出
var array1 = [1,2,3,4,5,6];
array1.pop(1);
alert(array1);

unshift(): 向数组头部推送元素

//unshift() 向头部推送数据
var array1 = [1,2,3,4,5,6];
array1.unshift(1,1,1);
alert(array1);

shift(): 将数组头部的元素弹出

//shift() 将头部数据弹出
var array1 = [1,2,3,4,5,6];
array1.shift(1);
alert(array1);

sort(): 排序

//sort(): 排序
var array1 = [1,4,6,3,2,7];
array1.sort();
alert(array1);

reverse(): 元素反转

//reverse() 反转
var array1 = [1,4,6,3,2,7];
array1.reverse();
alert(array1);

concat(): 追加数据到一个新的数组中(不会修改原数组)

//concat() 追加数据到一个新数组,原数组不变
var array1 = [1,4,6,3,2,7];
var array2 = array1.concat(1,2,3);
alert(array1);
alert(array2);

连接符join(): 数组间每个数据之间的连接符号

//join() 连接符号
var array1 = [1,4,6,3,2,7];
alert(array1.join("*"));

多维数组:

//多维数组
var array1 = [[1,2,3],[4,5,6]];
alert(array1[1][1]);

4.4 对象

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

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

对象赋值

对象名.属性名=新属性值;

使用一个不存在的对象属性不会报错,只会undefined
动态的删减属性

delete 对象名.属性名

动态添加属性

对象名.新属性名 = 新属性值;

判断属性值是否在某对象中

//返回布尔值
'属性名' in person

判断一个属性是否是这个对象自身拥有的

对象名.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()
$(选择器).动作()

选择器学习网址: https://jquery.cuishifeng.cn/

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

操作DOM元素

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

实用网站

Layui
ElementUI
bootStrap
AntDesign

前端小技巧

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

关键字

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

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

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

const
SE6引入用来定义常量

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

RElim143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScript、实用前端网站、前端小技巧

1. 什么是JavaScript?概述:JavaScript是一门世界上最流行的脚本语言注:Java与JavaScript本身并无干系  一个合格的Java程序员必须必须必须精通JavaScript,甚至超过Java,因为在工作中极大可能写JavaScript的工程量大于Java  JavaScript起源小故事:https://blog.csdn.net/kese7952/article/details/79357868(仅供学习,并无商业用途)2. JavaScrip
复制链接

扫一扫