WEB前端学习笔记-JavaScript-DOM 个人学习日记

001-DOM编程-获取文本框的value.html

获取文本框的value - 锐客网 ="text/javascript"> /* * 1、JavaScript包括三大块： *ECMAScript:JS的核心语法(ES规范/ECMA-262标准) *DOM:Document Object Model(文档对象模型，对网页当中的节点进行增删改的过程 *HTML文档被当做一棵DOM树来看待) *BOM：Browser Object Model(浏览器对象模型) *关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程 * 2、DOM和BOM的区别和联系？ *BOM的顶级对象是： window *DOM的顶级对象是： document *实际上BOM是包括DOM的！ */ /* window.onload = function(){ //var btnElt = window.document.getElementById("btn"); var btnElt = document.getElementById("btn"); alert(btnElt); //object HTMLInputElement } *//* window.onload = function(){ var btnElt = document.getElementById("btn"); btnElt.onclick = function(){ //获取username节点 var usernameElt = document.getElementById("username"); var username = usernameElt.value; alert(username); //alert(document.getElementById("username").value); //可以修改它的value //document.getElementById("username").value = "https://www.it610.com/article/zhangsan"; } } */ ="text/javascript"> window.onload = function(){ document.getElementById("setBtn").onclick = function(){ document.getElementById("username2").value = https://www.it610.com/article/document.getElementById("username1").value; } }

002-DOM编程-innerHTML和innerText操作div和span.html

DOM编程-innerHTML和innerText操作div和span - 锐客网 ="text/css"> #div1{ background-color: aqua; width: 300px; height: 300px; border: 1px black solid; position: absolute; top: 100px; left: 100px; } ="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ //设置div的内容 //第一步:获取div对象 var divElt = document.getElementById("div1"); //第二步：使用innerHTML属性来设置元素内部的内容 //divElt.innerHTML = "adsmior"; //divElt.innerHTML = "用户名不能为空" divElt.innerText = "用户名不能为空！" }}

003-DOM编程-关于正则表达式.html

DOM编程-关于正则表达式 - 锐客网 ="text/javascript"> /* * 1、什么是正则表达式，有什么用？ * 正则表达式:Regular Expression * 正则表达式主要用在字符串格式匹配方面 * * 2、正则表达式实际上是一门独立的学科，在java语言中支持，c语言中支持，JavaScript中也支持 * 大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等，目前使用 * 最多的是计算机编程领域，用作字符串格式匹配，包括搜索方面等 * * 3、正则表达式:对于我们JavaScript编程来说，掌握哪些内容呢? * 第一:常见的正则表达式符号要认识 * 第二:简单的正则表达式要会写 * 第三:他人编写的正则表达式要能看懂 * 第四:在JavaScript中，怎么创建正则表达式对象(new对象) * 第五：在JavaScript中，正则表达式对象有哪些方法(调方法) * 第六:要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性 * * 4、常见的正则表达式符号? * *.匹配除换行符以外的任意字符 *\w 匹配字母或数字或下划线或汉字 *\s 匹配任意的空白符 *\d 匹配数字 *\b 匹配单词的开始或结束 *^ 匹配字符串的开始 *$ 匹配字符串的结束 * ** 重复零次或更多次 *+ 重复一次或更多次 *? 重复零次或一次 *{n} 重复n次 *{n，} 重复n次或更多次 *{n，m} 重复n 到m 次 * *\W 匹配任意不是字母，数字，下划线，汉字的字符 *\S 匹配任意不是空白符的字符 *\D 匹配任意非数字的字符 *\B 匹配不是单词开头或结束的位置 *[^x] 匹配出了x以外的任意字符 *[^aeiou] 匹配除了aeiou这几个字母以外的任意字符 * *正则表达式当中的小括号()优先级较高 *[1-9] 表示1到9的任意1个数字 (次数是1次) *[A-Za-z0-9] 表示A-Za-z0-9中的任意一个字符 *[A-Za-z0-9-] 表示A-Z、a-z、0-9、-，以上所有字符中任意一个字符 * *|表示或者 * *5、简单的正则表达式要会写 *QQ号的正则表达式: ^[1-9][0-9]{4,}$ * *6、他人编写的正则表达式要能看懂? *email正则: ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ * *7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法? *第一种创建方式: *var regExp = /正则表达式/flags; *第二种创建方式:使用内置支持类RegExp("正则表达式"，"flags"); *var regExp = new RegExp("正则表达式","flags"); *关于flags: *g : 全局匹配 *i ：忽略大小写 *m ：多行搜索(ES规范制定之后才支持m) * *正则表达式对象的test()方法？ *true/false = 正则表达式对象test （用户填写的字符串 *true:字符串格式匹配成功 *false：字符串格式匹配失败 * */ window.onload = function(){ //给按钮绑定click document.getElementById("btn").onclick = function(){ var email = document.getElementById("email").value; var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var ok = emailRegExp.test(email); if(ok){ //合法 document.getElementById("emailError").innerText = "邮箱地址合法!" }else{ //不合法 document.getElementById("emailError").innerText = "邮箱地址不合法!" } } //给文本框绑定focus document.getElementById("email").onfocus = function(){ document.getElementById("emailError").innerText=""; } } = "emailError" style="color: red; font-size: 10px; ">

004-去除字符串的前后空白trim.html

去除字符串的前后空白trim - 锐客网 ="text/javascript"> //低版本的ie浏览器不支持trim函数怎么办？ //可自己对String类扩展一个全新的trim()函数 String.prototype.trim = function(){ //alert("扩展之后的trim方法") //去除当前字符串的前后空白 //在当前的方法中的this代表到的就是当前字符串 return this.replace(/^\s+|\s+$/,""); //return this.replace(/^\s+/,"").replace(/\s+$/,""); } window.onload = function(){ document.getElementById("btn").onclick = function(){ //获取用户名 var username = document.getElementById("username").value; //去除前后空白 username = username.trim(); //测试 alert("--->"+username+"<---"); } }

006-复选框的全选和取消全选.html

复选框的全选和取消全选 - 锐客网 ="text/javascript"> /* window.onload = function(){ var firstChk = document.getElementById("firstChk"); firstChk.onclick = function(){ //获取第一个复选框的选中状态(复选框对象checkbox对象) //alert(firstChk.checked); //根据name获取所有元素 var aihaos = document.getElementsByName("aihao"); if(firstChk.checked){ //全选 for(var i = 0; i < aihaos.length; i++){ aihaos[i].checked = true; } }else{ //取消全选 for(var i = 0; i window.onload = function(){ var aihaos = document.getElementsByName("aihao"); var firstChk = document.getElementById("firstChk"); firstChk.onclick = function(){ for(var i = 0; i 抽烟喝酒烫头

007-获取下拉列表的value.html

获取下拉列表的value - 锐客网 ="provinceList"> ="text/javascript"> window.onload = function(){ var provinceListElt = document.getElementById("provinceList") provinceListElt.onchange = function(){ //获取选中项的value alert(provinceListElt.value); } }

008-显示网页时钟.html

显示网页时钟 - 锐客网 ="text/javascript"> /* * 关于JS内置的支持类，Date 可以用来获取时间/日期 */ //获取系统当前时间 var nowTime = new Date(); //输出 //document.write(nowTime); //转换成具有本地语言环境的日期格式 nowTime = nowTime.toLocaleString(); document.write(nowTime); document.write(" "); document.write(" "); //当以上格式不是自己想要的，可以通过日期获取年月日等信息，自制日期格式 var t = new Date(); var year = t.getFullYear(); var month = t.getMonth(); var dayofweek = t.getDay(); var day = t.getDate(); document.write(year+"年"+(month+1)+"月"+day+"日"); document.write(" "); document.write(" "); //重点:怎么获取毫秒数?(从1970年1月1日00:00:00:000到当前系统时间的总毫秒数) //var times = t.getTime(); //document.write(new Date().getTime()); //一般会使用毫秒数当做时间戳（timestamp) document.write(new Date().getTime()); ="text/javascript"> function displayTime(){ var time = new Date(); var strTime = time.toLocaleString(); document.getElementById("timeDiv").innerHTML = strTime; }//每隔1秒调用displayTime()函数 function start(){ //从这行代码执行结束开始，则会不间断的每隔1000毫秒调用一次displayTime()函数 v = window.setInterval("displayTime()",1000); }function stop(){ window.clearInterval(v); }

009-内置支持类-Array.html

内置支持类Array - 锐客网 ="text/javascript"> /* // 创建长度为0的数组 var arr = []; alert(arr.length); //数据类型随意 var arr2 = [1,2,3,false,"adc",3.14]; alert(arr2.length); //下标会越界吗 arr2[7] = "test"; //自动扩容document.write(" "); //遍历 for(var i = 0; i < arr2.length; i++){ document.write(arr2[i]+ " ") } 另一种创建数组对象的方式 var a = new Array(); alert(a.length); //0var a2 = new Array(3); //3表示长度 alert(a2.length); var a3 = new Array(3,2); alert(a3.length); //2*/var a = [1,3,4,6]; var str = a.join("-"); alert(str); //"1-3-4-6"; //在数组的末尾添加一个元素(数组长度+1) a.push(10); alert(a.join("-")); //将数组末尾的元素弹出(数组长度-1) var endElt = a.pop(); alert(endElt); alert(a.join("-")); //注意:JS中的数组可以自动模拟栈数据结构，后进先出，先进后出原则 //push压栈 //pop弹栈//反转数组 a.reverse(); alert(a.join("-"));