前端的学习笔记JS

最新推荐文章于 2023-01-13 11:13:27 发布

唐晓宋

最新推荐文章于 2023-01-13 11:13:27 发布

阅读量262

点赞数

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/Tang_xSong/article/details/107757204

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端

W3C标准

W3C（World Wide Web Consortium(万维网联盟)）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的一个用于前端开发的开源工具包
AmazeUI：“妹子UI”，一款HTML5跨界前端框架

Javascript框架

JQuery
Angular
React
Vue
Axios

图片属性

alt：图片名字

title：悬停文字

超链接

target：“_blank” 在新标签页打开超链接

target：“_self” 在本页打开超链接

锚链接：

1.需要一个锚标记 <a href="#top">回到顶部</a>

2.跳转到标记 <a name=“top”>

表单提交

action：表单提交的位置可以是网站，也可以是一个请求处理地址

method：post，get 提交方式

get方式提交：可以在url中看到我们提交的信息，不安全，高效

post：比较安全，传输大文件

placeholder：提示信息

requirde：非空判断

pattern：正则表达式判断（常用正则表达式）https://www.cnblogs.com/yanmuxiao/p/8674241.html

JavaScript介绍

概述

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

一个合格的后端人员，必须要精通Javascript

历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本

JavaScript入门

引入JS

内部引用

<script>
	//...
</script>

外部引用

abs.js

test,html

<script src="abs.js"></script>

基本语法

console.log(score) 在浏览器的控制台打印变量

浏览器调试须知：

在这里插入图片描述

数据类型

数值、文本、图形、音频和视频…

number

js不区分小数和整数，Number

123   //整数123
123.1  //浮点数123.1
1.123e3  //科学计数法 
-99  //复数 
NaN  //not a number
Infinity  //表示无限大

比较运算符

= 
==	等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）

这是一个JS的缺陷，坚决不能使用==比较

须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.0000000001

null 和undefined

null 空
undefined 未定义

对象

对象是大括号，数组是中括号~~

每个属性之间使用逗号隔开，最后一个不需要添加

严格检查格式

前提：IDEA需要设置支持ES6语法

use strict ：严格检查模式，预防JS的随意性产生的一些问题

必须写在JS的第一行

局部变量建议都用let去定义~

数据类型

字符串

1、正常字符串使用单引号或者双引号包裹

2、注意转义字符 \

\`
\n
\t
\u4e2d	\u#### Unicode字符 
Ascll字符

3、多行字符串编写

//tab上面  esc下面 
var msg = 
	`hello
	world
	nihao`

4、模板字符串

let name = "qinjiang"
let msg = 'nihao ${name}'

数组

Array可以包含任意的数据类型

长度
```
arr.length
```
可以给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失
IndexOf，通过元素获得下标索引
slice() 截取Array的一部分，返回一个新的数组，类似于String中的substring
push、pop

push：添加在尾部、pop：弹出尾部元素
unshift()、shift() 头部

unshift：压入头部、shift：弹出头部的元素

sort() 排序
reverse() 元素反转
concat（） 合并

注意：并没有修改数组，只是会返回一个新的数组
连接符 join(’’)

打印拼接数组，使用特定的字符串连接

对象

JS中的所有键都是字符串，值是对象！

若干个键值对

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}

对象赋值

对象名.属性名 = ”“
使用一个不存在的对象属性，不会报错！会显示undefined
动态的删减属性，通过delete实现
动态的添加属性，通过给没有的属性赋值即可实现这个属性动态添加
判断属性值是否存在对象中使用 XXX in XXX 看返回值
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

流程控制

if 判断

while循环

for循环

foreach 循环

Map和Set

Map：

map.get(“键”)可以获取对应的值。

map.set(‘键’,‘值’) 新增或者修改

map.delete(“键”) 删除

Set：无序不重复集合

set.add(); 添加

set.delete(); 删除

console.log(set.has(3)); 查找

iterator

遍历数组：通过for of实现获取数组的值，通过for in获取下标

遍历Map：通过for of

遍历Set：通过for of

函数

函数定义及变量作用域

通过 function 方法名（方法参数）{} 进行函数的定义

一旦执行到return 代表函数的结束，返回结果

如果没有执行return，函数执行完也会返回结果，结果就是undefined

通过var 方法名 = function（参数）{} 进行函数定义

arguments是一个js免费赠送的关键字，代表传递进来的所有参数是一个数组

rest是一个获取除了已经定义的参数之外的所有参数

function adc(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest参数只能写在最后面，必须用…标识

作用域

和Java类似（内部函数可以访问外部的成员）

默认所有的全局变量，都会自动绑定在window对象下

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突 -> 怎样能够减少冲突？

//唯一全局变量 
var abc = {}；
abc.name = "tangs";
abs.add = function(a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

JQuery

局部作用域let：建议大家都有let去定义局部作用域的变量

const 常量

方法

意思就是把函数放在对象里面，对象只有两个东西：属性和方法

var tangs = {
    name: 'tangs',
    birth: 2000,
    age: function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//属性
tangs.name
//方法，一定要带()
tangs.age()

this是无法指向的，是默认指向调用它的那个对象

内部对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof undefined
"undefined"

Json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JS一切皆为对象，任何JS支持的类型都可以用JSON来表示

格式：

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

对象转化为json字符串 JSON.stringify(对象)

json转化为对象 JSON.parse(json数据)

Ajax

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

面向对象编程

什么是面向对象

类：模板
对象：具体的实例

在JS中这个需要大家换一下思维方式

原型：

 var xiaoming = {
     name: "xiaoming"
 };
 var Student = {
     play:function(){
         console.log(this.name + "studying...");
     }
 };
 
 //小明的原型是学生
 xiaoming._proto_ = Student;

class继承

class关键字是在ES6引入的

下面是ES6之前使用的方法：

function Student(name){
    this.name = name;
}
//给Student增加一个方法
Student.prototype.hello = function(){
    方法体
}

class出现之后

class Studnet{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}

继承

class XiaoStudent extends Student{
    
}

操作BOM对象（重点）

Navigator 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.appCodeName
"Mozilla"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.platform
"Win32"

大多数时候，不使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen 代表屏幕

screen.width
1600
screen.height
900

location（重要） 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com"
protocol:"https:"
reload(): 重新加载页面

//设置新的地址
location.assign('https://www.taobao.com/')

document 代表当前页面，HTML DOM文档树

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
</dl>
<script>
	var dl = document.getElementById('app')
</script>

获取cookie 服务器端可以设置cookie: httpOnly

history 两个方法 back()和forward() 后退和前进

操作DOM对象（重点）

核心

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

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

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

获得Dom节点

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father') 	//获得指定父节点的所有子节点

这是原生代码，之后尽量使用JQuery();

更新节点

id.innerText=’内容‘ 修改文本的值
id.innerHTML=’<strong>123</strong>‘ 修改解析HTML文本标签
id.style.color=‘yellow’ 操作JS

删除节点

先获取父节点，再通过父节点删除自己

//获取标签的父标签
var father = p1.parentElement;

father.removeChild(p1)

注意删除多个节点的时候，Children是时刻变化的，删除节点的时候一定要注意

插入节点

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

追加：

<div id="list">
    <p id="se">
        JavaSE
    </p>
        <p id="ee">
        JavaEE
    </p>
        <p id="me">
        JavaME
    </p>
</div>

<script>
	var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);	//追加到后面
</script>

创建一个新的标签，实现插入

<script>
	var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');//通过JS创建一个新的节点
    var newP = document.crwateElement('p');//创建一个P标签。
    newP.id = 'newP';
	newP.innerText = 'Hello Tangs';
    
    
   	var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
</script>

操作表单（验证）

获得要提交的信息

<form action="post">
    <p>
        <span>用户名</span><input type="text" id="username">
    </p>
    <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 = '123'	
    
    //对于单选框，多选框等等固定值， boy_radio.value 只能获取当前的值
    boy_radio.cheched;	//查看返回的结果，是否为true，如果为true，则被选中 
    girl_radio.checked = true;	//赋值
    
</script>

提交表单（MD5加密）表单优化

<!--
	οnsubmit= 绑定一个提交检测的函数，true false
	将这个结果返回给表单，使用onsubmit接收！
	οnsubmit="return abc()"
-->
<form action="www.baidu.com" method="post" onsubmit="return abc()">
    <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">
    <button type="submit">
        提交
    </button>
</form>
<script>
	function abc(){
        alert(hello);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过，false 阻止提交 
    }
</script>

JQuery

是JS的库，里面存在大量的JS函数

$(selector).action()

**获取JQuery **

http://www.jq22.com/cdn/ CDN获取

可以直接把包下载下来

<a href="" id="test-jquery">点我</a>
<script>
	$('#test-jquery').click(function(){
        alert('hello jquery')
    })
</script>

选择器

文档工具站 https://jquery.cuishifeng.cn/

$('p').click();	//标签选择器 
$('#id').click();	//id选择器 
$('.class').click();	//class选择器

事件

<style>
    #divMove{
        width:500px;
        height:500px;
        border：1px solid red;
    }
</style>
<body>
    mouse:<span id="mouseMove"></span>
    <div id="divMove">
        点击
    </div>
</body>
<script>
	$(function(){
        $('#divMove').mouse(function(e){
            $('#mouseMove').text('X:' + e.pageX + 'Y:' + e.pageY)
        })
    })
</script>

操作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()

唐晓宋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习笔记JS

前端W3C标准W3C（World Wide Web Consortium(万维网联盟)）成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构标准包括：结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）UI框架Ant-Design：阿里巴巴出品，基于React的UI框架ElementUI、iview、ice：饿了么出品，基于Vue的UI框架Bootstrap：Twitter推出的一个用于前端开发的开源工具包Am
复制链接

扫一扫