js基础

js

12.15日笔记

js变量

变量类型

string number boolean null undefined object
使用变量之前需要对变量提前声明和赋值
// var a;
var b,c;
var k=10;
console.log(a,b,c);----undefined 没有被定义
console.log(k);k=10

变量类型检测(typeof)

 var a=10;
    var b="a";
    var c=null;
    var d=true;
    var e=undefined;
    var f={};
    var g=function (){
    var nn=1;
    console.log(typeof  a)  //number类型

全局变量与局部变量作用域

var a=10;//全局变量
f1();
f2();
function f1(){
var b=5; // 局部变量
console.log(a,b,); //输出结果10，5
}
function f2(){
var c=6;
console.log(a,b,c);//c不是全局变量，输出结果c 没有被定义
}

js函数问题

常规定义方法function 函数名称（）{}
menthod(); //执行
function method(){
console.log(“输出”)；
}

console.log(method1(）)；
function method1()(){
retrun “你好”； //返回数据类型不定
}
method_2(1,2,3);
function method_2(a,b,c){
console.log(a,b,c);
} //输出1，2，3

使用 传递的参数 arguments

method4（1，2，3）；
function method4（）{
console.log(arguments[0]); //输出第一个值1
console.log(arguments[1]);// 输出第二个值2
console.log(arguments.length); //输出字符长度
}

匿名函数不带名称 不能被提前声明

var method_n=function (){

    }
    method_n();

自执行参数（匿名）自动自行

带括号，在括号内执行
例
（function() {
console.log(1);
})
(); // 括号表示执行
自执行函数参数，使用传递参数
（function () {
console.log(arguments );// 传递参数
})
(1,2,3);

运算符

    * 运算符
    * 数学运算符   + - * /  % /  ++ --  = == ===
    *
    * ++ --  前置(先++ --在运算)  后置 （先运算在++ --）
    *
    *
    * 逻辑运算符  && || ！  & |(位运算  二进制  >>  << )
    *
    * 比较运算符  > < >= <= !=
    * 

      ==  === 区别
    ==  值一样  类型不定
    === 值和类型一致

js语句

逻辑结构if
if（）{}
（）里放置的是 ture false 0代表false 非0代表 ture

for
for(var i=0;i<10;i++)
{
console.log(i);
}

while
do while //先执行后循环
while(true){
//执行代码
}

    var n=0;
    do{
        n++;
        console.log(n);
    }while(n<=10);

逻辑运算符 三元运算符
条件 ？为true ：为false
1==1?console.log(“a”):console.log(“b”);
输出结果为a

dom元素获取

获取方式8种（4种动态获取，2种固定获取，提供的两种固定元素的获取）

4种动态获取方式
document.getElementsByTagName(); //htmlcollection 集合类型
document.getElementsByClassName(); //htmlcollection 集合类型
document.getElementsByName(); //NodeList
document.getElementsById(); // object 单个对象

2种固定获取 ，初始页面有几个元素 获取几个 后期动态添加的不能直接获取
document.querySelector() //()内写类名称
document.querySelectorAll(".btn");

---

y> 按钮 按钮2 动态添加 提供了两个固定元素的获取 console.log(document.body); //获取整个body console.log(document.documentElement) //获取整个html页面

var insert=document.getElementById(“btninsert”);
insert.οnclick=function (){
var but=document.createElement(“div”);
but.className=“btn”;
document.body.appendChild(but);
console.log(dom2.length,queryall.length);
}

dom元素事件

*dom 元素的事件
事件都哪几类：
鼠标事件
mousedown mouseup mouseover mousemove mouseleave mouseout mouseenter
键盘事件
keydown keyup keypress
表单事件
blur focus change
浏览器事件
load error resize
触屏事件
touchstart touchmove touchend

注意： js的事件在使用的时候要带on 如onmousedown

按钮

注册
function msg() {
console.log(“按钮”);
}
function down() {
console.log(“down”);
} //输出结果 按钮 down
var regest = document.querySelector("#btn"); //直接动态绑定事件 （获取dom 在绑定事件）

监听事件可以绑定多个
regest.addEventListener(“click”, method2);
function method2() {
console.log(“1”);
regest.removeEventListener(“click”, method2);
}
regest.addEventListener(“click”,method);
function method(){
console.log(2);
}
输出结果 1 2 regest.removeEventListener(“click”,method);
监听事件的移除
addEventListener 监听事件 第三个参数不写 默认是事件冒泡
第三个参数默认为false 冒泡 如果为 true 则为捕获