正则表达式

正则表达式的作用

 正则表达式的作用： 匹配字符串的一种规则，正则表达式的作用主要是用于匹配字符串的

需求： 校验手机号

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Title</title>

 <style type="text/css"></style>

 <script type="text/javascript">

 function checkTel(input){

 //得到用户输入的手机号

 var content = input.value;

 //编写正则表达式去校验手机号

 var  reg = /^1[34578]\d{9}$/;

 var span = document.getElementById("telSpan");

 if(reg.test(content)){

 //设置span的标签体内容

 span.innerHTML = "<font style='color:greenyellow'>正确</font>";

             }else{

 span.innerHTML = "<font style='color:red'>错误</font>";

             }

         }

 </script>

 </head>

 <body>

 手机号:<input type="text"id="tel"onblur="checkTel(this)"/><span id="telSpan"></span>

 </body>

 </html>

正则表达式的创建方式

方式一

var reg = /正则表达式/[模式];

方式二

var reg = new RegExp("正则表达式", "匹配模式");

var reg = /正则表达式/匹配模式;

正则表达式语法

正则表达式的语法

 BOM编程

BOM概念

BOM：Browser Object Model 浏览器对象模型

 BOM编程的作用

JavaScript使用了很多对象描述了浏览器的各部分信息，我们可以通过这些内置对象操作浏览器的行为。

常用的BOM对象

window对象

window对象的概念

window代表了当前浏览器的窗口

对话框的方法

计时方法

修改标签内容方法

 location对象

1.1.1    location对象概念

代表浏览器的地址栏对象

location对象常用的属性

 location常用的方法

代码演示

history对象

作用

history 代表了浏览器的历史浏览记录。

常用的方法

DOM编程（重点）

DOM编程概念

Document Object Model 文档对象模型，用于操作网页中html元素

DOM编程的作用

一个html页面被加载到浏览器的时候，浏览器会为每一个html标签都会创建一个对应的对象进行描述 ，然后网页上显示的内容其实就是这些html标签对应的对象的属性信息，如果我们想改变页面显示的内容，那么就应该拿到这些对象，改变对象的属性信息，从而控制页面的显示效果。

根据标签的属性找节点方法

代码演示

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>根据标签的属性找元素</title>

 <script type="text/javascript">

 /*

 通过属性找节点：

             document.getElementById(“id”)  通过id属性到唯一的元素 , 如果页面上有多个同名的id，则得到第1个元素

             document.getElementsByTagName (“标签名”)  通过标签名字得到一组标签，返回一个数组

             document.getElementsByName(“name”) 通过name属性得到一组标签，返回一个数组

             document.getElementsByClassName("类名")  通过类名得到一组标签，返回一个数组

         */

 window.onload = function () {

 //演示了getElementsByTagName方法。

 var b2 = document.getElementById("b2");

 b2.onclick = function(){

 var aNodes = document.getElementsByTagName("a"); //根据标签名找标签对象，返回的是一个数组

 for(var index= 0 ; index<aNodes.length ; index++){

 var aNode = aNodes[index];

 aNode.href = "http://www.itcast.cn";

                }

            }

 //演示getElementsByName方法

 var b3 = document.getElementById("b3");

 b3.onclick = function(){

 //根据name找标签节点

 var divs = document.getElementsByName("one");

 //遍历设置值

 for(var index = 0; index<divs.length ; index++){

 var div = divs[index];

 div.innerHTML = "我是div"+index;

                }

            }

 //演示getElementsByClassName方法

 var b4 = document.getElementById("b4");

 b4.onclick = function(){

 //根据name找标签节点

 var divs = document.getElementsByClassName("two")

 //遍历设置值

 for(var index = 0; index<divs.length ; index++){

 var div = divs[index];

 div.innerHTML = "我是div"+index;

                }

            }

        }

 </script>

 </head>

 <body>

 <input type="button"value="(通过标签名)给a链接添加地址"id="b2"/>

 <input type="button"value="(通过name属性)给div设值"id="b3"/>

 <input type="button"value="(通过类名)给div设值"id="b4"/>

 <hr/>

 <a>123</a><br/>

 <a>123</a><br/>

 <a>123</a><br/>

 <hr/>

 <div name="one"></div>

 <div name="one"></div>

 <div name="one"></div>

 <hr/>

 <div class="two"></div>

 <div class="two"></div>

 <div class="two"></div>

 </body>

 </html>

根据节点的关系找节点

节点的类型

节点通用的属性

凡是节点都会具备以下两个属性

节点与节点之间的关系

增删改节点

通过js代码修改css样式

修改css的方式

方式一：通过style属性操作

元素.style.样式名 = "样式值";

方式二： 通过className操作

元素.className = "类名";

JavaScript高级技术总结的更多相关文章

  1. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  2. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  3. 阅读摘录《javascript 高级程序设计》01

    前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...

  4. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  5. 《JavaScript高级程序设计》学习笔记(4)——引用类型

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

  6. 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...

  7. 1 《JavaScript高级程序设计》学习笔记(1)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...

  8. javascript高级程序设计阅读笔记（一）

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  9. JavaScript高级---装饰者模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

随机推荐

  1. React技术栈——Redux

    Redux 1.Redux是什么?   Redux对于JavaScript应用而言是一个可预测状态的容器.换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJs ...

  2. 解决Chrome插件安装时出现的“程序包无效”问题

    问题原因,新版的插件头部文件的修改,导致旧版的插件包无法使用,解决方式:解压. 1.把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar(如果看不到Chrome插件的扩展 ...

  3. P4168 蒲公英

    神仙分块,把减写成加调了半小时.. 不过这题也启示我们其实有的分块题要把多个块的信息拿到一起维护 以前做的都是每个块的信息单独维护 写的分块题还不太多,同时维护一个块的左右边界好像有点冗余,不过这样代 ...

  4. ansible roles 自动化安装

    例:  ansible roles 自动化安装memcached 文件目录结构如下: cat memcached_role.yml - hosts: memcached remote_user: ro ...

  5. 10）drf 过滤器（条件查询 排序 ） 分页器

    一.群查接口各种筛选组件 数据准备 models.py class Car(models.Model): name = models.CharField(max_length=16, unique=T ...

  6. GoF23:工厂模式(Factory)

    目录 GoF23:工厂模式(Factory) 工厂模式三种模式 简单工厂模式(静态工厂模式) 工厂方法模式 抽象工厂模式 举例说明 代码实现 GoF23:工厂模式(Factory) 核心本质: 实例化 ...

  7. Linux内核驱动学习（四）Platform设备驱动模型

    Linux platform设备驱动模型 文章目录 Linux platform设备驱动模型 前言 框架 设备与驱动的分离 设备(device) 驱动(driver) 匹配(match) 参考 前言 ...

  8. 带你100% 地了解 Redis 6.0 的客户端缓存

    近日 Redis 6.0.0 GA 版本发布,这是 Redis 历史上最大的一次版本更新,包括了客户端缓存 (Client side caching).ACL.Threaded I/O 和 Redis ...

  9. Excel：公式转数值

    跨Workbook引用有些危险,有时要把公式转换为数值.修改频繁,有时也要把公式转换为数值. 方法一,选中区域,复制Ctrl+C,选择性粘贴Ctrl+Alt+V,数值V.方法二,选中区域,复制Ctrl ...

  10. VMware Tanzu已融合云原生与K8s 市场前景尚不确定

    Tanzu是什么? Tanzu 结合了Wavefront IT监控的项目和产品,VMware于2017年5月收购了该软件,并加入了Cloud Foundry PaaS实用工具.VMware在2019年 ...