js的第一课

来源：互联网发布：剑灵超美龙女捏脸数据编辑：程序博客网时间：2024/05/29 09:15

一、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= 50var b= 20a>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. 替换文字

阅读全文

0 0