今日内容详细
RegExp对象
// var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); // var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 正则校验数据 // var res=reg1.test('jason666') // true false // console.log(res); // 全局匹配 // var s1 = 'egondsb dsb dSb'; // var res1=s1.match(/s/gi); // g:global i:ignore // console.log(res1); // var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g // console.log(reg2.test('egondsb')); // console.log(reg2.test('egondsb')); // console.log(reg2.test('egondsb')); // // console.log(reg2.test('egondsb')); // // console.log(reg2.test('egondsb')); // console.log(reg2.lastIndex); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/ var res3 = reg2.test(); // reg2.test(undefined); console.log(res3); var reg3 = /undefined/; console.log(reg3.test())
Math对象
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数(底为e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。
JavaScript
真个JavaScript包括三部分:ECMAScript核心语法+DOM(操作一些文档:css、HTML)+BOM(浏览器相关的)
前端基础之BOM和DOM
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话” DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 # window对象 一些常用的Window方法: ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开新窗口 ● window.close() - 关闭当前窗口 """当你访问一个链接的时候,如果是通过浏览器访问的,请求头中会自动携带User-Agent参数,有了这个参数,说明此时来的请求是人访问的(浏览器访问的)""" 我们访问一个链接地址的时候,可以通过浏览器发起请求,还可以通过程序去访问啊 爬虫:我们使用程序去获取别人家网站上的数据就是爬虫,但是人家会愿意码?对方肯定有反爬机制,阻止不让你爬啊,其中一个方式就是限制请求方式'必须是浏览器访问' 当你访问别人家的网址的时候,人家会检测你的请求头中有没有这个参数:User-Agent参数 专业的爬虫:会Python、专业的爬虫库、爬虫框架、你得会很多的前端知识(懂数据过滤、清洗等) navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统 # history对象 history.forward() // 前进一页 history.back() // 后退一页 # location对象(重要) location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 # 弹出框 alert("你看到了吗?"); confirm("你确定吗?"); prompt("请在下方输入","你的答案");
计时相关
setTimeout() clearTimeout() setInterval() clearInterval() function func2() { alert(123) } function show() { let t = setInterval(func2, 3000); // 每隔3秒执行一次 function inner() { clearInterval(t) // 清除定时器 } setTimeout(inner, 9000) // 9秒中之后触发 } show()
DOM
DOM标准规定HTML文档中的每个成分都是一个节点(node): ● 文档节点(document对象):代表整个文档 ● 元素节点(element 对象):代表一个元素(标签) ● 文本节点(text对象):代表元素(标签)中的文本 ● 属性节点(attribute对象):代表一个属性,元素(标签)才有属性 ● 注释是注释节点(comment对象) JavaScript 可以通过DOM创建动态的 HTML: ● JavaScript 能够改变页面中的所有 HTML 元素 ● JavaScript 能够改变页面中的所有 HTML 属性 ● JavaScript 能够改变页面中的所有 CSS 样式 ● JavaScript 能够对页面中的所有事件做出反应 ## 学习js的方法 1. 先学习如何查找标签 2. 找到标签之后在进行操作标签 ## 先学注释 // /**/ ## 查找标签 直接查找: id查找、class查找、标签查找 document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集 ## 间接查找 parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素 ## 节点操作 创建img标签 var img = document.createElement('img'); // <img> var div = document.getElementById('d1'); // 增加属性 img.src='234.png'; img.alt='哈哈哈' img.id='img1'; // img.username='jerry'; // 如果是点语法,只能够增加自带的属性,自定义的属性不能增加 img.setAttribute('username', 'kevin'); // 设置自定义属性的时候用setAttribute // 获取一个属性 console.log(img.getAttribute('username')) // 删除 img.removeAttribute('username'); // 把图片放到div中 div.appendChild(img); console.log(img); // 创建一个a标签出来 // 创建a标签 var a = document.createElement('a'); // <a></a> var div = document.getElementById('d1'); // 增加属性 a.href='http://www.baidu.com';// <a href='http://www.baidu.com'></a> a.title='点我解解困把';// <a href='http://www.baidu.com' title='点我解解困把'></a> a.setAttribute('username',' aaa'); a.getAttribute('username') // 增加文本内容 // a.innerText = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a> a.innerHTML = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a> console.log(a); div.appendChild(a); // 获取值操作 获取值操作 语法: elementNode.value 适用于以下标签: ● .input ● .select ● .textarea ● value不能获取文件数据,获取文件数据要用files // class的操作 className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true,否则返回false classList.toggle(cls) 存在就删除,否则添加 // 指定CSS操作 var div = document.getElementById('d1'); div.style.color = 'red'; div.style.fontSize='30px'; div.style.fontWeight='bolder'; // div.style.border='3px solid black'; // div.style.borderLeftWidth='3px' // div.style.borderLeftColor='black' // div.style.borderLeftStyle='solid' div.style.borderLeft='3px black solid';
事件
常用事件: onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习:输入框 onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击,使用的对象是form。
作业
1. 整理文档内容 2. 熟练练习课堂上的各种操作