JavaScript学习

1.js的功能:

实现网页中数据的验证、动态特效、触发事件

由浏览器解释JS的语法；

2.使用方式:

2.1 直接在标签使用

<button 事件="JS语言函数">点一下</button>

2.2 在html页面中使用

<script type="text/javascript">
    //JS语言
</script>

2.3 在html页面中引用

<script type="text/javascript" src="JS文件地址"></script>

3.基本语法

3.1数据类型

3.1.1 变量定义

var 变量名;//变量定义：声明+初始化;

变量名=值；

var x;//没有类型
var y=10;//类型是number
y=true;//类型是boolean
y="hello";
y='中文';

3.1.2 变量类型

string字符串："" 或者 ''

number数值：整数和小数、负数

boolean布尔：true和false

3.1.3 数组

数组：var 变量=[元素,元素]，数组名[下标],下标从0开始取值；

var arr=[true,100,'test']

var brr=[[],[]]

3.1.4 引用类型

{key:value,key:value}     

var o1={username:"张三",password:'666',sex:true,age:20,hobby: ['h1','h2','h3',{h:1,h2}]};

alter(o1.username);

3.1.5 查看变量数据类型

typeof(变量名)  结果:number/string/boolean/object

3.1.6 其他

null：空值

NaN：非数字，not a number

undefined：未定义

3.2 弹出框

alert(内容)：只能确定(经常使用)

confirm(内容)：确定和取消按钮，返回true或false，用于删除提醒；

prompt(内容)：确定和取消按钮，还可以输入内容，可以接收用户的输入内容

3.3 在控制台输出

console.log(内容);

3.4 语句

if...else if....else

switch

switch(变量){
case 值:
break;
default:
break;
}

while          do...while

        while(条件表达式){ }

        do{ }while(条件表达式)

for

for基本循环
 for(var i=0;i<值;i++){
 
}

foreach增强循环：
  for(var 变量 in 数组){//变量代表数组的下标
         数组[变量]
  }

3.5 运算符

算术运算符：+    -    *    /    %

比较运算符：>   >=   <   <=   ==   ===   !=   !==

             == 比较值是否相等

             === 比较值和类型是否相等

逻辑运算符：&&   ||   !

赋值运算符：=   +=    -=   *=    /=    %=

单目运算符：++   --

三目运算符： 表达式 ? 结果1:结果2;

3.6 数据类型的转换

字符串转为整数/浮点数

  var a='10';//string 
  a=parseInt(a);//number 

  a='1.5'; 
  a=parseFloat(a);//number

4.事件

4.1 事件 

由前端用户触发的行为；例：单击/键盘按下事件.

4.2 常见事件

onclick 鼠标单击

ondblclick 鼠标双击

onkeydown 键盘按下

onkeyup 键盘抬下

onfocus 获得焦点

onblur 失去焦点

onchange 内容改变

oninput 输入内容事件

onsubmit 表单提交，表单中的submit框被点击时触发的事件

onload 页面加载，页面的内容加载完成后触发的事件

window.onload=function(){
   //js语句，但不能定义方法:function()就是个方法,方法内不能定义方法
}

onmouseenter/onmouseover   鼠标经过事件

                onmouseenter只触发一次

                onmouseover会进行多级触发

onmouseleave/onmouseout 鼠标离开事件

onmousemove 鼠标移动事件

5.函数

定义相关的特殊功能,即方法；

定义函数:

function 函数名(形参数名){

           //函数体

}

function show(x){
     console.log(x);
}

调用函数:

通过事件调用函数;

<button onclick="show('abc')">点我</button>

6. DOM

6.1 dom

document object model 文档对象模型；

标签，又称为节点;

6.2 DOM树

文档 : document

元素: element

节点: node

6.3 获得节点

直接根据id获得节点的方式：

var v=document.getElementById("id名称");

根据类class名称获得节点的方式：

document.getElementsByClassName("class名称");

       注：返回是一个数组； 哪怕class名称只有一个时，也是数组类型；

通过选择器获取节点的方式:

document.querySelector("选择器   /  #id  /  .class");

根据兄弟节点获得节点的式：

        后一个兄弟：nextElementSibling

        前一个兄弟：previousElementSibling

父节点：parentNode

子节点：children

         第一个子节点：children[0];

         最后一个子节点：children[长度-1];

6.4 更改节点的属性值

对于html:

    对象.属性名=值;

<img id="pic" src="" width=""/>

对于css:

   对象.style.属性名=值;

<div id="pic" style="width:300px;height:200px;font-size:20px"></div>

案例:

//当鼠标经过这个图片时，图片的大小更改为400；
//事件=函数: onmouseenter="函数()"
//函数体：获得当前图片标签，再更改它的属性width为400

//调用函数
<img id="pic" src="1.jpg" width="200" onmouseenter="changeWidth()"/>

<script>
  //定义函数
  function changeWidth(){
     //获得对象
     var pic=document.getElementById("pic");
     //对象.属性=值
     pic.width="400";
  }
</script>

6.5 更改节点的内容

双标签的内容：对象.innerHTML  

<div id="change">内容</div>

var new=document.getElementById("change");
alter(new.innerHTML="改变后的新内容");

表单元素的内容：对象.value  修改的是value的值;

                             要是修改标签中间的内容,使用:对象.innerHTML  

表单元素:input/select/textarea

<input value=""/>

<select name="">
    <option value="">内容</option>
</select>

<textarea value="">内容</textarea>

6.6 操作节点

创建节点

var opt=document.createElement("option");

添加节点

父节点.appendChild(子节点);

<select ip="sel">
   <option> </option>
</select>

//创建节点
var opt=document.createElement("option");
//给sel对象添加子节点opt 即:给select标签添加option标签
sel.appendChild(opt); 

移除节点

父节点.removeChild(子节点);

<select ip="sel">
   <option> </option>
   <option> </option>
</select>

//创建节点
var opt=document.createElement("option");
//删除sel对象的子节点opt 即:删除select标签的option标签
sel.removeChild(opt); 

7. 其他补充

7.1 定位样式属性

绝对定位: position：absolute绝对定位/ relative相对定位 /fixed固定
获得某个对象的方位值：对象.getBoundingClientRect();  (X,Y)点

7.2 显示属性

display: block块级显示 /inline行内显示 / inline-block/ none不显示

7.3 内容溢出属性

overflow：visible可见的/hidden隐藏/scroll滚动

7.4 定时器***

1. 周期性的执行：A=setInterval("函数()",毫秒)
2. 调用一次执行：B=setTimeout("函数()",毫秒)
3. 关闭周期性的执行：clearInterval(A);
4. 闭闭“调用一次执行”：clearTimeout(B)

8. Bom对象

browser object model 浏览器对象模型

window窗体:

window.document.getElementById();

window.alert();

window.innerHeight; //屏幕高度

window.innerWidth;//屏幕宽度