JavaScript学习
关注
分享
扫一扫
记录JavaScript学习之路
工一木子
Talk is cheap,show me the code!
展开
-
30、前端小结及开发技巧分享
小技巧1.如果巩固JS（看优秀开源框架（jQuery等）源码，看游戏源码！）2.巩固HTML，css（扒网站，全部down下来，然后对应修改看效果）常用框架1.Layer弹窗组件layer2.Element-uielement-ui3.antant4.bootstrapbootstrap彩蛋1.有趣的源码之家（多看源码）可以在线，本地玩纯前端游戏，也可以研究源码2.如何模仿别人的一个前端，修修改改1）ctrl+s 另存为3.临时修改别人的 网站1）修改elem.原创 2021-09-19 17:56:10 · 96 阅读 · 0 评论 -
29、jQuery操作Dom元素
操作DOM节点文本操作$('#test-ul li[name=python]').text();//获得值$('#test-ul li[name=python]').text('设置值');//设置值$('#test-ul').html();//获得值$('#test-ul').html('<strong>hello</strong>');//设置值css的操作$('#test-ul li[name=python]').css({"color":"red"});.原创 2021-09-19 17:15:53 · 119 阅读 · 0 评论 -
28、jQuery事件
事件鼠标事件，键盘事件，其他事件代码show<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title><!-- <script src="lib/jquery-3.6.0.min.js"></script>--> .原创 2021-09-19 16:41:40 · 85 阅读 · 0 评论 -
27、jQuery选择器
选择器<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //原生js，选择器少，麻烦不好记 //标签 .原创 2021-09-19 16:15:14 · 92 阅读 · 0 评论 -
26、初识jQuery及公式
10、jQueryJavaScriptjQuery库， 里面存在大量的JavaScript函数获取jQuery1）官网官网2)cdn获取jQuery参考复制标签,粘贴到html文件中<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <原创 2021-09-19 16:04:13 · 141 阅读 · 0 评论 -
25、表单提交验证及前端密码MD5加密
提交表单。 md5加密密码，表单优化<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- MD5工具类--> <script src="https://cdn.bootcss.com/blueimp-md.原创 2021-09-19 15:24:21 · 508 阅读 · 0 评论 -
24、获得和设置表单的值
9、操作表单（验证）表单是什么 form DOM树文本框 text下拉框 单选框 radio多选框 checkbox隐藏域 hidden密码框 password…表单的目的：提交信息获得要提交的信息<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>原创 2021-09-19 12:50:14 · 122 阅读 · 0 评论 -
23、创建和插入DOM节点
插入节点我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点已经存在元素了，我们就不能这么干了，会产生覆盖追加<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &.原创 2021-09-16 14:16:23 · 137 阅读 · 0 评论 -
22、删除DOM节点
删除节点删除节点的步骤：先获取父节点，再通过父节点删除自己<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="father"> <.原创 2021-09-14 13:35:05 · 335 阅读 · 0 评论 -
21、更新DOM节点
更新节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id ="id1"></div> <script> var id1 = document.getElement.原创 2021-09-14 13:22:16 · 186 阅读 · 0 评论 -
20、获得DOM节点
8、操作DOM对象（重点）核心浏览器网页就是一个DOM树形结构更新：更新DOM节点遍历DOM节点：得到DOM节点删除：删除一个DOM节点添加：添加一个新的节点要操作一个DOM节点，就必须要先获得这个DOM节点获得DOM节点<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</原创 2021-09-14 08:51:39 · 108 阅读 · 0 评论 -
19、操作BOM对象
7、操作BOM对象（重点）浏览器介绍JavaScript和浏览器关系？JavaScript诞生就是为了能够让他在浏览器中运行！BOM：浏览器对象模型IE 6-11ChromeSafariFireFoxOpera-小众三方QQ浏览器360浏览器window【重要】window代表浏览器窗口window.alert(1)undefinedwindow.innerHeight150window.innerWidth952window.outerHeight原创 2021-09-14 08:14:32 · 127 阅读 · 0 评论 -
18、面向对象class继承
class 继承class关键字，是在ES6引入的未引入前的方法扩展：function Student(name) { this.name = name;}//给Student新增一个方法Student.prototype.hello = function() { alert('hello');};new Student('hh').hello()引入后的方法扩展：1.定义一个类，属性，方法//ES6之后====================//定义一个学生的.原创 2021-09-13 08:33:10 · 93 阅读 · 0 评论 -
17、面向对象原型继承
6、面向对象编程6.1、什么是面向对象原型对象JavaScript，Java，C#…都是面向对象的语言，JavaScript有哪些区别呢？类：模板 原型对象对象：具体的实例在JavaScript中，这个需要大家换一下思维方式原型：var Student = { name:"gongyi", age:3, run: function() { console.log(this.name + " run...."); } };var xiaomi原创 2021-09-13 08:31:09 · 70 阅读 · 0 评论 -
16、JSON对象
5.2、JSONjson是什么早期，所有数据传输习惯使用xml文件！JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。在JavaScript中一切皆为对象，任何js支持的类型都可以用json来表示；number，string…格式：对象都用{}数组都用[]所有的键值对，都使用key:val原创 2021-09-12 18:38:34 · 74 阅读 · 0 评论 -
15、Date日期对象
5、内部对象标准对象typeof 123'number'typeof '123''string'typeof true'boolean'typeof NaN'number'typeof []'object'typeof {}'object'typeof Math.abs'function'typeof undefined'undefined'5.1、Date基本使用var now = new Date();//Sun Sep 12 2021 18:14:22 G原创 2021-09-12 18:15:44 · 137 阅读 · 0 评论 -
14、方法的定义和调用、apply
4.3、方法定义方法方法就是把函数放在对象的里面，对象只有两个东西：属性和方法var gongyi = { name : '工一', birth : 1998, //方法 age: function() { //今年-出生的年 var now = new Date().getFullYear(); return now - this.birth; }}//属性gongyi.name//方法，一定要带()原创 2021-09-12 17:48:04 · 79 阅读 · 0 评论 -
13、变量的作用域、let、const详解
4.2、变量的作用域在JavaScript中，var定义变量实际上是有作用域的。假设在函数体中声明，则在函数体外不可以使用（非想要实现的话，后面可以研究一下"闭包"）function gy() { var x = 1; x = x + 1;}x = x + 2;//Uncaught ReferenceError: x is not defined如果两个函数使用了相同的变量名，只要在函数内部，就不冲突function gy() { var x = 1; x =原创 2021-09-12 17:29:54 · 69 阅读 · 0 评论 -
12、函数的定义和参数获取
4、函数4.1、定义函数定义方式一绝对值函数function abs(x) { if(x >0) { return x; } else { return -x; }}一旦执行到return代表函数结束，返回结果如果没有执行return，函数执行完也会返回结果，结果就是undefined或者NaN定义方式二var abs = function(x) { if(x >0) { return原创 2021-09-12 13:31:24 · 101 阅读 · 0 评论 -
11、Iterable迭代
3.6、Iteratores6新特性使用iterator来遍历迭代数组，map，set遍历数组//通过for of / for in 下标var arr = [3,4,5]for(var x of arr) { console.log(x)}遍历mapvar map = new Map([["tom",100],["jack",90],["michael",80]])for(let x of map) { console.log(x)}遍历setvar se原创 2021-09-12 12:07:48 · 127 阅读 · 0 评论 -
10、Map和Set集合
3.5、Map和SetES6的新特性！Map//ES6 Map//学生的成绩，学生的名字//var names = ["tom","jack","michael"];//var scores = [100,90,80];var map = new Map([['tom',100],['jack',90],['michael',80]]);var name = map.get("tom");//通过key获得valuemap.set('admin',123456);//新增或者修改原创 2021-09-12 11:46:16 · 63 阅读 · 0 评论 -
9、分支和循环详解
3.4、流程控制if 判断var age = 3;if(age > 3) {//第一个判断 alert("haha");} else if(age < 5) {//第二个判断 alert("kuwa`");} else {//否则 alert("other");}while循环，避免程序死循环while(age < 100) { age = age + 1; console.log(age);}do{ age = age原创 2021-09-12 11:32:16 · 100 阅读 · 0 评论 -
8、对象类型详解
3.3、对象若干个键值对var 对象名 { 属性名:属性值, 属性名:属性值, 属性名:属性值, 属性名:属性值, ... 属性名:属性值} //定义了一个person对象，它有4个属性var person = { name:"gongyi", age:21, email:"1072805311@qq.com", score:100}js中对象，{…}表示一个对象，键值对描述属性xxxx:xxxx,多个属性之间使原创 2021-09-12 11:18:09 · 210 阅读 · 0 评论 -
7、数组类型详解
3.2 、数组Array可以包含任意的数据类型var arr = [1,2,3,4,5,6];//通过下标取值和赋值arr[0]arr[0] = 11.长度arr.length注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失2.indexOf,通过元素获得下标索引arr.indexOf(2)1字符串的"1"和数字的1是不同的3.slice()截取Array的一部分，返回一个新的数组，类似于String中的substring（）4.pus原创 2021-09-12 00:08:26 · 124 阅读 · 0 评论 -
6、字符串类型详解
3、数据类型3.1、 字符串1.正常字符串我们使用单引号，或者双引号包裹2.注意转义字符\\'\n\t\u4e2d \u#### Unicode字符\x41 ASCII字符 3.多行字符串编写//tab键上面 esc键下面var msg = `helloworld 你好呀你好`4.模板字符串let name = "gongyi";let age = 23;let msg = `你好呀，${name}`5.字符串长度str.length6.字符串原创 2021-09-11 23:07:17 · 451 阅读 · 0 评论 -
5、严格检查模式strict
2.4、严格检查格式代码show<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IDEA需要设置支持ES6语法 'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题 必须原创 2021-09-11 22:37:43 · 285 阅读 · 0 评论 -
4、数据类型快速浏览
2.3、数据类型数值，文本，图形，音频，视频…变量var 王者荣耀="倔强青铜";var a = "gongyi";numberjs不区分小数和整数，Number123//整数123123.1//浮点数，123.11.123e3//科学计数法-99//负数NaN// not a numberInfinity//表示无限大字符串‘abc’ “abc”布尔值true ,false逻辑运算&& 两个都为真，结果为真|| 一个为真原创 2021-09-11 22:26:05 · 68 阅读 · 0 评论 -
3、浏览器控制台使用
2.2、基本语法入门<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //1. 定义变量 变量类型 变量名 = 变量值;原创 2021-09-10 07:40:59 · 2682 阅读 · 0 评论 -
2、基本使用及HelloWorld
2、快速入门2.1、 引入JavaScript1、内部标签<script> alert("Hello World!");</script>2、外部引入gy.jsalert("Hello World from external js file!");1.我的第一个JavaScript程序.html<script src="js/gy.js"></script>代码show<!DOCTYPE html><ht原创 2021-09-10 07:38:34 · 109 阅读 · 0 评论 -
1、聊聊JavaScript这个东西
1、什么是JavaScript1.1、概述JavaScript是一门世界上最流行的脚本语言。Java与JavaScript关系：可以说除了名字，毫无关系一个合格的后端人员，必须要精通JavaScript1.2、 历史https://blog.csdn.net/kese7952/article/details/79357868ECMAScript它可以理解为是JavaScript的一个标准最新版本已经到es6版本但是大部分浏览器还只停留在支持es5代码上开发环境—线上环境，版本不一致.原创 2021-09-10 07:36:35 · 75 阅读 · 0 评论