regexp对象、math对象、dom、bom、事件

发布时间 2023-07-21 20:50:50作者: Py玩家

RegExp对象

JS定义正则的两种方式

  var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); 第一种定义方式

  var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ 第二种定义方式

正则数据校验

.test(‘数据’):匹配数据是否正确,匹配的位数超过正则的位数或者等于正则位数为ture,没有到达正则匹配的位数则是flase

案列

   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
    var res = reg2.test('js88888888888888')
    console.log(res);

全局匹配

.match(正则表达式)只配一个 ,以数组形式返回

.match(/正则表达式/gi)g:global全局搜索,i:ignore忽略大小写,全部匹配以数组形式返回

案列

 var res='hahahhAhah'
    var reg=res.match(/a/)[0]
    var reg1=res.match(/a/gi)
    console.log(reg1)

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

案例

    var m='-18'
    console.log(Math.abs(m))
    console.log(Math.exp(3))
    console.log(Math.floor(4.9))
    console.log(Math.pow(4,9))

前端基础DOM和BOM

js的三部分组成:
ECMAScript、BOM(浏览器对象模型,就是js操作浏览器)、DOM(文档对象模型,js操作html文档、css样式等)
BOM:大部分内容作为了解
DOM:需要熟练掌握

window对象常用方法:
  window.innerHeight - 浏览器窗口的内部高度
  window.innerWidth - 浏览器窗口的内部宽度
  window.open() - 打开新窗口
  window.close() - 关闭当前窗口

案列

    var res=window.innerHeight
    console.log(res)
    var res1=window.innerWidth
    console.log(res1)
    window.open('http://www.baidu.com')
    window.close()

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

案例

<script>
    console.log(navigator.appName)
    console.log(navigator.appVersion)
    console.log(navigator.userAgent)
    console.log(navigator.platform)

</script>

history对象(了解即可)
  history.forward() // 前进一页
  history.back() // 后退一页

location对象------------------->掌握重要

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

弹出框
  alert("你看到了吗?");
  confirm("你确定吗?")
  prompt("请在下方输入","你的答案")

计时相关(定时器)

var t=setTimeout(JS代码, 毫秒)

var t=setInterval(JS代码, 毫秒)

  function f1(){
      console.log('123')
  }
  var t1 = setTimeout(f1, 3000);  // 单位是毫秒,意思是3秒之后开始执行任务, 只执行一次
 var t=setInterval(f1, 3000);
// 单位是毫秒,意思是3秒之后开始执行任务, 每隔三秒执行一次
  clearTimeout(t1)//清除定时器

案例

<script>
    function f(){
      alert('123')
    }
    function f2(){
        var t=setInterval(f,3000)//制作定时器
        function innr(){
            clearInterval(t)//清除定时器
        }
        setTimeout(innr,9000) //9秒后执行清除定时器
    }
    f2()

</script>

DOM(重点)

DOM标准规定HTML文档中的每个成分都是一个节点(node):
  文档节点(document对象):代表整个文档
  元素节点(element 对象):代表一个元素(标签)
  文本节点(text对象):代表元素(标签)中的文本
  属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML:
  JavaScript 能够改变页面中的所有 HTML 元素
  JavaScript 能够改变页面中的所有 HTML 属性
  JavaScript 能够改变页面中的所有 CSS 样式
  JavaScript 能够对页面中的所有事件做出反应

js如何学习
1. 先学习如何查找标签
2. 找到标签之后再对其做一些操作

先学习如何查找标签
直接查找
id、class、标签
js如何查找标签、

<script>
var d=document.getElementById('d1')//通过id属性查找
console.log(d)
var d1=document.getElementsByClassName('c1')//通过class属性查找
console.log(d1[1])
console.log(d1[0])
console.log(d1[2])
var d2=document.getElementsByTagName('div') //通过标签来查找
console.log(d2[0])
var div3 = document.getElementsByName('username');//通过name属性查找 例如input标签
</script>

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

案例

<div id="d1">
    <span id="s1">1</span>
    <span id="s2">2</span>
    <span id="s3">3</span>
    <span id="s4">4</span>
</div>
<script>
    var d=document.getElementById('d1')
    var p=d.children
    console.log(p[1])
    console.log(d.firstElementChild)
</script>

节点操作

问题1:动态创建一个img标签出来

  步骤:

    1 先创建出来一个img空元素: <img>
    2 设置img标签的src属性
    3 把创建出来的img标签显示在网页上

<div id="d1">

</div>
<!--      1 先创建出来一个img空元素: <img>-->
<!--    2 设置img标签的src属性-->
<!--    3 把创建出来的img标签显示在网页上-->
<script>
    var img = document.createElement('img');
    var div=document.getElementById('d1')
    img.src = 'img.png';
    img.alt = 'sb';
    img.setAttribute('username','k1');//设置自定义属性
    img.removeAttribute('username')//删除属性
    console.log(img);
    div.appendChild(img);

</script>

问题2:动态创建一个a标签出来

  步骤:
    1. 先创建一个空元素a
    2. 设置a标签的属性:href、target、title
    3. 给a标签添加文本内容
    4. 把a标签显示在网页上

案例

<div id="d1">
</div>
<script>
    // 1. 先创建一个空元素a
    // 2. 设置a标签的属性:href、target、title
    // 3. 给a标签添加文本内容
    // 4. 把a标签显示在网页上
    var a = document.createElement('a');
    a.href='http://www.baidu.com';
    a.target='';
    a.title='双击';
    a.innerText='点击看美女';
    console.log(a);
    var div=document.getElementById('d1');
    div.appendChild(a);
</script>

获取值操作

语法:
elementNode.value
适用于以下标签:
.input
.select
.textarea
value不能获取文件数据,获取文件数据要用files

<body>
<!--data设置日期、text设置文本框-->
<input type="text" id="i1" value="老板走去消费">
<!--设置单选框-->
<select name="" id="s1">
<option value="shanghai" selected>shanghai</option>
<option value="beijing" >beijing</option>
</select>
<textarea name="" id="t1" cols="30" rows="10">dasdasd</textarea>
<script>
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
</script>
</body>

class操作

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

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

 案例
<body>
<!--className  获取所有样式类名(字符串)-->
<!--classList.remove(cls)  删除指定类-->
<!--classList.add(cls)  添加类-->
<!--classList.contains(cls)  存在返回true,否则返回false-->
<!--classList.toggle(cls)  存在就删除,否则添加-->
<div id="di" class="box red">Hello, world!</div>
<script>
    var exampleDiv = document.getElementById('di');
    var allClassNames = exampleDiv.className;
    console.log(allClassNames);
    exampleDiv.classList.remove('red');
    console.log(exampleDiv.className);
    exampleDiv.classList.add('css')
    console.log(exampleDiv.className)
    var setContain=exampleDiv.classList.contains('css')
    console.log(setContain)
    console.log(exampleDiv.classList.toggle('blue'))
    console.log(exampleDiv.className)
</script>
</body>

指定CSS操作

<body>
<div id="d1">你好呀</div>
<script>
   // 指定CSS操作
    var div = document.getElementById('d1');//找到指定标签
   //定义变量名div 设置格式div.style
    div.style.color = 'red'; 
    div.style.border = '1px solid red';
    div.style.backgroundColor = 'green';
    div.style.borderLeftColor = 'red';
    div.style.borderLeftStyle = 'dashed';
    div.style.borderLeftWidth = '5px';
    div.style.borderLeft = '5px  dashed red';
    </script>
</body>

事件

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

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

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

如何绑定事件

方式一:

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

方式二:

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

事件案例

开关灯

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .c1 {
  height: 400px;
  width: 400px;
  border-radius: 50%;
}
.bg_green {
  background-color: greenyellow;
}
.bg_red {
  background-color: red;
}
</style>
  </head>
  <body>
  <div id="d1" class="c1 bg_red bg_green"></div>
  <button id="d2">变色</button>

  <script>
  let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function () {  // 绑定点击事件
  // 动态的修改div标签的类属性
  divEle.classList.toggle('bg_red')
}
  </script>
  </body>
  </html>

input事件

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .c1 {
  height: 400px;
  width: 400px;
  border-radius: 50%;
}
.bg_green {
  background-color: greenyellow;
}
.bg_red {
  background-color: red;
}
</style>
  </head>
  <body>
  <div id="d1" class="c1 bg_red bg_green"></div>
  <button id="d2">变色</button>

  <script>
  let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function () {  // 绑定点击事件
  // 动态的修改div标签的类属性
  divEle.classList.toggle('bg_red')
}
  </script>
  </body>
  </html>

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };

</script>
</body>
</html>

搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>