一、window.onload
当文档模型加载完成后执行大括号里的alert代码
window.onload=function(){
alert("页面加载完毕")
}
二、变量名命名
(1)不能以数字开头
(2)不能使用js的关键字和保留字
(3)以字母、下划线、$开头是允许的
(4)变量命名有意义
(5)变量名严格区分大小写
三、获取DOM元素的方法
(1)document.getElementsById("")
//通过id获取
(2)document.getElementsByTagName("")
//通过标签获取
四、三种输出方式
(1)alert()
//弹出警示框
(2)document.write()
//在文档中输出
(3)console.log()
//在控制台输出
五、字符串(string类型)
(1)字符方法
1.str.charAt()
2.str.charCodeAt()
3.str.fromCharCodeAt()
(2)索引
var str="123456"
alert(str.indexOf("")) //从字符串的开头向后搜索子字符串
alert(str.lastIndexOf(""))//从字符串的末尾向前搜索子字符串
alert(str.indexOf("",2)) //第二个参数代表从字符串的哪个位置开始搜索
如果没有找到该子字符串,则返回-1
(3)截取字符串中的元素
substring方法
1.str.substring(7)
//7代表截取字符串中的几个字符
2.str.substring(0,7)
//截取字符串中0-7个字符;如果第一个参数为负数,那么自动转化为0,也就是从第一个字符开始截取;如果第二个参数是负数,那么自动与第一个参数交换位置,并且转化为0。
slice方法
1.str.slice(7)
//一个参数代表从第几位开始截取;如果参数是负数,就代表从字符串的末尾截取多少位。
2.str.slice(0,7)
//两个参数代表从第几位截取到第几位
(4)大小写转换
1.toUpperCase()
//转换大写
2.toLowerCase()
//转换小写
(5)split分割
split是用某个字符分割原始字符串,分割后将会把原始字符串转化为数组,然后通过数组下标的形式可以访问某个数组成员。如果没有明确指定字符串以哪个字符来分割,那么split分法中的空字符串代表将原始字符串中的每一项切割成数组成员。
str.split("","")
//如果有第二个参数则代表分割后的数组保留几个成员
六、数组
(1)数组的创建
1.以对象方式来创建
var arr=new Array();
arr[0]="我是第一个数组"
arr[1]="我是第二个数组"
arr[2]="我是第三个数组"
2.以字面量方式创建
var arr=["hello",1,2,3,[10,5,ture]];
(2)concat()拼接数组
var arr3=[1,2,3];
var arr4=[4,5,6];
alert(arr3.concat(arr4));
(3)join()分割
var arr3=[1,2,3];
var arr4=arr3.jion("#"));//此处arr4变量已经变成了字符串
(4)reverse()翻转数组
var arr3=[1,2,3];
alert(arr3.reverse());
(5)数组添加、删除元素
1.arr.pop()
//删除最后一个元素
2.arr.shift()
//删除第一个元素
3.arr.unshift()
//在数组前面添加元素,多个元素用”,”隔开
4.arr.push()
//在数组后面添加元素,多个元素用”,”隔开
5.arr.splice(0,3,a)
//从下标为0的元素开始,删除到下标为3的元素,a是接收新赋值可以有多个。
(6)弹出框
1.confirm("")
//确认框
2.prompt("")
//输入框
3.alert("")
//警示框
(7)三元表达式(类似于if/else)
var a= 50
var b= 20
a>b?alert("大于"):alert("小于");//?代表输出;:代表否则
七、运用
以js实现查找和替换一段文章中的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 600px;
padding: 20px;
margin: 0 auto;
border: 10px solid orange;
}
span {
margin: 0;
padding: 0;
line-height: 26px;
font-family: "微软雅黑";
}
.box a {
display: block;
width: 50px;
height: 10px;
border: 1px solid #FFFFFF;
float: left;
text-decoration: none;
padding: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
.active {
background: orange;
color: #fff;
}
p {
clear: both;
}
</style>
<script type="text/javascript">
window.onload = function() {
var Odiv = document.getElementsByTagName("a")
var Op = document.getElementsByTagName("p")
var Oinput=document.getElementsByTagName("input")
var Ospan=document.getElementsByTagName("span")[0]
var str1=Ospan.innerHTML;
Op[1].style.display = "none"
Odiv[0].onclick = function() {
for(var i = 0; i < Odiv.length; i++) {
Odiv[i].className = "aaa"
}
this.className = "active"
Op[0].style.display = "block"
Op[1].style.display = "none"
}
Odiv[1].onclick = function() {
for(var i = 0; i < Odiv.length; i++) {
Odiv[i].className = "aaa"
}
this.className = "active"
Op[0].style.display = "none"
Op[1].style.display = "block"
}
Oinput[1].onclick = function() {
var str = Oinput[0].value;
if(str=="") {
alert("请输入内容");
}else if(str1.indexOf(str) != -1) {
var arr = str1.split(str);
str = arr.join('<span style="background:yellow;">' + str + '</span>')
Ospan.innerHTML = str
} else {
alert("未查找到");
}
}
Oinput[4].onclick=function(){
var str2=Oinput[2].value;
var str3=Oinput[3].value;
var arr1=str1.split(str2)
if(str3==""){
alert("请输入替换内容")
}
else if(str1.indexOf(str2)!=-1){
str3=arr1.join('<span style="background:yellow;">'+str3+'</span>');
Ospan.innerHTML=str3;
}
else{
alert("为查找到")
}
}
}
</script>
</head>
<body>
<div class="box">
<span>
教养和文化是两回事,有的人很有文化,但是很没教养,有的人没有什么太高的学历和学识,但仍然很有教养,很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长,未知的东西那么多。人与人之间的关系往往是相互的,与人为善,也是与自己为善。让自己更平和一点,更豁达一点,对于身边的过错,让自己更宽容一点。人人都有他的难处,何必强求于人。人生在世,行路匆匆,生活充满变数,时而乐极生悲,时而苦尽甘来,一切不必较真,只须笃定前行。要敢于认错,既然错了,就要纠正,虚假是味毒药,真实能帮你把失去的赢回来;要敢于担当,回避不是办法。人出生时,是一块质朴的石块,有棱有角,生气勃勃。但是,在生活无情的打磨中,人生慢慢被磨去棱角,变得圆滑而世故。要做坚守在悬崖峭壁上石块,勇敢忍受风霜的雕刻,永远保留自己的棱角。不要做河流里的石头,享受微波多情的抚摸,最后变成一块光亮的鹅卵石。
</span>
<a href="#" class="active">
查找
</a>
<a href="#">
替换
</a>
<p>
<input type="text" />
<input type="button" value="查找" />
</p>
<p>
<input type="text" />
<input type="text" />
<input type="button" value="替换" />
</p>
</div>
</body>
</html>
运行结果图如下:
1.
2.
3.
4.