一、正则表达式

例子：
var patt = /w3school/i;
例子解释：
/w3school/i 是一个正则表达式。
w3school 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。

二、DOM

HTML DOM Document 对象：
文档对象代表您的网页。
访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

三、例子

练习一：页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

练习二：使用正则表达式，让页面中这段字符串 “我爱你哈哈爱你” 中的”爱“字全变为红色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="../js/PassFourteen.js"></script> --><!-- <link rel="stylesheet" href="../css/PassFourteen.css"> -->
</head>
</head>
<body><div><ul id="c1"><li class="l1">一 </li><li class="l1">二</li><li class="l1">三</li><li class="l1">四</li><li class="l1">五</li></ul></div><button onclick="b1()" type="button" >练习一加载页面</button><div><p id="p1">我爱你哈哈爱你</p> <button onclick="b2()" type="button" >练习二正则表达式</button></div><script>function b1(){var li=document.getElementsByClassName("l1")for(var i=0;i<li.length;i++){if(i%2==1)//奇数        {li[i].style.backgroundColor="red"}else{li[i].style.backgroundColor="green"}}}function b2(){var p1=document.getElementById("p1")var str=p1.innerHTMLvar res = new RegExp("爱",'g');text=str.replace(res,"<span style='color:red'>"+"爱"+"</span>")document.write(text)}</script>
</body>
</html>

结果图：

使用JS完成简易计算器
要求：输入的值只能是数字，使用正则表达式

<body><div><form action=""><input type="text" name="number1" id="number1"  onchange="check1()"><select name="char" id="char"><option value="jia">+</option><option value="jian">-</option><option value="cheng" selected>×</option><option value="chu">÷</option></select><input type="text" name="number2" id="number2"  onblur="check2()"><span><b>=</b></span><input type="text" name="result" id="result" readonly></form><div><button onclick="calculate()">计算</button></div></div></body>

function jia(a,b){return a+b;
}
function jian(a,b){return a-b;
}
function cheng(a,b){return a*b;
}
function chu(a,b){if(b == 0) return false;return a/b;
}function typeCheck(str){regx = /^\d+$/;return regx.test(str);
}function check1(){var obj =document.getElementById("number1");var str1 = obj.value;if(!typeCheck(str1)){alert("请输入数字");obj.value="";}else console.log("number1 is true");
}
function check2(){var obj =document.getElementById("number2");var str2 = obj.value;if(!typeCheck(str2)){console.log("请输入数字");obj.value="";}else console.log("number2 is true");
}function calculate(){var str1 = document.getElementById("number1").value;var number1 =parseInt(str1) ;var str2 = document.getElementById("number2").value;var number2 =parseInt(str2) ;var out = document.getElementById("result");var obj = document.getElementById("char");var index = obj.selectedIndex; // 选中索引var calculation = obj[index].value; // 选中值parseInt()if(number1 !="" && number2 !=""){var result ;switch (calculation) {case 'jia':result = jia(number1,number2);break;case 'jian':result = jian(number1,number2);break;case 'cheng':result = cheng(number1,number2);break;case 'chu':result = chu(number1,number2);break;default:break;}out.value = result;}
}

结果图：

JS学习笔记二 DOM，正则表达式简单例子介绍相关推荐

tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识一.JavaScript 变量二.JavaScript 的输出三.JavaScript 运算符四.结语一.JavaScript 变量变量是指在程序运行过程中, ...
node.js学习笔记(二)：核心
NodeJS核心东西随着版本更新越来越多,详情看官方文档:http://nodejs.org/api/ 下面简单介绍几个用的比较多的 1.全局对象在浏览器JavaScript 中,通常windo ...
Vue.js 学习笔记一
上手前的一些概念为啥要用Vue.js Vue.js 是目前最流行的前端框架之一,专注于视图层,容易上手. 使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定),提高渲染效率, ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...

JS学习笔记二 DOM，正则表达式简单例子介绍

一、正则表达式

二、DOM

三、例子

JS学习笔记二 DOM，正则表达式简单例子介绍相关推荐

最新文章

热门文章