目录
一、正则表达式
概述：描述一组特定规则的对象（Java非常类似，只不过Java的正则表达式是字符串）
1.正则调方法
//正则表达式调方法：
//1. test方法：
//var rep = new RegExp("^1[358][0-9]{9}$"); //创建正则表达式对象
var rep = /^1[358][0-9]{9}$/; //创建对象2-常用
//需求：判断一串字符串是否为手机号，是-返回true，不是-返回false
//条件：1开头；11位； 都是数字 第二位是3或5或8
console.log(rep.test("13838383838")); //参数：要匹配的字符串
//需求：判断一个字符串是否为邮箱格式： xxx@xxx.xxx
rep = /\w+@\w+[.]\w+/
console.log(rep.test("lhp@163.com"));
//2.exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var reg=/java/ig; //规则 修饰符：i大小写不敏感 g：全局匹配，匹配后，继续下一个
var str="hello java,java是最好的编程语言，我爱Java";
var s = null;
while(s=reg.exec(str)){ //循环地将匹配地值用s接收
document.write(s);
}
document.write("<br />");2.正则传参
//match方法：把匹配的字符串值，返回到数组
var reg=/java/ig;
var str="hello java,java是最好的语言，我爱Java";
var arr = str.match(reg);
document.write(arr);
document.write("<br />");
//replace方法：匹配上正则表达式规则的字串进行替换；返回替换后的完整字符串
var s = str.replace(reg,"JAVA");
document.write(s);
document.write("<br />");
//split方法：按正则表达式规则进行拆分
var str="hello world,java best language";
arr = str.split(/[, ]/);
document.write(arr);
document.write(arr.length);二、DOM应用
概述：文档对象模型，只要有文档对象，即可拿到任意元素(标签)对象
1.获取元素对象
<head>
<script>
onload=function(){ //页面加载完成后，系统的调用
//1.DOM根据id获取元素对象
//var obj = document.getElementById("aa");
//2.DOM根据class获取元素对象（容器中获取第一个元素）
//var obj = document.getElementsByClassName("bb")[0];
//3.DOM根据标签获取元素对象
var obj = document.getElementsByTagName("h1")[0];
alert(obj);
}
</script>
</head>
<body>
<h1 id="aa" class="bb">一级标题</h1>
</body>2.操作基本值
<h1 id="aa" class="bb">一级标题</h1>
<script>
//操作内容：包括设置和获取内容，内容就是起始标签和结束标签的值
var obj = document.getElementById("aa");
//innerText:文本内容 innerHTML：带格式的内容,可以解析标签内容(常用)
//alert(obj.innerHTML); //取值
obj.innerHTML = "刘德华"; //赋值
</script>3.操作属性
<img id="img" src="../img/002.png" />
<script>
//操作属性
var img = document.getElementById("img");
//alert(img.src); //取值
img.src="../img/005.png";
img.width = 300;
img.height = 400;
</script>4.操作样式
<!-- 操作样式： -->
<h1>一级标题</h1>
<script>
var h1 = document.getElementsByTagName("h1")[0];
h1.style.color="red";
</script>三、DOM事件
概述：DOM与事件操作的结合，也就是事件触发后，再通过DOM进行元素的相关操作
1.点击和this
<!-- DOM事件： 点击事件与DOM结合；
this:代表当前元素对象；此处表示h1标签
-->
<h1 id="aa" onclick="myclick(this)">一级标题</h1>
<!-- 注意： js中的''也表示字符串
js中字符串的嵌套，要么单包双，要么双包单 -->
<h2 onclick="this.innerHTML='凤姐'">二级标签</h2>
<script>
function myclick(obj){
//var obj = document.getElementById("aa"); //DOM操作
obj.innerHTML="郭德纲";
}
</script>2.扩展事件
<h1 id="aa" onclick="myclick(this)">一级标题</h1>
<script>
//DOM获取元素对象--通过元素对象操作事件
var obj = document.getElementById("aa");
//onclick:点击事件
obj.onclick=function(){
alert("点击事件的触发");
}
</script>3.事件案例
<!-- 问题：有了this的应用，是否完全取代DOM的操作了呢？
答案：不能取代，当触发事件后，改变另一个控件状态时，this做不到
案例：点击"改变图片"按钮，图片进行来回切换
-->
<img id="img" src="../img/004.png" />
<input type="button" onclick="myclick()" value="改变图片" />
<script>
var isOk = true; //全局变量
function myclick(){
var img = document.getElementById("img");
if(isOk){
img.src="../img/006.png";
}else{
img.src="../img/004.png";
}
isOk = !isOk; //每次取反
}
</script>4.获取与失去焦点
<!-- 获取与失去焦点 onfocus/onblur
案例：失去焦点时在文本框显示，'请输入邮箱地址',获取焦点时，清除该内容 -->
<input type="text" value="请输入邮箱地址"
onfocus="myfocus(this)" onblur="myblur(this)" />
<script>
function myfocus(o){
//获取焦点时，如果不是”请输入邮箱地址“，则无需清空
if(o.value=="请输入邮箱地址"){
o.value="";
}
}
function myblur(o){
//失去焦点时，如果不是""，则无需赋值
//字符串去除左右空格 trim()
if(o.value.trim()==""){
o.value="请输入邮箱地址";
}
}
</script>5.级联列表联动
<!-- onchange级联列表 -->
<select onchange="mychange(this)">
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>
<select id="city">
<option>长沙</option>
<option>湘潭</option>
<option>郴州</option>
</select>
<script>
function mychange(o){
var city = document.getElementById("city");
if(o.value=="hn"){
city.innerHTML="<option>长沙</option><option>湘潭</option><option>郴州</option>"
}else if(o.value=="hb"){
city.innerHTML="<option>武汉</option><option>荆州</option>"
}
}
</script>四、事件监听
概述：事件监听，就是通过DOM得到元素对象后，调用监听方法，绑定事件
1.绑定事件
<h1 id="aa">一级标题</h1>
<script>
var o = document.getElementById("aa");
//监听事件：参数1-事件名 参数2：函数调用，不带()
o.addEventListener("click",dianJi);
function dianJi(){
alert("点击事件");
}
o.addEventListener("mouseover",yiru);
function yiru(){
//alert("鼠标移入");
}
//除了元素的监听，还可以使用window的监听
window.addEventListener("resize",ww);
function ww(){
alert("窗口重置大小");
}
//监听的参数2，可以接函数体- 了解
o.addEventListener("mouseout",function(){
alert("鼠标移出");
})
</script>2.冒泡与捕获
概述：冒泡与捕获，主要讲解多个控件捆绑同一个事件，然后触发的优先顺序问题；
冒泡：两个关联控件，从里往外触发；默认
捕获：两个关联控件，从外往里触发
<!-- 案例：div包裹按钮，监听触发事件 -->
<div id="myDiv">
<input type="button" value="里面的按钮" id="myBtn" />
</div>
<script>
var d = document.getElementById("myDiv");
d.addEventListener("click",myDiv,true); //参数3：false冒泡 true捕获
function myDiv(){
alert("外围控件div的触发");
}
var b = document.getElementById("myBtn");
b.addEventListener("click",myBtn,true);
function myBtn(){
alert("内部控件btn的触发");
}
//移除事件
b.removeEventListener("click",myBtn,true);
</script>
<style type="text/css">
div{
width: 200px;
height: 150px;
border: solid red 2px;
}
</style>五、操作元素
操作元素，就是创建或删除控件的相关操作；创建或删除元素都和DOM有关
1.创建段落
<script>
function add(){
//创建元素
var p = document.createElement("p"); //<p></p>
p.innerHTML = "新段落"; //<p>新段落</p>
//父标签添加子标签
var body = document.getElementsByTagName("body")[0];
body.appendChild(p); //父添加子，向后追加
}
</script>
<input type="button" value="添加段落" onclick="add()" />
<p>原始段落</p>2.删除段落
<script type="text/javascript">
function del(){
//删除段落：先拿到父元素和子元素；通过父删除子
var body = document.getElementsByTagName("body")[0];
var p = document.getElementById("one");
debugger; //js中的debug调试，必须要将f12调出来
if(p){
body.removeChild(p);
}
}
</script>
<input type="button" value="删除段落" onclick="del()" />
<p id="one">段落1</p>
<p>段落2</p>3.删除表格记录
<script>
//删除表格记录： 思路： table删除tr
function del(o){ //o就是a标签对象
var tr = o.parentElement.parentElement;
//tr找到父亲，再删除自己
tr.parentElement.removeChild(tr); //父删子
}
</script>
<table border="2" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>男</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>女</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
</table>六、BOM基础
概述：BOM是浏览器对象模型，有了BOM（window对象），JS则有能力和浏览器交互
1.window对象
在JS中一切都是属于window，包括全局变量，函数，DOM，console等等都是属于window的
在前面编写的DOM中，没有写window，但默认有；后续JS案例基本也是不用写window
//在js中，一切皆属于window对象
//注意：后续window是可以忽略不写
var a = "zhangsan"; //全局变量--window属性
window.document.write(window.a);
window.alert(window.parseInt("123")); //全局方法
window.console.log("hello");
window.onload=function(){
alert("页面加载");
}2.window尺寸
document.write("页面内部宽高:"+window.innerWidth+"--"+window.innerHeight+"<br />");
document.write("body内部宽高:"+window.document.body.clientWidth+"--"
+window.document.body.clientHeight+"<br />");
document.write("屏幕宽高："+window.screen.availWidth+"--"+window.screen.availHeight);3.location跳转
location可以用于获取url路径中的资源；同时也可以进行页面的跳转（常用）
//获取url的资源
document.write("主机名:"+window.location.hostname+"<br />");
document.write("主机:"+window.location.host+"<br />");
document.write("端口:"+window.location.port+"<br />");
document.write("路径名:"+window.location.pathname+"<br />");
document.write("协议:"+window.location.protocol+"<br />");
//location跳转
//window.location.href="http://baidu.com";
//window.location.assign("http://baidu.com");
//了解：open,可以打开新窗口跳转,注意-要放开拦截
//window.open("http://baidu.com");
//页面重新加载--刷新-场景：用在方法实现中
//window.location.reload();
alert("重写加载...");
扫一扫
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
