JavaScript:行为层语言

基础常识和语法

一个合格的后端人员,必须精通 JavaScript

css有人说:他不算一门编程语言.后来他添加了基于node.js的,less机制,相当于:成为了css预处理器
JavaScript(以下简称js),是一门"弱类型脚本语言"
有个Ant-Design网站,是阿里的一个前端框架网站,现在使用的比较好
可以去看一下ECMAScript(以下简称es)和js的历史
js只是当时想借java的名气,所以"取个好名字很重要"

用java语法来写js,一定不会错

es已经发展到了es6,但是现在有的浏览器还是仅支持到es5.这就导致:开发环境与线上环境不一致
我们一般需要设置idea的es6版本
js的专属标签是必须是双标签
js中的所有变量都是var
注释和java一样:请尽量在写文字前加上空格,因为es编译时,不加空格,有可能会报错
javaDoc注释会自动加上空格
代码每行结束,尽量加上 ; 号

<head><meta charset="UTF-8"><title>Title</title><script>/*** hello  world*/  var name = "张三";console.log(name);//控制台输出:张三</script></head>

我们可以在控制台,进行断点,调试

数据类型

js的大部分数字都归于number类型:typeof age = number
NaN:not a number不是一个数字:typeof NaN = number
Infinity(无限大),也是一个number,首字母大写
==号是equals,=必须类型与值全部相等.坚持不用号
js不会帮我们做自动类型转换
isNaN(NaN) === true
**用Math类来做浮点值运算: Math.ceil(17.8) **
undifined未定义: typeof 长歌 == undifined
数组,集合不用纠结数据类型var array = [13,“num”,null,undifined]
找不到数据就报undifined:array[1000]

对象是{}理解成Map集合var Person = { name : “长歌”, age : 18, sex : ‘女’};,数据[]
‘use strict’:严格检查模式,预防因为代码随意性,产生问题.要求idea设置为es6,必须放在第一行
不写var或者let就是全局变量,let是局部变量,两者作用域不一样:for (let i = 0; i < 10; i++) {
反引号mes = ‘里面写多行字符串’,这个符号在tab键上面:name = 偶题 - 百度汉语作者：杜甫文章千古事，得失寸心知。作者皆殊列，名声岂浪垂。骚人嗟不见，汉道盛于斯。前辈飞腾入;
name = ${age}`;取值模板字符串,但是字符串有不可变特性 --> String[1] = s
数组可以给长度赋值var array = [14,56],array.length = 10
slice()截取数组,push(),pop(),unshift压入头,shift弹出头,concat([])拼接,但不修改原数组.join(‘-’)连接
array.slice(2) , array.pop() 从头弹出, array.push(40) 从头加入 array.unshift(30)

操作对象

**动态操作对象(增删): delete person.age;person.age = “18” **
js的方法叫做函数
判断属性是否在内’age’ in person,对象的键全部是字符串
person.hasOwnProperty(“toString”) -> false
遍历:数组foreach,返回键for in :person[value]用键获得值,普通对象不能用for of直接打印值,集合也能用

集合

Map([[‘key’,‘value’],[…]]).set(‘key’,value)与Set.get()
是否包含元素has(0)

函数

绝对值函数:function abs(x)

函数赋值时数据类型要对等,如a.click(属性) = abs;(以属性模式赋值)

**浏览器解析时,会在每一行最后加 ; 号; **
没有return语句,最后会返回undefined
一切有成本的东西只有了解就行(能看懂代码)
typeof x != ‘number’ throw ‘message’ 自定义异常
js里面写字符串不会出错,不写成字符串可能会有错

参数列表

函数默认是参数列表,存在arguments数组中:arguments[2]
es6新特性rest:获取所有未直接定义的参数:abs(a,b,…rest).rest[2]
打印rest

作用域

函数内的var,函数外不能调用,想要实现,去研究闭包
闭包就是:在函数外,访问函数内的属性,避免变量被污染
如一个业务:让num每秒加1
var num是全局变量,但是在函数内,我们就用内部函数操作它
单独运行computer()是只是让这个函数初始化一次,赋值给test后,num才真正变成全局变量

function computer(){var num = 0;function innerTest(){console.log(num++);}//内部函数运行return innerTest;}var test = computer();for (let i = 0; i < 10; i++) {//0 1 2 ... 9test();}

变量定义重名时,就近原则:模块化开发,最后代码整合的时候可能会有这种情况
js执行引擎时,会先将所有变量预声明,但不赋值.建议:先声明,再定义,后赋值
做了才能记住
全局成员都默认属于window对象,如window.alter().
js所有的东西都可以当变量用
困的时候笑一下

不要给window绑定东西:自定义一个全局变量替代它.
const es6常量.

方法和函数

方法是对象内部属性对应的函数键:name : function (){}
区分属性和方法,就是看有没有():person.name是属性,name()是方法
函数.apply(对象,[参数列表]) ~ invoke.
让函数成为一个父类,不同对象的键指向它,实现不同的效果:test.apply(person,[4,5,“null”])

内部对象(内部类)

Date日期类

typeof {} = object,函数是function
getFullYear当前年
getDate当前日,getDay星期几,星期日是0,从0~6
*getTime()时间戳,可为用来构建Date对象.1000 * 60 * 60 24都是一天的时间,因为毫秒和秒相差1000倍
new Date(getTime() - 1000 * 60 * 60 * 24)
对象.tolocalceString(),toGMTString()
用java思想来写js

JSON轻量级数据交换格式

层次结构提升网络传输效率
转换成json字符串格式对象:JSON.stringify(对象)
转换成正常对象:JSON.parse(被转换对象),必须是字符串,用’’ 号来转换:JSON.parse(‘{“name”:“则天”,“age”:“18”}’)

class,es6新语法

构造函数constructor

class Student extends Person{static name = "长歌";
constructor(name) {super();this.name = name;
}

原型与原型链

所有的对象都有__proto__(隐式原型)属性:arr(数组).proto = Array[]
所有对象的都调用了它的构造函数,且默认调用父类的构造函数
而这个隐式原型就默认指向了它的父类
所有函数都有一个prototype(原型或显式原型)属性,代表它自己所属的类
所有对象的隐式原型都指向它的构造函数的原型 ,就是他父类的显式原型,就是它本身的隐式原型
把__proto__理解成影子,prototype是你自己.你的影子指向你,但是只有prototype才能代表你自己
你的影子指向你父类本身,因为你没有办法操作你父类的影子(每个人的影子只有自己可以操作).
arr.proto === Array.prototype == true
Object的原型是null

BOM对象:浏览器对象模型

诞生就是为了能存浏览器运行,网景公司的第一个浏览器最初只能浏览网页,没有互动

windew浏览器窗口(全局作用域)

innerWidth和outerHeight

navigator封装了浏览器信息

一般不使用,有可能会被人为修改,使我们获取不到真实的信息

appName:浏览器厂商名字,火狐和ie的都是网景
appversion:版本号,火狐显示:window5.0
**userAgent返回一个标头,一般存储了浏览器的基本所有信息: “Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0” **
platform:返回计算机平台,如win

screen屏幕

width和height

locathion当前页面的URL信息

**host主机 ip地址和端口号localhost:63342 **
**href::网址: “http://localhost:63342/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/…%B3%95/index.html?_ijt=8e6d42ql4tbpfnmg9obfjieh2s&_ij_reload” **
protocol:http:
reload()刷新网页
给百度挂钩子:assgin(‘你自己的网站’),要在百度下的控制台运行

document当前页面,操作HTML的DOM文档树

cookie获取cookie信息.
劫持cookie的原理演示就是:当淘宝和天猫都没有登录时,登录淘宝,天猫也会跟着登录

history页面跳转

back()回去,forward()跳转

DOM树:文档对象模型

删除一个节点时,其依附于它的节点自动死亡

window.addEventListener(‘load’,function(){…})初始化加载页面
document.querySelector(‘css选择器’),按照选择器来获取对象i
tagName,className,id获取等,注意返回的有时会是一个数组
对象.childern获取所有子元素,firstChildern和lastChildern等
元素默认有上下两个\n元素,所有firstChildern是\n,不是真实元素.
只有childern[0]才是获取真实的第一个子元素
nextElementSibling,children[0].previousElementSibling获取下一个区上一个元素
innerTest和innerHTML = "hello>"操作其中内容
father.children[0].style.color = 'red’操作css值

元素增删改查

删除是动态的,第1个元素被删除后,第二个元素变成第一个
firstChild[0].parentElement.style.background = 'red’获取父节点
firstChild[0]父节点.removeChild(children[0]);
firstChild[0].remove();删除所有
新增元素var htmlliElement = document.createElement(“li”);
追加元素firstChild[0].append(htmlliElement)
htmlliElement.id = “html”;
htmlliElement.setAttribute(“class”,“insertLi”);
firstChild[0].append(htmlliElement);
firstChild[0]父级点.insertBefore(htmlliElement新节点,children[0]目标节点);

表单

js的对象就是Map集合

为了可读性,建议使用变量时提前定义好,且不要出现在函数内

htmlFormElement.checked = true;
htmlFormElement.onclick = function (){ console.log(444);};

md5加密

script src=“https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js”></script
let md = md5(text.value);
提交时返回false,禁止表单跳转

submit.onclick = function (){let md = md5(text.value);return false;
};

规定表单提交时是否禁止跳转:form action=“https://www.baidu.com” method=“get” οnsubmit=“return disable()”

  <script>function disable(){return false;};</script><form action="https://www.baidu.com" method="get" onsubmit="return disable()">

用一个隐藏的input来中介用户的密码,进行隐式加密

window.addEventListener('load',function (){let submit = document.querySelector('input[type="submit"]');let text = document.querySelector('input[type="text"]');let hidden = document.querySelector('input[hidden]');submit.onclick = function (){hidden.value = text.value;let md = md5(hidden.value);console.log(md);return false;};});
<form action="#" method="get"><input type="text"><input type="text" hidden><input type="submit" value="提交"></form>

JQurey:js的封装库,更少的js代码

基础常识

** 官网:jQuery **
更少的代码

min版本当项目上线时用,写项目时用包
**各厂商cdn加速: jQuery cdn加速 (jq22.com) **
script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script
选中代码后ctrl + shift + -:折叠代码
语法:$(‘css选择器’).action(处理)
**阿里大佬的jqery库 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn) **

事件

页面初始加载(docment).ready(function()...);,或者直接(docment).ready(function(){...});,或者直接(docment).ready(function()...);,或者直接(function(){…});
鼠标以mouse开头:mousemove鼠标移动

$(function (){'use strict'//e只是指代event,这个字母可以随便写$('div').mousemove(function (e){let pageX = e.pageX;let pageY = e.pageY;$('h2').text('座标X:'+pageX+"-y:"+pageY);})
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zvgRpqQE-1648530631736)(C:\Users\林木\Desktop\mousemove.jpg)]

读写结合:html()和text(),没有参数就取值,有参数就是赋值

//jqery源码,有个value被传进来
text: function( value ) {return access( this, function( value ) {return value === undefined ?jQuery.text( this ) :this.empty().each( function() {if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {this.textContent = value;}} );}, null, value, arguments.length );},

$(‘h2’).html(‘座标s’);
$(this).css({‘color’:“red”,“width”:“150px”});
show()显示,hide()隐藏,toggle()自动切换显示或隐藏,底层是用display:none实现:$(this).toggle();
获取宽度参数:(window).width();(window).width();(window).width();(document).width();
widow是浏览器窗口,全局对象.document是window的一部分
万能方法:为div下的h2标签绑定click事件$(‘div’).on(‘click’,‘h2’,function (){ console.log(100);})

冒泡

冒泡就是点击子元素后,包裹子元素的父元素也会被点击
e.stopPropagation()关闭当前元素的冒泡

$(function (){'use strict'$('div').click(function (e){let id = this.id;//关闭冒泡e.stopPropagation();console.log(id);})})<div id="parentFather"><div id="father"><div id="son"></div></div>
</div>
div{width: 300px;height: 300px;background: red;
}
#father{width: 250px;height: 250px;background: yellow;
}
#son{width: 150px;height: 150px;background: aqua;
}

整体总结

巩固js和jqery就去源码之家看别人的项目源码
巩固css,html就去扒网站(要的是那个模板),没有用的删除,最后down下来,再修改效果

需要去看的一些网站

**源码之家源码之家-我的资源网站、站长必上的综合素材资源平台 (ymzj.cn) **
**友人C: 友人C - 相逢的人会再相逢 (ihewro.com) **
**docsify:js库 docsify **
**layui前端框架 Layui - 经典开源模块化前端 UI 框架（官网文档镜像站） (layuiweb.com) **
**element饿了么出口前端框架组件: Element - 网站快速成型工具 **
**Ant-Desing企业级前端UI设计体系: Ant Design - 一套企业级 UI 设计语言和 React 组件库 **

先行万里路,再读万卷书

javaScript和JQuery相关推荐

Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
javascript与jQuery对照学习总结(一)(一些常规操作)
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascrip ...
解决【Bootstrap‘s JavaScript requires jQuery】的问题
解决[Bootstrap's JavaScript requires jQuery]的问题参考文章: (1)解决[Bootstrap's JavaScript requires jQuery]的问题 ...
在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
JavaScript那些事儿（1）：对比JavaScript和jQuery的Dom操作
正在着手看<javascript权威指南>,整理点儿笔记,也算是督促自己学习,每天看一点,特立此贴,希望自己能坚持下去. 对比:用javascript和jQuery分别判断某元素是否存在, ...
JavaScript和jQuery的学习
还有12天就要回学校了,我的假期计划还能实现吗?在这12天里,需要把JavaScript和jQuery学完.我知道这两个技术对于前端网页开发非常重要.前期把HTML和CSS学完了,学的不是特别深,只是 ...
如何使用JavaScript或JQuery检测一个URL文件是否存在?
如何使用JavaScript或JQuery检测一个URL文件是否存在? How do I check if file exists in jQuery or JavaScript? 问题: 如何检查服 ...
php课程---JavaScript与Jquery的区别（转）
php课程---JavaScript与Jquery的区别(转) jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家 ...
流程代码中js报错，在javaScript或者jQuery中字符串比较没有equals()方法
问题: 流程走不下去. 原因: 在javaScript或者jQuery中字符串比较没有equals()方法,要比较两个字符串是否相等可以直接用==或者is()进行判断. //判断是否为未签约有风险等级 ...

javaScript和JQuery

JavaScript:行为层语言

基础常识和语法

一个合格的后端人员,必须精通 JavaScript

用java语法来写js,一定不会错

数据类型

操作对象

集合

函数

绝对值函数:function abs(x)

参数列表

作用域

方法和函数

内部对象(内部类)

Date日期类

JSON轻量级数据交换格式

class,es6新语法

原型与原型链

BOM对象:浏览器对象模型

windew浏览器窗口(全局作用域)

navigator封装了浏览器信息

screen屏幕

locathion当前页面的URL信息

document当前页面,操作HTML的DOM文档树

history页面跳转

DOM树:文档对象模型

元素增删改查

表单

md5加密

JQurey:js的封装库,更少的js代码

基础常识

事件

冒泡

整体总结

需要去看的一些网站

javaScript和JQuery相关推荐

最新文章

热门文章

javaScript和JQuery

JavaScript:行为层语言

基础常识和语法

一个合格的后端人员,必须 精通 JavaScript

用java语法来写js,一定不会错

数据类型

操作对象

集合

函数

绝对值函数:function abs(x)

参数列表

作用域

方法和函数

内部对象(内部类)

Date日期类

JSON轻量级数据交换格式

class,es6新语法

原型与原型链

BOM对象:浏览器对象模型

windew浏览器窗口(全局作用域)

navigator封装了浏览器信息

screen屏幕

locathion当前页面的URL信息

document当前页面,操作HTML的DOM文档树

history页面跳转

DOM树:文档对象模型

元素增删改查

表单

md5加密

JQurey:js的封装库,更少的js代码

基础常识

事件

冒泡

整体总结

需要去看的一些网站

javaScript和JQuery相关推荐

最新文章

热门文章

一个合格的后端人员,必须精通 JavaScript