javascript第一课

最新推荐文章于 2022-05-03 17:07:55 发布

原创最新推荐文章于 2022-05-03 17:07:55 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript的基础操作，包括获取页面元素、弹窗与文档写入、字符串处理、数组操作等内容，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、JavaScript获取对象

var obtn=document.getElementsByTagName("button")//通过TagName来获取对象，此方式为通过HTML标签名来获取此组标签对象
var oDiv=document.getElementByID('div')//通过ID来获取对象，此方式通过ID名来获取一组div

2、js的弹出窗口及文档写入

弹出窗口

提示框：alert(" ");

确认框：confirm(" ");

输入框：promot(" ");

document.write("")//将括号中的内容写入到文档中

concole.log("")//将括号中的内容写入到控制台中

3、JavaScript中字符串的各种应用

document.write(a.charAt(0);//输出字符串a中的第0个元素

document.write(a.charCodeAt(0);//将字符串a中的下标为0的元素变成字符编码

document.write(string.fromCharCode(20170));//将第20170个字符编码转换为汉字

document.write(a.indexOf("?")//找出字符串a中？是第几个字符

document.write(a.lastIndexOf("?")//（从后往前找）找出字符串a中？是第几个字符

document.write(b.substring(7));//此处的7代表截取几个字符
document.write(b.substring(0,20));//如果该方法有2个参数，则代表从第一个参数开始，截取到第二个参数的位置
document.write(b.substring(-15,20));//如果第一个参数是负数，那么就会自动转化为0，也就是从第一个字符开始
document.write(b.substring(15,-20));//如果第二个参数为负数，那么就会自动与第一个参数交换位置，并且转化为0

document.write(c.slice(0));//一个参数表示从字符串的第几位开始截取

document.write(c.slice(0,20));//如果该方法有2个参数，则代表从第一个参数开始，截取到第二个参数的位置

document.write(c.slice(-10));//参数为负，表示从字符串末尾开始截取多少位

用字符串的应用实现查找和替换文章中的部分字符

<!DOCTYPE html>
 <html>
 <head>
 <title>查找替换</title>
 <meta   charset=utf-8>
 <style>
 *{margin: 0;padding: 0;} 
 body{font-family:"微软雅黑";}
 button{width:80px;height:40px;font-size:20px;}
 .active{background: orange;color:#fff;font-weight:bold;}
#container{width:600px;overflow:hidden;border:15px solid #000;font-size:20px;margin:0 auto;background:#999;}
#container span{display:block;padding:20px;}
#container #box{width:400px;margin-left:20px;margin-top:-30px;margin-bottom:10px;}
 </style>
 <script>
      window.onload=function(){    
        var obtn=document.getElementsByTagName("button");
        var op=document.getElementsByTagName("p");
         var oinput=document.getElementsByTagName("input");
           var ospan=document.getElementsByTagName("span");
        op[1].style.display="none";
        obtn[0].onclick=function(){
           for(i=0;i<obtn.length;i++)
          {obtn[i].className="";}
          this.className="active";
           op[1].style.display="none";
          op[0].style.display="block";
        }        
          obtn[1].onclick=function(){
          for(i=0;i<obtn.length;i++)
          {obtn[i].className="";}
          this.className="active";
          op[0].style.display="none";
          op[1].style.display="block";
        }
        oinput[1].onclick=function(){
          if(oinput[0].value==""){//简单的验证
            alert("请输入内容")  
          }
                  str=oinput[0].value;
                  //alert(str);
                  var ospan=document.getElementsByTagName("span")[0];
                  var oospan=ospan.innerHTML;
                   if(oospan.indexOf(str)!=-1){
                   var newinnerHTML=oospan.split(str);
                  //alert(newinnerHTML);
                  //alert(newinnerHTML.join("<mark>"+str+"</mark>"));
                 ospan.innerHTML=newinnerHTML.join("<mark>"+str+"</mark>");
                }
          }
         oinput[4].onclick=function(){
           if(oinput[2].value==""||oinput[3].value==""){//简单的验证
            alert("请输入内容")  
          }
          str2=oinput[2].value;str3=oinput[3].value;
          var ospan=document.getElementsByTagName("span")[0];
          var oospan=ospan.innerHTML;
           if(oospan.indexOf(str2)!=-1){
                   var newinnerHTML=oospan.split(str2);
                  //alert(newinnerHTML);
                 ospan.innerHTML=newinnerHTML.join(str3);
                }
         }
      }
</script>
 </head>
     <body>
<div id="container">
  <span>教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</span></br>
    <div id="box">
       <button>查找</button>
    <button>替换</button>
       <p><input type="text"><input type="button" value="查找"></p>
        <p><input type="text"><input type="text"><input type="button" value="替换"></p>
    </div>
    </div> 
     </body>
 </html>

4、JavaScript数组

创建数组

1、构造函数法（以对象方式）

var arr1=new Arrray()

2、以字面量方式

var arr2[]

对数组元素进行操作的方法

var arr[1,2,3,4]

arr.reverse()//将数组中元素顺序翻转

arr.pop()//删除最后一个元素且返回最后一个元素

arr.shift()//删除第一个元素且返回第一个元素

arr.push()//添加一个数据到数组的最后并返回数组的长度

arr.unshift()//添加一个数据到数组的开头并返回数组的长度

arr.splice(0,3)//从数组中下标为0的元素开始删除3个元素，并返回删除的元素

拼接数组

var arr1=[1,2,3];
var arr2=[4,5,6];
var arr3=arr1.concat(arr2);

将字符串转为数组

<script>
            var str="2016-08-15";
            document.write(str.split("-")+"<br />");
            document.write(str.split("-",2));
            alert(typeof str);
</script>

将数组转为字符串

<script>
              var arr1=[1,2,3];
              var arr2=["a","b"];
              var arr3=arr1.concat(arr2);
              document.write(arr3+"<br />");
              var arr4=arr3.join("-");
              console.log(arr4);
              alert(typeof arr4);
</script>

三元表达式

		<script type="text/javascript">
			var a= 50
			var b= 20
//			if(a<10){
//				alert("小于")
//			}
//			else{
//				alert("大于")
//				
//			}
a>b?alert("大于"):alert("小于");
		</script><!DOCTYPE  html>

用if/else语句和for循环实现求数组最值

<!DOCTYPE  html>
 <html>
 <head>
 <title>求数组最值</title>
 <meta   charset=utf-8>
 </head>
     <body>	
    <script>
   var arr=[-5,90,09,1,10];
   function max(new_arr){
    var maxNum=arr[0];
    for(i=1;i<arr.length;i++){
        if(arr[i]>maxNum){
            maxNum=arr[i];
        }
    }
    return maxNum;
   }
   document.write(max(arr));
     </script>
     </body> </html>

数组的简单排序

<script type="text/javascript">
function compare(value1, value2) {
//定义比较方法
return value1 > value2 ? 1 : -1;
}
var arr = ['34', '45', '23', '56', '88', '21', '16', '55'];
alert(arr.sort(compare).toString());
//输出结果：16,21,23,34,45,55,56,88

冒泡排序

<!DOCTYPE html>
 <html>
 <head>
 <title>冒泡排序</title>
 <meta   charset=utf-8>
 </head>
     <body>	
    <script>
            function sort(elements){
                for(i=0;i<elements.length-1;i++){
                    for(j=0;j<elements.length-i-1;j++){
                        if(elements[j]>elements[j+1]){
                            var swap=elements[j];
                            elements[j]=elements[j+1];
                            elements[j+1]=swap;
                        }
                    }
                }
                return elements;
            } 
        var element=[3,1,5,8,4,9,6,7,2,10];
        document.write(sort(element));
    </script>
     </body> </html>