前端学习ing

数组是一组数据集，可以存储任何类型的元素

1.通过new来创建数组

1.var arr = new Array();

2.利用数组字面量创建数组

 var 数组名 = [1，2，3，4，5]；//创建空数组      索引号=[0，1，2，3，4]； //如果没有索引号输出元素，输出结果将成为undefined

任何数据类型都可以存储在数组中

创建字面量是最常见的，遍历是从头到尾访问一次

var arr = ['red','green','blue']; for (var i = 0;i<3;i  ){     console.log(arr[i]); } 

数组名.length在循环中可以直接访问数组的长度arr.length就会遍历

for(var i = 0;i < arr.length;i  ){     console.log(arr[i]) } 

for里的i是计数器，当索引号使用

var arr=[2,6,5,4,3]; var sum = 0; var average = 0; for (var i =0;i<arr.length;i  ){     sum  = arr[i];// } average = sum / arr.length; console.log(sum,average);多个输出值用逗号分开

var arr = ['red', 'green','blue','pink']; var str = ''; var sep = '*'; for (VAR i = 0;i < arr.length;i  ){     str  = arr[i] sep; } console.log(str);

1.修改新数组长度length长度

var arr = ['red','geen','blue']; arr.length = 5; console.log(arr);

2.增加数组元素，修改索引号，添加数组元素

var arr1 = ['red','green','blue']; arr1[3] = 'pink'; console.log(arr1); //如果索引号已经占用，以前的元素将被替换 arr1[0] = 'yellow'; console.log(arr1); arr1 = '有'； //不要直接给数组名赋值，否则里面的原始元素会消失

//遍历原旧数组，找出大于等于10的元素。 ///newArr var arr = [2，0，4，6，12，3，556，87，934]; var newArr = []; var j = 0; for (var i = 0;i < arr.length;i  ){     if (arr[i] > 10){         ///新数组的索引号应从零开始依次增加         newArr[j] = arr[i];         j  ;     } } console.log(newArr);

//方法二 var arr = [2，0，6，1，77，0，52，0，257]; var newArr = []; //刚开始newArr.length 就是0 for (var i = 0;i < arr.length; i  ){     if(arr[i] >= 10){         //新数组索引号应从0开始，依次递增             newArr[newArr.length] = arr[i];     } } console.log(newArr);

去除数组中的0后，形成不应包含0的新数组。

存储筛选后的数据需要一个新的数组。

遍历原数组，在新数组中添加非0数据(此时注意使用数组名称 索引格式接收数据)。

使用新数组中的数数length不断累加

var arr = [2，0，6，1，77，0，52，0，25，7]； var newArr = []; for (var i = 0; i <arr.length;i  ){     if(arr[i] != 0){         newArr[newArr.length] = arr[i];     } } console.log(newArr);

反过来存储数组的内容，声明一个新的数组newArr,取旧数组索引号的第四个（arr.length -1）,最后i--

var arr = ['red', 'green','blue','pink','purple']; var newArr = []; for (var i =arr.length - 1; i>=0 ; i--){     newArr[newArr.length] = arr[i] } console.log(newArr);

冒泡排序

var arr = [5,4,3,2,1]; for (var i = 0; i <= arr.length - 1;i  ){///外管列数     for (var j = 0; j <= arr.length - i; j  ){////内层管每次交换的次数         ///内部交换两个变量值，与较前一个和后一个数组元素         if (arr[j] < arr[j   1]){             var temp = arr[j   1];             arr[j] = arr[j   1];             arr[j   1] = temp;         }     } } console.log(arr);

函数

函数是包装可重复执行的代码块 目的是重复使用大量代码

function getSum(num1,num2){     var sum = 0;     for (var i = num1; i <=num2; i  ){         for(var i = num1; i<=num2; i  ){             sum  =i;         }         console.log(sum);     }     getSum(1,100);     getSum(10,50);     getSum(1,1000); }

利用函数求任意两个数之间的累积和

function getsum(num1,num2){     console.log(num1   num2); } getsum(1, 3); getsum(3, 8); ///求函数任意两个数之间的和 function getsums(start,end){     var sum = 0;     for (var i = start; i<=end; i  ){         console.log(sum);     } } getsums(1,100);

！多个参数用逗号隔开，形状参数可视为无声明变量

///函数形参数匹配参数 function getsuma(num1,num2){         console.log(num1,num2); } //如果上次按的数量与形参的数量一致，则正常输出 //如果实参的数量是多余的形参的数量，无论多余的数量如何，都会获得形参的数量 getsuma(1,2,3) //如果实参数小于形参数，num二是变量但无接收值，多余的形参定义为undefined，结果就是NaN getsuma(1)

函数内部不适合写输出句，因此函数结果需要返回

function 函数名（）{     return 需要返回的结果； } 函数名()； function getresult(){     return 666; } getresult(); console.log(getresult());  function cook(num1,num2){     return num1   num2; } console.log(cook(3,5))

两个数的最大值

function getmax(num1,num2){     return num1 > num2 ? num1 :num二、//三元表达式 } console.log(getmax(1,3));

function getsm(num1,num2){     return num1   num2;//return后面的代码不会执行     alert(这是不会执行的) } console.log(getsum(1,2)); //2.retun只能返回一个值
function fn(num1,num2){
    return num1,num2;//返回的结果是最后一个值
}
console.log(fn(1,2));

function getresu(num1,num2){
    return [num1+num2];
}//要返回俩个数的结果可以使用数列

函数如果有return就返回return后面的值，如果没有return就返回undefined

arguments存储了传递的所有实参

function fn(){
    console.log(arguments);//里面存储了所有传递过来的实参
    console.log(arguments.length);
    console.log(aeguments[2]);
    //遍历arguments
    for (var i = 0; i < arguemnts.length;i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);

伪数组，并不是真正意义上的数组

具有数组length的属性

按照索引的方式进行存储的

它没有真正数组的一些方法pop(),push()等

function getmax(){
    var max = arguments[0];
    for(var i = 1;i < arguments.length; i++){
        if (arguments[i] > max){
            max = arguments [i];
        }
    }
    return max;
}
console.log(getmax(1,2,3));
console.log(getmax(1,2,3,4,5));
console.log(getmax(1,2,3,4,5,6,7));

function reverse(arr){//反转
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--){
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1,2,3,4,5,6]);
console.log(arr1);
var arr2 = revere(['red','pink','nlue']);
console.log(arr2);

使用函数判断是否是闰年

function isrunnian(year){
    var flag = false;
    if(year % 4 == 0 && year % != 0 || year % 400 == 0){
        flag = true;
    }
    return flag;
}
console,log(isrunnian(2000))

//函数是可以相互调用的
function fn1(){
    console.log(11);
    fn2();
}
fn1();
function fn2(){
    console.log(22);
}

全局变量：在全局作用域下的变量，在全局作用下可以使用

注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量

局部变量，只能在函数内部起作用，函数的形参也是个局部变量

函数内部如果直接定义一个变量没有声明的话也算一个全局变量

function fun(){
    var num1 = 10;//num1是局部变量，只能在函数内部使用
    num2 = 10;//num2是全局变量，因为没有声明
}
fun();
console.log(num2);

从执行效率来看全局变量和局部变量

（1）全局变量只有浏览器关闭的时候才会销毁，比较占用资源

（2）局部变量当我们程序执行完毕时候销毁，比较节约内存资源

//作用域链：内部函数访问外部函数的变量，采取的是链式查找的查找的方式来决定取那个值，这种结构我们称为作用域链。
var num = 10;
function fn(){//外部函数
      var num = 20;
    
    function fun(){//内部函数
        console.log(num);
    }
    fun();
}//谁离得近就执行谁
fn();

作用域链，一层一层往外翻的查找

案例1

var num = 10;
fun();

function fun(){
    console.log(num);
    var num = 20;
}
//相当于执行了以下操作
var num;

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

案例2

f1();
console.log(c);
console.log(b);
console.log(a);

function f1(){
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
//预解析执行以下代码
function f1(){
    var a;
    a = b = c = 9;
    //相当于 var a = 9; b = 9; c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

对象是一组无需的相关属性和方法的集合，所有事物都是对象，例如：字符串、数值、数组、函数等。

var obj = {
    uname: 'yzc',
    age: 18,
    sex: '男',
    sayhi: function(){
        console.log('hi');
    }
}
//里面的属性或者方法我们采用键值对的形式 键 属性名 : 值 属性值
//多个属性或者方法中间用逗号隔开的
//方法冒号后面跟的是一个匿名函数
2.使用对象
//调用对象的属性，我们采取 对象名.属性名
console.log(obj.uname);
//调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//调用对象的方法 sayhi 对象名.方法名() 记得加小括号()
obj.sayhi();

//利用构造函数创建对象
//外面需要创建的对象有 相同的属性：名字 年龄 性别 相同的方法：
//构造函数的语法格式
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){}
}
new 构造函数名();//调用构造函数的方法
function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
 	console.log(sang)
}
}
var abc = new Star("yzc",22,'女');//把构造函数写的结果传给abc
console.log(abc.name);
console.log(abc['name']);
abc.sing('qwer');
//1.构造函数名字首字母要大写
//2.构造函数不需要return就可以返回结果
//3.外面调用构造函数 必须使用new
//4.外面只要new Star() 调用函数就创建一个对象
//5.外面的属性和方法前面必须添加this

new关键字执行过程

//new构造函数可以在内存中创建了一个空的对象
//this就会指向刚才创建的空对象
//执行构造函数里面的代码，给这个空对象添加属性和方法
//返回这个对象
function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}

for(var k in obj ){
    console.log(k);//k 变量 输出 得到的是 属性名
    console.log(obj[k]);//obj[k] 得到的是属性值
}

时间函数

const date = new Date();//!!!!!必须写这句话才可以使用日期函数
console.log(date.getFullYear());
console.log(date.getMonth() + 1); //getMonth取值为0-11，所以要在getMonth（）后面加1
console.log(date.getDate());//几号
console.log(date.getDay());//周几，周日的话返回为0

const date = new Date();
const year = date.getFullYear();
console.log('今年是' + year +'年');
const date = new Day();
const arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log('今天是' + arr[4]);

//格式化日期
const date  = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//要求封装一个函数返回当前的时分秒
function getTime() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s  ; 
}
console.log(getTime());// 11:07:42

//获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.log(bodyEle);
//获取html元素
//var htmlEle = document.documentElement;
var htmlEle = document.documentElement;
console.log(htmlEle);

事件

<body>
    <button id="btn">yzc</button>
    <script>
      //点击一个按钮，弹出对话框
      //1.时间是有三部分组成：事件源、事件类型、事件处理程序，我们也称为事件三要素
      //（1）事件源 事件被触发的对象 
      var btn = document.getElementById('btn');
      //（2）事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是鼠标按下
      //（3）事件处理程序 通过一个函数赋值的方式 完成
      btn.onclick = function(){
        alert('123')
      }
    </script>

点击按钮来显示当前时间的年月日

<body>
    <button id="btn">显示系统当前时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
      //当我们点击了按钮，div里面的文字会发生变化
      //1.获取元素
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      //2.注册事件
      btn.onclick = function(){
        div.innerText = getDate();
      }

      function getDate(){
        const date = new Date();
        const year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate(); 
        var day = date.getDay() ;
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        return  '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
      }
      //我们元素可以不用添加事件
      var p = document.querySelector('p');
      p.innerText = getDate();
    </script>
</body>

innerText 和 innerHTML的区别

<body>
    <div></div>
    <p>
        <span>1223</span>
    </p>
    <script>
     //innerText 和 innerHTML的区别
     //1.innerText  不识别HTML标签 非标准 去除空格和换行
    //  var div = document.querySelector('div');
    //  div.innerText = '<label>今天是</label>';//运行结果：<label>今天是<label>
    //2.innerHTML 识别HTML标签 识别W3C标准 保留空格和换行
    var div = document.querySelector('div');
    div.innerHTML = '<label>今天是</label>';
    //这俩个属性是可读写的 可以获取元素的内容
    var p = document.querySelector('p');
    console.log(p.innerText);
    console.log(p.innerHTML);
    </script>
</body>

表单元素点击事件

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">;
    <script>
    //获取元素
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    //注册事件 处理程序
    btn.onclick = function(){
        //input.innerHTML = '点击了'； 这个是 普通盒子 比如div标签里面的内容
        //表单里面的值 文字是通过value来修改的
        input.value = '被点击了';
        //如果想要某个表单被禁用，不能再点击 disabled 我们想要这个按钮button禁用
        btn.disabled = true;
        //或者可以写程 this.disabled = true; this的意思是当前的，this指向的是事件函数的调用者btn
    }
    </script>
</body>

输入密码，显示密码，再显示回去

<style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none; /*input表单外边框消失*/
        }
        .box label {
            position: absolute;
            right: 30px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="" id="eye">~</label>
        <input type="password" name="" id="pwd" >
    </div>
    <script>
        //获取元素
        var pwd = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //注册事件 处理程序
        var flag = 0;
        eye.onclick = function(){
            if (flag ==0 ){
                pwd.type = 'text';
                flag = 1;
                eye.innerText = '!';
            }else {
                pwd.type = 'password';
                flag = 0;
                eye.innerText = '~';
            }
            
        }
    </script>
</body>

通过js来变化css

  <style>
       div {
        width: 200px;
        height: 200px;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <div></div>
    <script>
       var div = document.querySelector('div');
       div.onclick = function(){
        this.style.backgroundColor = 'purple';
        this.style.width = '400px';
       }
    </script>
</body>

显示或隐藏文本框里的内容

<style>
     input {
        color: darkgray;
     } 
    </style>
</head>
<body>
  <input type="text" value="手机">
    <script>
     var text = document.querySelector('input');
     text.onfocus = function(){
        console.log('得到了焦点');
        if (this.value === '手机') {
            this.value = '';
        }
        //获得焦点需要把文本框里的文字颜色变黑
        this.style.color = '#333';
     }
     text.onblur = function(){
        console.log('失去了焦点');
        if (this.value ===''){
            this.value = '手机';
        }
         //失去焦点需要把文本框里的文字颜色变浅
         this.style.color = 'darkgray';
     }

多项style修改事件

  <style>
     .change {
        background-color: aqua;
        color: blue;
        font-size: 25px;
        margin-top: 100px;
     }
    </style>
</head>
<body>
    <div>文本</div>
    <script>
        //使用element.style获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
    var test = document.querySelector('div');
     test.onclick = function(){
        //让我们当前元素的类名改为了change
        //我们可以通过 修改元素的className更改元素的样式 适用于样式较多或者功能复杂的情况
        //因为className会直接覆盖原来的类名
        //3、如果想要保留原先的类名，我们可以这么做，多类名选择器//this.className = 'first change'
        this.className = 'change';
     }
    </script>
</body>

<style>
    .div {
        width: 600px;
        font-size: 12px;
        color: #999;
        background-color: aqua;
        padding-left: 20px;
     }
     .message {
        width: 300px;
        color: aquamarine;
        background-color: bisque;
        padding-left: 20px;
     }
     .wrong {
        background-color: brown;
     }
    </style>
</head>
<body>
    <div>
        <input type="password" class="ipt" value="">
        <p class="message">请输入6~16位密码</p>
    </div>
    
    <script>
     //如果输入正确则提示正确信息为绿色小图标
     //如果输入不是6=16位，则提示错误细腻些颜色为红色 小图标变化
     //因为里面变化样式较多，我们采取className修改样式
     //1.获取样式
     var ipt = document.querySelector('.ipt');
     var message = document.querySelector('.message');
     //2.注册事件 失去焦点
     ipt.onblur = function(){
        if (this.value.length < 6 || this.value.length > 16){
            // console.log('错误');
            message.className = 'wrong';
            message.innerHTML = '您输入的位数不对';
        }
     }
    </script>

排他思想，在一群元素中只使用某一元素

<style>
    button {
        background-color: burlywood;
    }
    </style>
</head>
<body>
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
   <button>按钮4</button>
   <button>按钮5</button>
   <button>按钮6</button>
   <button>按钮7</button>
    
    <script>
     //1.获取所有按钮元素
     var btns = document.getElementsByTagName('button');
     for (var i = 0 ; i < btns.length; i++){
        btns[i].onclick = function(){
            //我们先把所有按钮背景颜色去掉
            for (var i = 0; i < btns.length;i++) {
                btns[i].style.backgroundColor = '';
            }
            //然后才让当前的元素背景颜色为pink色
            this.style.backgroundColor = 'pink';
        }
     }
        //首先先排除其他人然后才设置自己的样式，这种排除其他人的思想我们称为排他思想

全选反选

<body>
 <div>
    <table border="1px solid blank">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iphone13</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>ipad</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>ipad air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>apple watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
 </div>
    
    <script>
    //全选和取消全选的做法：让下面所有复选框的checked属性（选中状态）跟随 全选按钮即可
    //获取元素
    var j_cbAll = document.getElementById('j_cbAll');
    var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
    //注册事件
    j_cbAll.onclick = function(){
        //this.checked 它可以得到当前复选框的选中状态，如果是true，就是选中，如果是false，就是未选中
        console.log(this.checked);
        for (var i = 0; i < j_tb.length; i++){
        j_tb[i].checked = this.checked;//把选中的状态赋值给数组中每一个选项框
    }
    } 
    //下面复选框需要全部选中，上面全选才能选中的做法：给下面所有复选框绑定点击事件，每次点击都要循环
    for (var i = 0; i < j_tb.length; i++){
        j_tb[i].onclick = function(){
            var flag = true;
       for (var i = 0; i< j_tb.length; i++){
        if (!j_tb[i].checked) {
            flag = false;
            break;//退出for循环，可以提高执行效率，因为只要有一个没有选，剩下的无需循环
       }
        }
        j_cbAll.checked = flag;
        }
    }
    </script>

var div = document.querySelector('div');
//console.log(div.getTime);
console.log(div.getAtrribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAtrribute('data-index'));
console.log(div.getAtrribute('data-list-name'));
//h5新增的获取自定义属性的方法，它只能是data开头的
//dataset是一个集合里存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
//如果自定义属性里面有多个-连接的词，我们获取的时候采取驼峰命名
console.log(div.dataset.listName);
console.log(div.dataset['listName']);