1.正则表达式
/* 正则表达式: 描述一组特定字符模式规则的对象(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>
2. 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. 事件(重点)
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. 添加删除节点
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>
Java程序猿必学第三十三篇——JS(JavaScript)DOM
最新推荐文章于 2024-08-30 10:01:19 发布