搜索到
94
篇与
的结果
-
操作表单（验证） 表单的目的：提交信息获得要提交的信息<form action="post"> <p> <span>用户名：</span><input type="text" id="username"> </p> <!--多选框的值就是定义好的value--> <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'), boy_radio = document.getElementById('boy'), girl_radio = document.getElementById('girl'); //得到输入框的值 input_text.value; //修改输入框的值 input_text.value = 'test'; //对于单选框、多选框等，只能取到固定的值,例如：value boy_radio.value ---> man boy_radio.checked; //查看返回的结果，如果为true，则被选中，否则反之 girl_radio.checked = true; //赋值（当前选中的性别修改为女） </script>提交表单<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--md5工具类--> <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <!-- 表单绑定提交事件 onsubmit 绑定一个提交检测的函数，true false 将这个结果返回给表单，使用onsubmit接收 --> <form action="" method="post" onsubmit="return test()"> <p> <span>用户名：</span><input type="text" name="username" id="username"> </p> <p> <span>密码：</span><input type="password" id="input-password"> </p> <input type="hidden" name="password" id="md5-pwd"> <button type="submit">提交</button> </form> <script> function test() { var uname = document.getElementById('username'), pwd = document.getElementById('input-password'), md5pwd = document.getElementById('md5-pwd'); //md5加密，同时通过hidden表单优化password框 md5pwd.value = md5(pwd.value); //校验表单内容，true通过，false阻止提交 return true; } </script> </body> </html>md5加密及表单优化：补充说明：1、通过md5加密提交的数据2、设置隐藏的input提交密码，优化用户体验，即：md5pwd.value = md5(pwd.value);将提交的password值赋值给隐藏的(hidden)input框，具体表现为：用户点击提交时，密码框中的字符串在页面跳转时不会突然变长 -
操作DOM对象 核心浏览器网页就是一个Dom树形结构更新：更新Dom节点遍历：得到Dom节点删除：删除一个Dom节点添加：添加一个新的节点注：要操作一个Dom节点，必须先获得这个Dom节点获得DOM节点var h1 = document.getElementsByTagName('h1'); var p1 = document.getElementById('test01'); var p2 = document.getElementsByClassName('test02'); var father = document.getElementById('father'); var childrens = father.children[index]; //获取父节点下的子节点 //father.firstChild;更新节点<div id="test"> </div> <script> var test = document.getElementById('test'); </script>操作文本test.innerText='abc' //修改文本的值 test.innerHTML='<strong>abc</strong>' 解析HTML文本标签操作JStest.style.color = 'red'; //属性使用字符串包裹 test.style.fontSize = '18px'; // font-size 转 fontSize驼峰命名 test.style.padding = '2em';删除节点步骤：先获取父节点，再通过父节点删除自己<div id="father"> <h1>标题</h1> <p id="test01">xxx</p> <p class="test02">xxxxx</p> </div> <script> var self = document.getElementById('test01'); var father = test01.parentElement; father.removeChild(self); </script>注：删除多个节点的时候，children是动态变化的插入节点在获得DOM节点时，如果这个节点已经存在元素，就不能再使用innerHTML操作，会产生覆盖。追加：<p id="test01">数学</p> <div id="list"> <p id="test02">语文</p> <p id="test03">英语</p> <p id="test04">美术</p> </div> <script> var test01 = document.getElementById('test01'), list = document.getElementById('list'); list.appendChild(test01); </script>追加前：追加后：创建一个新的标签实现插入var test01 = document.getElementById('test01'), list = document.getElementById('list'), //通过js创建一个新的节点 test05 = document.createElement('p'); //创建一个p标签 test05.id = 'test05'; test05.innerText = '体育'; list.appendChild(test05) //list.appendChild(test01); //创建一个标签节点 var script = document.createElement('script'); script.setAttribute('type','text/javascript'); list.appendChild(script); //创建一个style标签 var style = document.createElement('style'); //创建一个style标签 style.setAttribute('type','text/css'); style.innerHTML = 'body{background-color: yellow}'; //设置标签内容 document.getElementsByTagName('head')[0].appendChild(style);insertBeforevar test01 = document.getElementById('test01'); var test02 = document.getElementById('test02'); var list = document.getElementById('list'); //要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(test01,test02);
-
操作BOM对象 Browser Object Model：浏览器对象模型windowwindow代表浏览器窗口window.alert("Hello World") undefined window.innerHeight 906 window.innerWidth 559 ……Navigator（不建议使用）Navigator封装了浏览器的信息navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.platform "Win32" ……注：一般情况下不使用navigator,存在被人为修改的隐患screen代表屏幕规格screen.width 1920 screen.height 1080locationlocation代表当前页面的URL信息host:"www.bing.com" href:"https://www.bing.com" protocol:"https:" reload:ƒ reload() //重新加载，刷新网页 //设置新的地址 location.assign('https://xxx.com')documentdocument代表当前的页面，HTML DOM文档树获取具体的文档树节点<dl id="test"> <dt>JavaScript</dt> <dd>demo01</dd> <dd>demo02</dd> </dl> <script> var dl = document.getElementById('test'); </script>获取cookiedocument.cookie劫持cookie原理：通过js恶意代码在服务器端可以设置cookie：httpOnlyhistory（不建议使用）history代表浏览器的历史记录history.back() //后退 history.forward() //前进
-
面向对象编程（JavaScript） 原型对象var Student = { name: "孙笑川", age: 33, run:function () { console.log(this.name + "run ...") } } var sun = { name: "sun" } //原型对象 sun.__proto__ = Student;function Student(name){ this.name = name; } //给Student新增一个方法 Student.prototype.hello = function () { alert("hello") }class 继承classs关键字在ES6引入1、定义一个类class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } var sun = new Student("sun"); sun.hello()2、继承class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } class highStudent extends Student{ constructor(name,score){ super(name); this.score = score; } myScore(){ alert("100分！") } } var sun = new highStudent("sun",100);本质：查看对象原型原型链
-
内部对象（JavaScript） 标准对象typeof 123 "number" typeof '123' "string" typeof NaN "number" typeof true "boolean" typeof [] "object" typeof {} "object" typeof Math.abs "function" typeof undefined "undefined"1.1 Date基本使用var now = new Date(); now.getFullYear(); //年 now.getMonth(); //月 now.getDate(); //日 now.getDay(); //星期几 now.getHours(); //时 now.getMinutes(); //分 now.getSeconds(); //秒 now.getTime(); //时间戳，从1970-01-01 0:00:00到现在的毫秒数（全世界统一） console.log(new Date(1607479949417)); //时间戳转为当前时间转换now.toLocaleString //此处调用的是一个方法 ƒ toLocaleString() { [native code] } now.toLocaleString() "2020/12/9 上午10:16:59" now.toGMTString() "Wed, 09 Dec 2020 02:16:59 GMT"1.2 JSONjson是什么是一种轻量级的数据交换格式层次结构简洁清晰易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率格式：对象都用 {}数组都用 []所有的键值对都用 key:valuejson字符串和js对象的转化：var user = { name: "孙笑川", age: 33, sex: '男' } //对象转化为json字符串 {"name":"孙笑川","age":33,"sex":"男"} var jsonUser = JSON.stringify(user); //json字符串转化为对象 参数为json字符串 var obj = JSON.parse('{"name":"孙笑川","age":33,"sex":"男"}');1.3 Ajax原生的js写法 xhrJQuery封装好的方法 $("name").ajax("")axios 请求
-
函数（JavaScript） 1.1 定义函数定义方式一绝对值函数function test(x){ if(x>=0){ return x; }else{ return -x; } } //一旦执行到return代表函数结束，返回结果 //如果没有执行return，函数执行完也会返回结果undefined定义方式二var test = funxtion(x){ //匿名函数，可以把结果赋值给test，通过test调用函数 if(x>=0){ return x; }else{ return -x; } }调用函数test(10); //10 test(-10); //10参数问题：Javascript可以传任意个参数，也可以不传参数假设不存在参数，如何规避？var test = function (x) { //手动抛出异常来进行判断 if(typeof x!== 'number'){ throw 'Not a number'; } if (x>=0){ return x; }else { return -x; } }arguments代表传递进来的所有参数是一个数组var test = function (x) { console.log("x:"+x); for (var i = 0; i<arguments.length; i++){ console.log(arguments[i]); } if (x>=0){ return x; }else { return -x; } }arguments存在的问题：当需要使用多余的参数来进行附加操作时，需要排除已有的参数restES6之前的用法if(arguments.length>2){} for (var i = 2; i<arguments.length; i++){ ...... } }ES6引入的新特性，获取除了已定义的参数之外的所有参数function test(a,b,...rest) { console.log("a:"+a); console.log("b:"+b); console.log(rest); }rest只能写在最后面，必须用 ...rest 标识1.2 变量的作用域function test() { var x = 1; x = x + 1; } x = x + 2; //Uncaught ReferenceError: x is not defined变量x在函数体中声明，在函数体外不可以使用如果两个函数使用的相同的变量名，只要在函数内部，就不冲突内部函数可以使用外部函数的成员，反之不行function test() { var x = 1; function test1() { var y = x + 1; //2 } var z = y + 1; //Uncaught ReferenceError: x is not defined }假设内部函数变量和外部函数变量重名function t() { var x = 1; function t1() { var x = '大写的一'; console.log('inner:'+x); //inner:大写的一 } console.log('outer:'+x); //outer:1 t1(); } t();注：函数查找变量从自身函数开始，由”内“向”外“查找，如果外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量提升变量的作用域function t(){ var x = "abc" + y; console.log(x); var y = 'y'; }结果会报错：x undefinedjs执行引擎自动提升了y的声明，但是没有提升变量y的赋值function t(){ var y; var x = "abc" + y; console.log(x); y = 'y'; }注：所有的变量定义都放在函数的头部，便于代码维护全局函数//全局变量 var x = 1; function t(){ console.log(x); //1 } t(); console.log(x); //1全局对象windowvar x = 123; alert(x); alert(window.x); //默认所有的全局变量，都会自动绑定在winsow对象下alert() 这个函数本身也是一个window变量var x = '123'; window.alert(x); var old_alert = window.alert; window.alert = function (){ } window.alert(123); //失效 //恢复 window.alert = old_alert; window.alert(456);JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），如果没有在函数作用范围内找到，就会向外查找，如果在全局作用域中也没有找到，会报错ReferenceError。规范//唯一全局变量 var test = {}; //定义全局变量 test.name = '孙笑川'; test.add = function (a,b) { return a + b; }把自己的代码全部放入自己定义的唯一空间空间名字中，降低全局命名冲突的问题局部作用域 letfunction t() { for (var i = 0; i < 100; i++){ console.log(i); } console.log(i); //101 }ES6引入let关键字，解决局部作用域冲突问题function t() { for (let i = 0; i < 100; i++){ console.log(i); } console.log(i); //Uncaught ReferenceError: i is not defined }常量 const在ES6之前，全部用大写字母命名的变量就是常量var PI = '3.14'; console.log(PI); //3.14 PI = 'abc'; console.log(PI); //abc，值改变在ES6中引入关键字constconst PI = '3.14'; console.log(PI); PI = 'abc'; //TypeError: Assignment to constant variable console.log(PI);1.3 方法定义方法//将函数放在对象中 var test = { name: 'sun', birth: 1988, //方法 age: function () { var time = new Date().getFullYear(); return time-this.birth; } } //属性 test.name //调用方法 test.age()this代表什么？function getAge() { var time = new Date().getFullYear(); return time-this.birth; } var test = { name: 'sun', birth: 1988, age: getAge } test.age() //2020-1988 getAge() //NaNthis是无法指向的，默认指向调用它的对象apply在js中控制this的指向function getAge() { var time = new Date().getFullYear(); return time-this.birth; } var test = { name: 'sun', birth: 1988, age: getAge } getAge.apply(test,[]); //this指向了test，参数为空
-
数据类型（JavaScript） 1.1 字符串1、正常字符串使用单引号或双引号包裹2、转义字符 \\' \n \t \u4e2d \u#### Unicode编码 \x41 AscII码3、多行字符串<script> 'use strict' var msg = ` hello world test` </script>4、模板字符串<script> 'use strict' let name = "孙笑川"; let age = 30; let mgs = `你好,${name}` </script>5、字符串长度console.log(str.length)6、字符串的可变性，不可变7、大小写转换str.toUpperCase(); //大写 str.yoLowerCase(); //小写8、student.indexOf('t'); //在student字符串中，t是第几个元素 //第1个9、substring[a,b) //a <= str < b student.substring(1); //从第一个字符串截取到最后一个字符串 student.substring(1，3); //[1,3) 1.2 数组Array可以包含任意的数据类型var arr = [1,2,3,4,5,6]; //通过下边元素取值和赋值 arr[0]; arr[0] = 1;1、长度arr.length注：如果给arr.length赋值，数组的大小就会发生变化，如果赋值过小，数组里原本的元素就会丢失2、indexOf，通过元素获得下标索引arr.indexOf(2);注：字符串的"1"和数字 1 是不同的3、slice() 截取Array的一部分，返回一个新的数组，用法类似于substring4、push()、pop() 尾部push：压入元素到尾部 pop：弹出尾部的元素5、unshift()、shift() 头部unshift：压入元素到头部 shift：弹出头部的元素6、排序 sort()arr (3) [2, 1, 3] arr.sort() (3) [1, 2, 3]7、元素反转 reverse()8、拼接 concat()(3) [3, 2, 1] arr.concat(["A","B","C"]) (6) [3, 2, 1, "A", "B", "C"] arr (3) [3, 2, 1]注：concat()并没有修改原来的数组，只是返回了一个新的数组9、连接符 joinarr (3) [3, 2, 1] arr.join('-') "3-2-1"打印拼接数组，使用特定的字符串连接10、多维数组arr = [[1,2],[3,4],[5,6]]; arr[1][0] 31.3 对象var 对象名 = { 属性名：属性值, 属性名：属性值, 属性名：属性值 } var person = { name:"sun", age:3, address:"kunming" }在js中，{……}表示一个对象，以键值对的形式描述属性 xxx:xxx，每一个属性末尾以逗号隔开，最后一个属性不加逗号==JavaScript中所有的键都是字符串，值是任意对象==1、对象赋值person.name = "yaoshui" "yaoshui" person.name "yaoshui"2、使用一个不存在的对象属性，不会报错person.email undefined3、动态的删减属性 deletedelete person.name true person4、动态的添加，直接给新的属性添加值即可person.email = "xxx@qq.com"; "xxx@qq.com" person5、判断属性值是否在对象中 xxx in xxx'age' in person true //继承 'toString' in person true6、判断一个属性是否是对象本身就存在的person.hasOwnProperty('toString') false person.hasOwnProperty('age') true1.4 流程控制if判断var age = 3; if(age)>3{ alert("哈哈"); }else { alert("哭哭"); }while循环，避免程序死循环var age = 3; while(age<100){ age = age +1; console.log(age); }for循环for(let i = 0; i < 100; i++){ console.log(i); }forEach循环ES5.1引入var age = [1,2,3,4,5]; //函数 age.forEach(function(value){ console.log(value); })for...in<script> 'use strict' var age = [1,2,3,4,5,6]; /* * for(Type str:el) java * for(var index in object){} javascript */ for (var num in age){ if (age.hasOwnProperty(num)){ console.log(age[num]); } } </script>1.5 Map和SetES6的新特性1、Map<script> 'use strict' //ES6 //统计学生成绩、名字 // var name = ["孙笑川","药水哥","Giao哥"]; // var score = [100,99,98]; var map = new Map([['孙笑川',100],["药水哥",99],["Giao哥",98]]); var name = map.get("孙笑川"); //通过key获得value map.delete("药水哥"); //删除 map.set("admin",101); //新增或修改 console.log(name); </script>2、Set：无序不重复的集合set.add(2); //添加 set.delete(1); //删除 console.log(set.has(3)); //是否包含某个元素1.6 iteratorES6新特性1、遍历数组//通过for of实现便利数组 //for in是打印输出下标 var arr = [1,2,3,4]; for (let values of arr){ console.log(values); }2、遍历Mapvar map = new Map([['孙笑川',100],["药水哥",99],["Giao哥",98]]); for (let values of map){ console.log(values); }3、遍历Setvar set = new Set([3,1,7,7,9,7]); for (let values of set){ console.log(values); }
-
JavaScript快速入门 1.1 引入JavaScript1、内部标签<script> //…… </script>2、外部引入test.js//……test.html<script src="js/test.js"></script>测试代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script> alert('Hello World'); </script> --> <!--外部引入 注意：script标签必须成对出现，不能写成自闭和标签的形式 --> <script src="js/test.js"></script> <!--JavaScript不用显示定义，也默认是JavaScript类型--> <script type="text/javascript"></script> </head> <body> </body> </html>1.2 基本语法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 1.定义变量 变量类型 变量名 = 变量值; var num = -1; //alert(num); // 2.条件控制 if (num>1){ alert("true"); }else { alert("false"); } // console.log(num); 在浏览器的控制台打印变量 </script> </head> <body> </body> </html>浏览器调试：1.3 数据类型数值，文本，图形，音频，视频……==变量==var person = 1;==number==js不区分小数和整数，Number123 //整数 123.1 //小数 1.123e //科学计数法 -99 //负数 NaN //not a number Infinity //表示无限大==字符串=='abc' "abc"==布尔值==true，false==逻辑运算==&& 两个都为真，结果为真 || 一个为真，结果为真 ! 取反==比较运算符=== 赋值 == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型一样，值一样，结果为true）这是js的一个缺陷注：NaN===NaN --->false，NaN与所有的数值都不相等，包括自己只能通过isNaN(NaN)来判断这个数是否是NaN浮点数问题:console.log((1/3)===(1-2/3)); --->false尽量避免使用浮点数进行运算，存在精度问题==null和undefined==null 空undefined 未定义==数组==在Java中数值必须是相同类型的对象，而js中不需要这样~//保证代码的可读性，尽量使用[] var arr = [1,2,3,null,'hello',false];数组中，如果取的数组下标越界，控制台会提示undefined==对象==定义数组是中括号[]，对象是大括号{}~//Person p = new Person(1,2,3……) var person = { name: '孙笑川', age: 30, tags:['Java','js','css','...'] }每个属性之间使用逗号隔开，末尾不需要逗号取值：person.name > "孙笑川" person.age > 301.4 严格检查模式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IDEA需设置支持ES6语法 'use strict'; 严格检查模式，预防JavaScript的随意性产生的一些问题 且需写在JavaScript的第一行 局部变量建议都使用let去定义 --> <script> 'use strict'; //局部变量 let i = 1; //ES 6 </script> </head> <body> </body> </html>
