js的第一堂课

今天呢,是我接触js的第一天,也是我web前端的开始,第一天的内容也不算太难,理解起来也不是很困难。

今天的重点在于选项卡的使用、文章的查找替换和数字的排序等。

选项卡(我更喜欢叫做菜单的切换),顾名思义,就是实现了我们的菜单切换功能。也是前端中十分常用的功能,老师上课也在重点强调。它的代码如下:

oa[0].onclick = function() {
  for(i = 0; i < oa.length; i++) {
  oa[i].className = "";//将所有的菜单栏添加空名字:使其没有样式
  }
  this.className = "active";//将要点击的菜单栏添加名为active的样式
   
  }
   
   
对于文字的查找替换,主要运用了split和join两个语法,将要查找或替换的字截取,然后再添加自己需要添加的内容,也是比较简单的几句语法,其代码如下:

oInput[1].onclic=function(){
  var value =oInput[0].value;
  if(oInput[0].value==""){
  alert("请输入内容!!");
  }else
  if(oValue.indexOf(value)==-1){
  alert("没有查询到内容")
  }else{
   
  var str =otext.innerHTML.split(value);//(查找的功能)把要查找的字找到并截取
  otext.innerHTML =str.join('<b style = "background:yellow;margin:0;padding:0;font-weight:100">'+value+'</b>') ;
//(查找的功能) 把该字加入背景再放回原处,以实现查找的功能
 
//var str =otext.innerHTML.split(oInput[2].value);   //(替换的功能)把要被替换的字找到并截取
//otext.innerHTML =str.join(oInput[3].value);      //(替换的功能)把要替换的字添加到原处,以实现查找的功能  

 
}
 
数字的排序其实在C中就已经接触过了,今天关于数字的排序,主要有 从小到大排序,从大到小排序,和求最大值最小值等,代码呢,也很简单:
function a(a,b){
  return a-b;
  }
  alert(arr.sort(a));//从小到大排序
  function b(a,b){
  return b-a;
  }
  alert(arr.sort(b));//从大到小排序
  function max(arr){
  var maxNum=arr[0];
  for(i=1;i<=arr.length;i++){
  if(maxNum<arr[i]){
  maxNum = arr[i]
  }
  }
  return maxNum;
   
  }
  alert(max(arr));//求最大值
   
   
  function min(arr){
  var minNum=arr[0];
  for(i=1;i<=arr.length;i++){
  if(minNum>arr[i]){
  minNum = arr[i]
  }
  }
  return minNum;
   
  }
  alert(min(arr));//求最小值
  </script>


这就是我今天学到的内容,不是很难,可以掌握,好的开始就是成功的一半,希望今后的JS之路能一帆风顺,我也会更努力的,加油。

猜你喜欢

转载自blog.csdn.net/weixin_39041271/article/details/72870907