JavaScript正则表达式，dom查询
一、正则表达式
<script type="text/javascript"> // 语法: // var 变量 = new RegExp("正则表达式","匹配模式"); // 使用typeof检查正则对象,会返回object // var reg = new RegExp("a");这个正则表达式可以检查一个字符串中是否含有a // 在构造函数中可以传递一个匹配模式作为第二个参数 // 可以是: // i 忽略大小写 // g 全局匹配模式 var reg = new RegExp("a","i"); var str = "a"; // 正则表达式表示方法: // test()用来检查一个字符串是否符合正则表达式的规则 // 符合返回true,不符合返回false var result = reg.test(str); // console.log(result); console.log(reg.test("abcde")); // 使用字面量来创建正则表达式 // 语法:var 变量 = /正则表达式/匹配模式 // 使用字面量的方式创建更加简单 // 使用构造函数创建更加灵活 // var reg = new RegExp("a","i");等同于下面的式子 reg = /a/i; console.log(reg.test("abcde")); // 创建一个正则表达式,检查一个字符串中是否有a或b // 使用|表示或的意思,[ab]也表示或的意思 // [ab] == a|b reg = /a|b/; console.log(reg.test("bcde")); // 创建一个正则表达式,检查一个字符串中是否有字母 // [a-z]表示任意的小写字母,[A-Z]任意的大写字母,[A-z]表示任意字母,[0-9]表示任意数字[^ ]表示除了 reg = [a-z]; console.log(reg.test("f")); reg = [A-Z]; console.log(reg.test("G")); reg = [A-z]; console.log(reg.test("h")); </script>
二、正则表达式语法
<script type="text/javascript"> // 量词: // 通过量词可以设置一个内容出现的次数 // 量词只对它前面的一个内容起作用 // {n}出现n次 // {m,n}出现m到n次 // {n,}出现n次以上 // + 表示至少一个,相当于{1,} // * 表示0或多个,相当于{0,} // ? 表示0或一个,相当于{0,1} // ^a表示以a开头,例reg = /^a/; // a$表示以a结尾 // 如果在正则表达式中同时使用^和$则要求字符串必须完全符合正则表达式 // reg = /^a$/; 结果为一个a // 检查一个字符串中是否含有.(点) // . 表示任意字符 // 需要使用转义字符:\ // \.来表示 // 注意:使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,如果要使用\则需要\\来代替 // \w 表示任意字母、数字和_(下划线) // \W 表示除了字母、数字和_(下划线) // \d 表示任意数字 // \D 表示除了数字 // \s 表示空格 // \S 表示除了空格 // \b 表示单词边界 // \B 表示除了单词边界 // 接受一个用户的输入 // var str = prompt("请输入你的用户名"); var str = " hello "; // 去除字符串前后的空格 // 就是使用""(空串)来替换空格 str = str.replace(/\s/g,""); // 去除开头的空格 str = str.replace(/^\s*/,""); // 去除结尾的空格 str = str.replace(/\s*$/,""); // 结合一下 str = str.replace(/^\s*/|/\s*$/g,""); console.log(str); </script>
三、字符串和正则表达式相关方法
<script type="text/javascript"> var str = "1a2b3c4d5e6f7"; // split() // 可以将字一个符串拆分为一个数组 // 这个方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串 // 根据任意字母来拆分字符串 var result = str.split(/[A-z]/); console.log(result); // search() // 可以搜索字符串中是否含有指定内容(只会查找第一个，即使设置全局匹配也没用) // 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1 // 它可以接受一个正则表达式作为参数，然后根据正则表达式去检索字符串 // match() // 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来 // 默认情况下我们的match只会找到第一个符合要求的内容,找到后就停止检索 // 我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有内容 // match()会将我们匹配到的内容封装到一个数组中返回,即使只查询到一个结果 // replase() // 可以将字符串中的指定内容替换为新的内容(默认只会替换第一个) // 参数: // 第一个.被替换的内容，可以接受一个正则表达式作为参数 // 第二个.新的内容(为空,就是删除原内容) </script>
四、dom查询
<script type="text/javascript"> // 定义一个函数,专门用来为指定元素绑定单击响应函数 // 参数: // idStr 要绑定单击响应函数的对象的id属性值 // fun 事件的回调函数,当单击元素时，该函数将会被触发 function myClick(idStr,fun){ var btn = document.getElementById("idStr"); btn.onclick = fun; } window.onload = function(){ // 为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 查找#bj节点 var bj = document.getElementById("bj"); // 打印bj // innerHTML 通过这个属性可以获取到元素内部的HTML代码 alert(bj.innerHTML); }; // 为id为btn02的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ // 查找所有li节点 // getElementByTagName()可以根据标签名来获取一组元素的节点对象 // 这个方法会给我们返回一个类数组对象所有查询到的元素都会封装到对象中 // 即使查询到的元素只有一个,也会封装到数组中返回 var lis = document.getElementByTagName("lis"); // 打印lis // alert(lis.length); // 变量lis for(var i=0;i<lis.length;i++){ // 获取文字 alert(lis[i].innerHTML); } }; // 为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ // 查找name=gender的所有节点 // getElementByTagName()可以根据标签名来获取一组元素的节点对象 // 这个方法会给我们返回一个类数组对象所有查询到的元素都会封装到对象中 // 即使查询到的元素只有一个,也会封装到数组中返回 var inputs = document.getElementByName("gender"); // 打印inputs // alert(inputs.length); for(var i=0;i<inputs.length;i++){ // innerHTML用于获取元素内部的html代码的，对于自结束标签这个属性没有意义 // alert(inputs[i].innerHTML); // 如果需要读取到元素节点属性,直接用 元素.属性名 // 例:元素.id,元素.name,元素.value // 注意:class属性不能采用这种方式 // 读取class属性需要使用 元素.className alert(inputs[i].属性名); } }; // 为id为btn04的按钮绑定一个单击响应函数 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ // 获取id为city的元素 var city = document.getElementById("city"); // 查找#city下的所有li节点 var lis = city.getElementById("li"); for(var i=0;i<lis.length;i++){ alert(lis[i].innerHTML); } }; // 为id为btn05的按钮绑定一个单击响应函数 var btn05 = document.getElementById("btn05"); btn05.onclick = function(){ // 获取id为city的子节点 var city = document.getElementById("city"); // 返回#city的所有子节点 // childNodes这个属性会获取包括文本节点在内的所有节点 // 根据dom标签间的空白也会当成文本节点 // 注意再IE8及以下的浏览器中，不会将空白文本当成子节点 // 所以该属性在IE8中，会返回4个元素，而其他浏览器是9个 // var cns = city.childNodes; // alert(cns.length); // children属性可以获取当前元素的所有子元素(所有浏览器都兼容，推荐使用) var cns2 = city.children; alert(cns2.length); }; // 为id为btn06的按钮绑定一个单击响应函数 var btn06 = document.getElementById("btn06"); btn06.onclick = function(){ // 获取id为phone的元素 var phone = document.getElementById("phone"); // 返回phone的第一个子节点 // phone.childNodes[0]; // firstChild可以获取到当前元素的第一个子节点(包括空白文本节点) var fir = phone.firstChild; alert(fir); }; // 获取父节点和兄弟节点： // 为id为btn07的按钮绑定一个单击响应函数 myClick("btn07",function(){ // 获取id为bj的节点 var bj = document.getElementById("bj"); // 返回#bj的父节点 var pn = bj.parentNode; alert(pn.innerHTML); // innerText 该属性可以获取到元素内部的内容 // 它和innerHTML类似,不同的是它会自动将html去除 // alert(pn.innerText); }); // 为id为btn08的按钮绑定一个单击响应函数 myClick("btn08",function(){ // 获取id为android的节点 var and = document.getElementById("android"); // 返回#Android的前一个兄弟节点(也可能过获取到空白的文本) var ps = and.previousSibling; // previousElementSibling获取前一个兄弟元素，IE8及以下不支持 // var ps = and.previousElementSibling; alert(ps.innerHTML); }); // 为id为btn09的按钮绑定一个单击响应函数 myClick("btn09",function(){ // 读取id为username的节点 var um = document.getElementById("username"); // 读取um的value属性值 // 文本框的value属性值，就是文本框中填写的内容 alert(um.value); }); // 设置#username的value属性值 myClick("btn10",function(){ // 读取id为username的元素 var um = document.getElementById("username"); um.value = "你好"; }); // 获取id为bj的文本 myClick("btn11",function(){ // 获取id为bj的元素 var bj = document.getElementById("bj"); alert(bj.innerHTML); // alert(bj.innerText); // 获取bj中的文本节点 var fc = bj.firstChild; // alert(fc.nodeValue); // alert(fc.firstChild.nodeValue); }); }; // document.querySelector() // 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象 // 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个 // 虽然IE8中没有getgetElementsByClassName()但是可以使用querySelector()来代替 // 例: document.querySelector(".box div"); // var div = document.querySelector(".box div"); // document.querySelectorAll() // 该方法和querySelector()用法类似,不同的是它会将符合的元素封装到一个数组中返回 // 即使符合条件的元素只有一个,它也会返回数组 // var box1 = document.querySelectorAll(".box1"); </script>
五、dom增删改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ // 创建一个广州节点,添加到#city下 myClick("btn01",function(){ // 创建广州节点, <li>广州</li> // 创建li元素节点 // document.createElement()可以用于创建一个元素节点对象 // 需要一个标签名作为参数,将会根据该标签名创建元素节点对象 // 并将创建好的对象作为返回值返回 var li = document.createElement("li"); // 创建广州文本节点 // document.createTextNode()可以用来创建一个文本节点对象 // 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回 var gzText = document.createTextNode("广州"); // 将gzText设置li的子节点 // appendChild()向一个父节点中添加一个新的子节点 // 用法:父节点.appendChild(子节点); li.appendChild(gzText); // 获取id为city的节点 var city = document.getElementById("city"); // 将广州添加到city下 city.appendChild(li); }); // 将广州节点插入到bj前面 myClick("btn02",function(){ // 创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); // 获取id为bj的节点 var bj = document.getElementById("bj"); // 获取city var city = document.getElementById("city"); // insertBefore()可以在指定的节点前插入一个新的子节点 // 语法: 父节点.insertBefore(新节点,旧节点); city.insertBefore(li,bj); }); // 使用广州节点替换#bj节点 myClick("btn03",function(){ // 创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); // 获取id为bj的节点 var bj = document.getElementById("bj"); // 获取city var city = document.getElementById("city"); // releaseChild()可以使用指定的子节点替换已有的子节点 // 语法:父节点.releaseChild(新节点,旧节点); city.releaseChild(li,bj); }); // 删除#bj节点 myClick("btn04",function(){ // 获取id为bj的节点 var bj = document.getElementById("bj"); // 获取city var city = document.getElementById("city"); // removeChild()可以删除一个子节点 // 语法:父节点.removeChild(子节点); city.removeChild(bj); // 子节点.parentNode.removeChild(子节点); (常用这个方法,更简单) bj.parentNode.removeChild(bj); }); // 读取#city内的HTML代码 myClick("btn05",function(){ // 获取city var city = document.getElementById("city"); alert(city.innerHTML); }); // 设置#bj内的HTML代码 myClick("btn05",function(){ // 获取bj var bj = document.getElementById("bj"); bj.innerHTML = "昌平"; }); // 向city中添加广州 var city = document.getElementById("city"); // 使用innerHTML也可以完成dom的增删改的相关操作 // 一般我们会两种方法结合使用 // city.innerHTML += "<li>广州</li>"; // 创建一个li var li = document.createElement("li"); // 向li中设置文本 li.innerHTML = "广州"; // 将li添加到city中 city..appendChild(li); }; function myClick(idStr,fun){ var btn = document.getElementById(idStr); btn.onclick = fun; } </script> </head> <body> </body> </html>
