计算机基础知识45

JS的RegExp对象(正则)

text: 正则校验数据         # T/F

match: 匹配     #  (3) ['s', 's', 's']

//定义
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');
console.log(res);
//全局匹配
var s1 = 'egonsb dsb dsb';
var res1 = s1.match(/s/);    //第一个s的位置
var res2 = s1.match(/s/g);    //大小写都能匹配
var res3 = s1.match(/s/gi);    //i:忽略大小写
console.log(res1);
console.log(res2);
console.log(res3);

JS的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)      返回角的正切。

前端基础之BOM和DOM

# JavaScript包括三部分：

         ECMAScript核心语法+DOM(操作一些文档：css、HTML)+BOM(浏览器相关的)

# BOM(Browser Object Model)是指浏览器对象模型，它使 JS 有能力与浏览器进行“对话”
   DOM(Document Object Model)是指文档对象模型，通过它可以访问HTML文档的所有元素

BOM之window对象

# 所有浏览器都支持 window 对象。它表示浏览器窗口

# 一些常用的Window方法：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口

# 当你访问一个链接的时候，如果是通过浏览器访问的，请求头中会自动携带User-Agent参     数，有了这个参数，说明此时来的请求是人访问的(浏览器访问的)

# 我们访问一个链接地址时，可以通过浏览器发起请求，还可以通过程序去访问 

# window的子对象:

           navigator对象\screen对象\history对象\location对象\弹出框\计时相关

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度

history.forward()  // 前进一页
history.back()  // 后退一页

location.href  //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面

#  弹出框: 警告框、确认框、提示框

alert("你看到了吗？");    //警告框经常用于确保用户可以得到某些信息
confirm("你确定吗？")    //确认框用于使用户可以验证或者接受某些信息
prompt("请在下方输入","你的答案")    //提示框经常用于提示用户在进入页面前输入某个值

# 计时相关:

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

# 案例：计时器+弹出框

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 能够对页面中的所有事件做出反应

DOM之查找标签

直接查找：

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

间接查找：

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

DOM之节点操作

1、 创建节点/添加节点/删除节点/属性节点

# 创建img标签：

    宇宙山河烂漫 人间点滴温暖都值得我前进

# 创造a标签：

2、 获取值操作语法：elementNode.value

   适用于以下标签：

             .input / .select / .textarea / value不能获取文件数据，获取文件数据要用files

var iEle = document.getElementById("i1");
console.log(iEle.value);

3、指定CSS操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

DOM之事件

# 常用事件：

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。    
//应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。  
//应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown      某个键盘按键被按下。   
//应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

# 方式1：this是实参，表示触发事件的当前元素，函数定义过程中的ths为形参

点我

# 方式二：用的多

点我

事件示例--开关灯

  
  
  
  
  
  
  
  
  

  变色

  
  
  

事件示例--input事件

定时器示例

    
    
    



开始
结束

标题

1、

2、

3、

标题

1、

2、

3、