虽然不知道什么时候能学完，但是学的过程很开心，这就足够了
- 正则表达式
/*
正则表达式----用于定义一些字符串的规则-计算机根据正则表达式，检查一个字符串是否
符合规则
var reg = new RegExp("正则表达式", "匹配模式");
匹配模式： i忽略大小写
g全局匹配规则
*/
var reg = new RegExp("a"); //检查字符串中是否含有a，严格区分大小写
var str = "abc";
console.log(reg.test(str)); //reg.test()方法测试
/*
*使用字面量创建正则表达式
* 语法 ： var 变量 = /正则表达式/匹配模式
* 使用字面量方式创建更简单，但是构造函数创建更灵活
*/
var reg2 = /a/i;
var reg3;
reg3 = /a|b/; // |表示或的意思
reg3 = /[abcdefg]/ // []内内容也表示或的关系
reg3 = /[a-z]/; // a-z任意小写字母， A-Z任意大写字母， A-z任意字母
reg = /a[bcd]c/; // abc, acc, adc 可以
reg = /[^ab]/; //[^ ]除了
//--------------------------------------------------------------------//
//--------------------------------------------------------------------//
/*
字符串和正则相关的语法
*/
var str2 = "1a2e34r56f78abcaecafc";
//根据任意字母拆分字符串,传正则表达式
var str3 = str2.split(/[A-z]/);
var result;
//搜索字符串是否含有 abc, aec, afc， 只搜第一个，设置正则也只搜第一个
result = str2.search("a[bef]c");
//根据正则表达式将字符串中符合条件的提取出来
result = str2.match(/[A-z]/);
console.log(result);
//将所有匹配的结果返回回来
result = str2.match(/[A-z]/g);
console.log(result);
//可写多种匹配模式
result = str2.match(/[a-z]/ig);
//match返回的是的一个数组
console.log(result[1]);
//replace()， 将字符串中指定内容替换为新的内容，默认只能替换第一个---若想替换任意用正则表达式
result = str2.replace(/A-z/g, "%");
result = str2.replace(/A-z/g, ""); //将所有字母删掉
/*
创建正则表达式检查一个字符串中是否含有aaa
*/
/*
*量词
* -设置一个内容出现的次数--只对它前面的一个内容起作用
* -{n}正好出现n次
* -{m, n}出现m到n次
* -{m,} m次以上
* + 表示至少一个
* * 0或多个
* ? 0个或一个
*/
var reg = /a{3}/;
console.log(reg.test("aaaaaaa"));
reg = /(ab){3}/;
console.log("ababab");
reg = /a{1,3}/;
reg = /b?ac/;
reg = /^a/; //^表示开头
console.log(reg.test("abc"));
reg = /a$/; //$表示结尾
reg = /^a$/; //只能是一个a
reg = /^a|a$/; //以a开头或者以a结尾
console.log(reg.test("abbc"));
/*
*创建一个正则表达式，检测是否是手机号
* 1.以1开头
* 2.第二位是 3-9
* 3.3位之后任意数字9个
*/
reg = /^1[3-9][0-9]{9}$/; //$很重要，表示完全符合要求
//https://www.sojson.com/regex/generate 自动生成正则表达式网址- DOM
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
/*
* DOM --Document Object Model文档对象模型 ----找对象，改对象
* JS通过DOM操作网页
* 文档---HTML文档
* 对象---将网页中的内容都转换为对象----以对象形式操作简单
* 模型---表示对象之间的关系---DOM树
*
* 节点---HTML最基本单元
* 四类： 文档节点/元素节点/属性节点/文本节点
* 节点的属性 nodeName nodeType nodeValue
*/
//我就想把JS代码写上面----onload事件会在整个页面加载后再触发---window
//写上写下都行，性能影响不大----尽量养成良好习惯----写上面好管理
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("我是写在上面的onload方法响应的按钮");
}
}
</script>
<title></title>
</head>
<body>
<!--我们可以在事件对于的属性中设置一些js代码
当事件被触发时，这些代码被执行 --- 不推荐-->
<button id = "btn">"我是一个按钮"</button>
<script type="text/javascript">
/*
*浏览器为我们提供文档节点对象， 这个对象是window属性
* 可在页面直接使用，文档节点代表的是整个网页
*/
//获取到button对象
document.getElementById("btn");
//修改按钮中的文字
btn.innerHTML = "我是修改后的按钮";
//------------------------------------------------------------//
//-----------------------------------------------------------//
/*
*事件---用户与浏览器直接的交互行为
* 比如： 点击按钮，鼠标移动
*/
/*
*可以为按钮对应的事件绑定函数的形式来响应事件 ---响应函数
*当事件被触发时，函数被执行
*/
btn.onclick = function(){
alert("你别点我呀！");
}
/*
*浏览器在加载一个页面时，是按照自上而下的顺序加载的
* 读取一行就运行一行， 将JS代码写在页面下面，就是为了在页面加载完再运行JS代码
*/
/*
* 获取元素节点
* getElementById() --- 获取一个元素节点对象
* getElementsByTagName() ----通过标签名获取一组元素节点对象
* getElementsByName() --- 通过name属性获取一组元素节点对象
</script>
</body>
</html>- 图片切换小程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; background-color: antiquewhite; padding: 10px; //设置文本居中 text-align: center; } </style> <script type="text/javascript"> window.onload = function(){ /* *点击按钮切换图片 */ //获取两个按钮 var prev = document.getElementById("prev"); var next = document.getElementById("next"); //获取img var img = document.getElementsByTagName("img")[0]; //创建一个数组，用来保存图片的路径 var imgArr = ["img/1.jpg","img/2.jpg","img/4.jpg","img/5.jpg" ,"img/3.jpg"] var index = 0; //设置提示文字 var info = document.getElementById("info"); prev.onclick = function(){ //切换图片就是修改img的src属性 index--; if(index<0){ index = index.length - 1; } info.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index+1) + "张" ; img.src = imgArr[index]; }; next.onclick = function(){ index++; if(index>4){ index = 0; } info.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index+1) + "张" ; img.src = imgArr[index]; }; } </script> </head> <body> <div id="outer"> <p id = "info"> 一共5张图片，当前是第1张 </p> <img src="img/1.jpg" width="300px" alt="风景"> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> </html> - DOM查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> --> <style type="text/css"> @CHARSET "UTF-8"; body { width: 800px; margin-left: auto; margin-right: auto; } button { width: 300px; margin-bottom: 10px; } #btnList { float: left; } #total { width: 450px; float: left; } ul { list-style-type: none; margin: 0px; padding: 0px; } .inner li { border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float: left; } .inner { width: 400px; border-style: solid; border-width: 1px; margin-bottom: 10px; padding: 10px; float: left; } </style> <script type="text/javascript"> window.onload = function(){ /* *定义一个函数，用来指定元素绑定当即响应函数 * idStr--特定id fun---回调函数 */ function myClick(idStr , fun){ var btn = document.getElementById(idStr); btn.onclick = fun; } //------------DOM查询---------------------// //查找所有bj节点 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ var bj = document.getElementById("bj"); alert(bj.innerHTML); }; //查找所有的li节点----返回一个数组 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ var list = document.getElementsByTagName("li"); for(var i=0; i<list.length; i++){ alert(list[i].innerHTML); } }; // var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ var input = document.getElementsByName("gender"); for(var i=0; i<input.length; i++){ //innerHTML获取元素内部HTML代码 //input为自结束标签 alert(input[i].value); } }; //在结点上作进一步查询--在指定元素的后代中查询 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ var city = document.getElementById("city"); var cities = city.getElementsByTagName("li"); for(var i=0; i<cities.length; i++){ alert(cities[i].innerHTML); } }; //返回city的所有子节点 var btn05 = document.getElementById("btn05"); btn05.onclick = function(){ var city = document.getElementById("city"); //返回包括文本节点在内的所有子节点---9个 //根据DOM将标签中的空白当做子节点---IE8及以下的浏览器内，不会将空白当做子节点 var cities = city.childNodes; for(var i=0; i<cities.length; i++){ alert(cities[i]); } //children---当前元素的所有子元素 var cities2 = city.children; }; //第一个节点 var btn06 = document.getElementById("btn06"); btn06.onclick = function(){ var phone = document.getElementById("phone"); //获取当前元素的第一个子节点，包括空格 var fir = phone.firstChild; // fir = phone.firstElementChild; alert(fir.innerHTML); }; //父节点 myClick("btn07", function(){ var bj = document.getElementById("bj"); var pn = bj.parentNode; alert(pn.innerHTML); //获取元素内部的文本内容---自动去除html alert(pn.innerText); }); //兄弟节点 myClick("btn08", function(){ var and = document.getElementById("android"); //获取前一个兄弟节点--含空格 var ps = and.previousSibling; //不含空格 var ps = and.previousElementSibling; }); //获取属性值 myClick("btn09", function(){ var um = document.getElementById("username"); alert(um.value); }); //设置文本值 myClick("btn10", function(){ var um = document.getElementById("username"); um.value = "刘"; }); //获取bj文本值 myClick("btn11", function(){ var bj = document.getElementById("bj"); var fc = bj.firstChild; alert(fc.nodeValue); alert(bj.innerText); }); }; </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p> 你喜欢哪款单机游戏? </p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br /> <br /> <p> 你手机的操作系统是? </p> <ul id="phone"><li>IOS</li> <li id="android">Android</li> <li>Windows Phone</li> </ul> </div> <div class="inner"> gender: <input class="hello" type="radio" name="gender" value="male" /> Male <input class="hello" type="radio" name="gender" value="female" /> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde" /> </div> </div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有li节点</button></div> <div><button id="btn03">查找name=gender的所有节点</button></div> <div><button id="btn04">查找#city下所有li节点</button></div> <div><button id="btn05">返回#city的所有子节点</button></div> <div><button id="btn06">返回#phone的第一个子节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的前一个兄弟节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">返回#bj的文本值</button></div> </div> </body> </html>
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
