js基础笔记

javascript笔记

1、常用的js操作的属性

• id

• className

• value

• style

  • background

  • color

  • width

  • height

  • cssText

  • 等等的一系列css样式

• innerHTML

• href

• src

• tagName

属性操作十注意事项：

1. href值和src值获取到的是绝对路径

2. style是行间的属性

3. cssText会替换掉当前的所有行间的属性

4. class是关键字，改成className

5. tagName获取到的是当前标签的大写字母

6. innerHTML会替换掉当前标签中的所有内容

 window.οnlοad=function(){
     var dm3=document.getElementById("demo3");
     dm3.οnclick=function(){
         demo2();
     };
     
     var ipt=document.getElementById("ipt");
     var dm4=document.getElementById("demo4");
     var sub=document.getElementById("sub");
     var totxt=document.querySelector("#demo4").querySelector("h1"); //父元素下的子元素选择器
     sub.οnclick=function(){
         totxt.innerHTML=ipt.value;
         dm4.style.cssText="width:100%;height:100px;border:2px solid black;background:white;";
     };
     
     var dm5img=document.querySelector("#demo5").querySelector("img");
     var get1=document.getElementById("get1");
     var dm51=document.getElementById("demo51");
     get1.οnclick=function(){
         dm51.innerHTML=dm5img.src;
         dm51.style.cssText="width: 100%;height: 40px;background-color: gainsboro;"
     }
 }
 ​
 ​
 function demo2(){
             var dm2=document.getElementById("demo2");
             dm2.style.background="red";
             dm2.style.width="500px";
         }
 ​
 function clk()
     {
         alert("niahhaufdjksdvhjdhvfjskvbkshj");
     }
 ​

typeof

获取当前值或变量的数据类型

 var a=123;
 var b="666";
 console.log(typeof a);
 console.log(typeof b);

javascript:; 防止a标签触动页面刷新

 <a href="javascript:;"> </a>  //轮播图中常用

1、javascript——数组

• 数组的定义

 var list=["a","b","c"];
 ​

• 数组——length属性：获取数组的长度（元素的个数）

 window.οnlοad=function(){
         var list=["a","b","c","d"];
         console.log(list);
         console.log(list.length);
         
     }

2、this ： 当前调用事件或调用方法的某个元素

 ​
     window.οnlοad=function(){
     获取一组div标签
     var divs=document.querySelector(".clkSelectBox").querySelectorAll("div");
     var ischkd=true;
     for(var i=0;i<divs.length;i++)
     {
         // 自定义属性
         divs[i].mark=true;
         divs[i].οnclick=function(){
             if(this.mark==true)
             {
                 // this.classList.remove("checked");
                 this.className="";
                 this.mark=false;
             }
             else{
                 // this.classList.add("checked");
                 this.className="checked";
                 this.mark=true;
             }   
         }
     }

3、classList :

• add() //为一个标签添加类名

• remove() //为一个标签移除类名

• contains() // 判断一个标签中是否存在某个类名，存在返回true，不存在返回false

• toggle() //

 ​

4、鼠标移入事件：onmouseover

 for(var x=0;x<wimg.length;x++)
     {
         wimg[x].οnmοuseοver=function(){
             this.style.backgroundImage='url(img/nv.jpg)';
         }
     }

5、数据类型

• 简单数据类型

  • number //数字类型

  • string //字符串类型

  • boolean //布尔值类型

  • null //空值

  • undefined //未定义类型

  • symbol //es6新增的类型 唯一值/匿名的值

• 复杂类型 / 引用数据类型

  • object //对象类型

• js常见的对象类型

  • Array

  • Object

  • Element

  • Elements

  • Function

6、typeof 数据类型检测，判断数据类型

7、数字类型，NaN，是一个数字类型，它是一个值，它不等于它自己，不等于任何一个值。isNaN( )方用于判断一个数字是不是NaN

8、函数的不定参数arguments

• arguments的特性：length和下标

• 案例：参数求

 var btn=document.querySelector("#btn");
 function f1(){
     alert(arguments[1]);
 };
 btn.οnclick=f1(55,88,99,66,33,1010);
 // f1(55,777,88,66);
 // f1();