这篇博客介绍了JavaScript中的正则表达式、DOM操作和事件处理。内容包括正则表达式的使用，如邮箱和手机号的验证，以及字符串的查找、替换和拆分。接着讲解了DOM操作，如获取、修改元素内容、属性和样式，以及添加和删除节点。在事件部分，详细阐述了点击事件、this的使用、事件监听和冒泡与捕获事件的概念。此外，还提供了添加段落、删除段落和删除表格的示例。
目录
一.正则表达式
/* 正则表达式： 描述一组特定字符模式规则的对象（java中就是字符串，规则一致） */
/* 关键要弄清楚规则： */
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* 定义正则表达式 */
//var rep = new RegExp("\\w+");
var rep = /\w+@\w+[.]\w+/; //\.代表. [.]代表.
//案例：请校验一个字符串，是否为邮箱字符串？---test方法
//分析规则：xxx@xxx.xxx
document.write(rep.test("lhp@163.com")+"<br />"); //true
//案例：请校验手机号
//分析规则：以1开头，第二位为3或5或8， 11为都是数字
rep =/^1[358]\d{9}$/;
document.write(rep.test("13888888778")+"<br />"); //
//案例：请检索下面字符串中的java子串---exec方法
rep = /java/ig;
var str="hello java,java是最好的编程语言，我爱Java";
var m;
while(m=rep.exec(str)){
document.write(m+"<br />");
}
//案例：将匹配字符串中的子串，放入数组---match
var arr = str.match(rep);
document.write(arr+"<br />");
//案例：正则表达式的替换方法---replace
//参数1：正则表达式 参数2：替换成的子串
document.write(str.replace(rep,"JAVA")+"<br />");
//案例：将字符串按，或 去拆分，存到数组中
str="hello world,java best language";
rep = /[ ,]/;
document.write(str.split(rep)+"<br />");
</script>
二.DOM基本操作
2.1 获取DOM对象
DOM: 文档对象模型； html所有标签都属于文档，所有通过文档对象可以拿到所有标签
应用： 获取元素对象（标签对象）
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
onload=function(){
//var obj = document.getElementById("a"); //1.使用id获取元素
//2.使用class获取元素 (class获取的是集合)
//var obj = document.getElementsByClassName("yy")[0];
//3.使用标签获取元素(标签获取的是集合)
var obj = document.getElementsByTagName("h1")[0];
alert(obj);
}
//应用场景：通过获取到元素，我们就可以操作标签内容，属性，样式，事件等
</script>
</head>
<body>
<h1 id="a" class="yy">标题1</h1>
</body>
2.2 修改元素内容
<body>
<h1>标题1</h1>
<script>
/* 案例：修改h1的内容 */
var obj = document.getElementsByTagName("h1")[0];
//alert(obj.innerHTML); //取值
//obj.innerHTML = "<a href='#'>修改标题</a>"; //带标签格式的修改内容
obj.innerText = "<a href='#'>修改文本</a>"; //纯文本格式的修改内容
</script>
</body>
2.3 修改元素属性
<body>
<!-- 案例：修改元素的属性 -->
<img src="../img/b.jpg" id="img" />
<script>
var obj = document.getElementById("img");
obj.src = "../img/d.jpg";
obj.width = 200;
obj.height = 250;
</script>
</body>
2.4 修改元素样式
<body>
<!-- 案例：通过元素修改样式效果 -->
<h1>标题1</h1>
<script type="text/javascript">
var obj = document.getElementsByTagName("h1")[0];
obj.style.color = "red";
</script>
</body>
三.事件
3.1 点击事件与this
<body>
<!-- 案例：点击事件触发，然后触发修改内容 -->
<h1 onclick="myclick()" id="a">标题1</h1>
<!-- this使用：与java类似，代表当前对象，当前标签对象 -->
<h1 onclick="this.innerHTML='赵本山'" id="a">标题2</h1>
<!-- this作为参数传递，在实现中则无需document获取对象 -->
<h1 onclick="myclick2(this)">标题3</h1>
<script>
function myclick(){
alert("点击事件");
var obj = document.getElementById("a");
obj.innerHTML="刘德华";
}
function myclick2(o){
o.innerHTML="刘亦菲";
}
</script>
</body>
3.2 点击按钮事件
<body>
<!-- 案例：点击按钮，修改标题1的内容 -->
<!-- 扩展了解：通过对象调事件 -->
<h1 id="h">标题1</h1>
<input type="button" value="修改标题" onclick="btn()" />
<input type="button" value="修改标题2" id="btn" />
<script>
function btn(){
var obj = document.getElementById("h");
obj.innerHTML = "漂亮标题";
}
var btn = document.getElementById("btn");
btn.onclick=function(){
alert("通过元素调事件");
}
</script>
</body>
3.3 获取与失去焦点事件
<body>
<input type="text" value="请输入邮箱地址"
onfocus="myfocus(this)" onblur="myblur(this)" />
<script>
/*获取与失去焦点
案例：失去焦点时在文本框显示，'请输入邮箱地址',获取焦点时，清除该内容
分析： 点击当前控件-当前控件则获取到焦点；点击其他-当前控件失去焦点
onfocus:获取焦点事件 onblur：失去焦点事件
*/
function myfocus(o){
if(o.value=="请输入邮箱地址"){
o.value = "";
}
}
function myblur(o){
debugger //js中的debug调试 需要将控制台打开-f12
if(o.value==""){ //如果去除左右空格，可以+trim()
o.value = "请输入邮箱地址";
}
}
</script>
</body>
3.4 级联列表更改事件
<body>
<select onchange="change(this)">
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>
<select id="city">
<option>长沙</option>
<option>郴州</option>
<option>永州</option>
</select>
<script>
/* 案例：有两个级联下拉列表，一个显示省份，一个显示城市；变更省份后，联动变更城市
* 分析：onchange事件，获取省份选项内容，根据判断，显示不同的值在城市标签中即可
* */
var city = document.getElementById("city");
function change(province){
if(province.value=="hn"){ //在js中直接用==判断字符串；在java中使用equals
//显示湖南城市
city.innerHTML="<option>长沙</option><option>郴州</option><option>永州</option>"
}else if(province.value=="hb"){
city.innerHTML="<option>武汉</option><option>荆州</option>";
}
}
</script>
</body>
3.5 监听事件
<body>
<h1>标题1</h1>
<script type="text/javascript">
/* 监听事件： addEventListener */
var obj = document.getElementsByTagName("h1")[0];
/* 参数1：要监听的事件 参数2：监听后要执行的函数体 */
obj.addEventListener("click",function(){alert("点击事件")})
//可以绑定当前标签的多个事件
//obj.addEventListener("mouseover",function(){alert("鼠标移入")})
//窗口监听事件，改变窗口大小后的触发
window.addEventListener("resize",function(){
obj.innerHTML="刘德华";
})
</script>
</body>
3.6 冒泡与捕获事件
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 250px;
height: 200px;
border: solid 4px red;
}
</style>
</head>
<body>
<!-- 冒泡与捕获：
有多个触发事件时，冒泡就是从里往外触发（默认）；捕获则是从外往里触发
-->
<div id="parent">
<input type="button" value="冒泡与捕获" id="btn" />
</div>
<script>
var div = document.getElementById("parent");
var btn = document.getElementById("btn");
//参数1：触发事件 参数2：函数体 参数3：true-捕获 false-冒泡
div.addEventListener("click",myDiv,false);
btn.addEventListener("click",myBtn,false);
btn.removeEventListener("click",myBtn,false); //移除事件
function myDiv(){
alert("触发外部div");
}
function myBtn(){
alert("触发内部按钮");
}
</script>
</body>
四.添加删除节点
4.1 添加段落
<head>
<meta charset="UTF-8">
<title></title>
<script>
function add(){
//1.创建一个p标签 <p></p>---document
var p = document.createElement("p");
//2.创建文本内容 "新段落"
var textNode = document.createTextNode("新段落");
//3.将文本内容放到p标签中
p.appendChild(textNode);
//4.将完整的p标签;<p>新段落</p>，放入指定位置
//获取body标签，并在最后添加新创建的子标签
var body = document.getElementsByTagName("body")[0];
body.appendChild(p); //父添加子
}
</script>
</head>
<body>
<input type="button" value="添加段落" onclick="add()" />
<p>原始段落</p>
</body>
4.2 删除段落
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 案例： 点击删除节点，删除‘段落2’ -->
<input type="button" value="删除节点" onclick="del()" /><br />
<div id="parent">
<p>段落1</p>
<p id='son'>段落2</p>
</div>
<script>
function del(){
//获取父标签，获取子标签，父删除子
var parent = document.getElementById("parent");
var son = document.getElementById("son");
if(son!=null){
parent.removeChild(son);
}
}
</script>
</body>4.3 删除表格
<body>
<!-- 案例： 删除表格记录
分析：遵循父删除子原则，通过table删除tr
-->
<table border="2" id="tab">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
</table>
<script type="text/javascript">
function del(obj){
var tr = obj.parentElement.parentElement;
tr.parentElement.removeChild(tr); //tr获取父标签再删除自己
}
</script>
</body>
(>_<~~~礼拜四了兄弟们!马上又要周末了,这周末决定把linux和shell的一些基础先学一遍,笨鸟先飞嘛~linux的基本命令都大致了解了些,但是还没到熟练运用上,对管道符的使用还不熟练,shell的一些基本结构和简单脚本的编写也算是可以上手,这周好好预习,为下周的大数据学习做好铺地,周末去吃大餐冲了~~~~)
扫一扫
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
