前端开发笔记js基础

Posted 2022-12-04 lxq_xsyu

js的作用

1、网页特效
2、用户交互
3、表单提交
4、控制结构和样式

入口函数

window.onload = function()
     内部放js
  

这个函数的意思就是说，当我们页面加载完毕（页面结构样式节点等加载完）之后，采取执行函数体里面的js部分。

所以这句话可以在页面的顶端

<script>
    window.onload = function()
        /*要做事，先找人*/
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        var pic3 = document.getElementById("pic3");
        pic1.onclick = function()
            document.body.style.backgroundImage = "url(images/1.jpg)";
        
        pic2.onclick = function()
            document.body.style.backgroundImage = "url(images/2.jpg)";
        
        pic3.onclick = function()
            document.body.style.backgroundImage = "url(images/3.jpg)";
        
    
</script>

间距

padding内边距会影响盒子的大小，行内元素尽量不用上下的padding和margin。
继承的宽度设置padding是不会挤开盒子。

数据类型

javascript的数据类型分为：
字符型、数值型、布尔型、null、undefined
javascript是一个弱类型语言
var aa = 10;
var aa:int = 10;
javascript的变量你给什么值，他就是什么数据类型。

查看类型操作符 —— typeof

var n = 1;
typeof n;

函数定义

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
自定义函数：

function fun()
    alert("我是自定义函数")

fun();  //函数不调用，自己不执行

函数直接量声明：

var fun1 = function()
    alert("直接量声明")

fun1();  //也需要调用

利用Function关键字声明：

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

在函数体内，声明变量，会把该声明提升到函数体的最顶端，只会提升变量声明，不会赋值。

function fun()
    console.log(num);
    var num = 20;

相当于

function fun()
       var num;
       console.log(num);
       Num = 20;

下面这个例子的执行结果为：undefine 9

var a = 18;
f1();
function f1()
    var b=9;
    console.log(a);
    console.log(b);
    var a = '123';

数组

数组的声明：

var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);

使用数组：

var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])

数组的长度： 数组名.length

遍历数组：

var lis = document.getElementsByTagName("li");  // 得到所有的li
for(var i = 0; i<lis.length; i++) 
     if(i%2 == 0)   // 只有偶数能被2整除
         lis[i].style.backgroundColor = "#eee";
     
     //鼠标经过li 的时候， 当前的底色变亮
     lis[i].onmouseover = function() 
         this.className = "current";
     

数组常用方法：
（1）push : 追加
var arr =[1,3,5] → arr.push(7) → 结果变成 : [1,3,5,7];
（2）unshift：前面插入
var arr = [1,3,5] → arr.unshift(0) → 结果变成 [0,1,3,5]
（3）pop：删除最后一个元素
var arr = [1,3,5] → arr.pop() → 结果 [1,3]
（4）shift：删除第一个元素
var arr = [1,3,5] → arr.shift() → 结果 [3,5]
（5）concat：连接两个数组

var aa = [1,3,5];  
var bb = [“a”,”b”,”c”];
aa.concat(bb);     
结果：  [1,3,5,“a”,”b”,”c”];

（6）join：把数组转换为字符串

var arr = [1,2,3];
console.log(arr.join(“-”))    结果就是：  1-2-3    字符串

（7）split：把字符串转为数组

var txt = "aa-bb-cc-dd";
console.log(txt.split("-"));