JavaScript高级技术总结
正则表达式
正则表达式的作用
正则表达式的作用： 匹配字符串的一种规则，正则表达式的作用主要是用于匹配字符串的
需求： 校验手机号
<!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高级技术总结的更多相关文章
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 阅读摘录《javascript 高级程序设计》01
前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript高级程序设计》学习笔记(4)——引用类型
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...
- 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...
- 1 《JavaScript高级程序设计》学习笔记(1)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...
- javascript高级程序设计阅读笔记（一）
javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...
- JavaScript高级---装饰者模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
随机推荐
- mac 关闭系统完整性保护 SIP（System Integrity Protection）的方法
在 OS X El Capitan 中有一个跟安全相关的模式叫 SIP(System Integrity Protection ) ,它禁止让软件以 root 身份来在 mac 上运行,并且对于目录 ...
- CentOS7.x上轻量级TCP转发工具rinetd的安装配置
一.实验背景 Linux下端口转发一般都使用iptables来实现,使用iptables可以很容易将TCP和UDP端口从防火墙转发到内部主机上. 如果需要将流量从专用地址转发到不在您当前网络上的机器上 ...
- 编程语言50年来的变化，我用50种编程语言告诉你“Hello world”怎么写！
当我们学习一门新的语言时,"Hello, World!"通常是我们所写的第一个程序. 因此,所有程序员在职业生涯中至少完成了"Hello, World!"程序员 ...
- 数学--数论--HDU 2674 沙雕题
WhereIsHeroFrom: Zty, what are you doing ? Zty: I want to calculate N!.. WhereIsHeroFrom: So easy! H ...
- 洛谷P1217 回文质数
题目描述 因为 151 既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围 [a,b] (5 \le a < b \le 100,000 ...
- 使用kubeadm部署k8s集群[v1.18.0]
使用kubeadm部署k8s集群 环境 IP地址 主机名 节点 10.0.0.63 k8s-master1 master1 10.0.0.63 k8s-master2 master2 10.0.0.6 ...
- Codeforces 1332 D. Walk on Matrix（构造矩阵）
怎么构造呢? \(首先我们不可能去构造一个2000*2000的矩阵,那太复杂了\) \(也许我们可以看看2*2的矩阵??\) \[\left[ \begin{matrix} x&y\\ z&a ...
- CC2530应用——按键控制灯光状态变化
独立新建工程并编写.编译代码,实现按键控制灯光闪烁状态的变换,实现以下任务要求:[1]程序开始运行:D4灯闪烁,D3.D5.D6灯熄灭.[2]按下模块上的SW1按键松开后,实现D5.D6灯轮流闪烁.[ ...
- Linux下3种常用的网络测速工具
大家好,我是良许. 不管你用的是什么操作系统,网速都是你非常关心的一个性能指标,毕竟,谁都不想看个视频结果网速卡到你怀疑人生.本文介绍三个 Linux 命令行下的网络测速工具,让你随时随地知道你的网络 ...
- ActiveMQ 持久订阅者，执行结果与初衷相违背，验证离线订阅者无效，问题解决
导读 最新在接触ActiveMQ,里面有个持久订阅者模块,功能是怎么样也演示不出来效果.配置参数比较简单(配置没几个参数),消费者第一次运行时,需要指定ClientID(此时Broker已经记录离线订 ...