js基础第二天

1.利用js可以操作样式和结构

• 1.DOM树

  
  
• 2.利用DOM树访问HTML元素(节点)

  • 通过使用 getElementById() 方法

  • getElementById() 方法返回带有指定 ID 的元素

      // 1.获取id为box的盒子
      var box = document.getElementById('box');
      console.log(box);
      // 2.修改样式 js操作盒子的样式大多数都是设置行内样式
      box.style.width = '400px';
      box.style.backgroundColor = 'yellow';
    

• 3.操作结构 innerHTML属性

  • 改变元素内容的最简单的方法是使用 innerHTML 属性

      // 1.获取标签
      var box = document.getElementById('box');
      // 2.操作标签
      // innerHTML: 获取或者修改 标签里面的内容
      box.innerHTML = '
    我是标题
    我是段落
    ';
    

2.事件的基本认识
我点击了开关,灯亮了
事件三要素 事件源 事件属性 事件指令
事件源:开关 对应HTML中的标签
事件属性: 做了什么动作, 点击
事件指令: 做的一系列操作 造成的结果/影响,灯亮了
三者结合起来: 事件源.事件属性 = 事件指令

• 事件属性

  
  

• 2.图片切换案例

    // 1.获取标签
    var box = document.getElementById('box');
    // 2.绑定事件 onmouseover 鼠标经过
    box.onmouseover = function () {
        box.src = 'images/22.jpg';
    };
    box.onmouseout = function () {
        box.src = "images/11.jpg";
    };
  

3.换肤效果案例 hao123换肤效果 给body设置背景
// 1.获取body
var body = document.body;
body.style.background = 'url(images/1.jpg)';

// 2.抽取函数 把相同的功能抽取出来,不同的做为参数传递
function changeSkin(id,url) {
    var dom = document.getElementById(id);
    dom.onclick = function () {
        body.style.background = url;
    };
}
changeSkin('pic1','url(images/1.jpg)');
changeSkin('pic2','url(images/2.jpg)');
changeSkin('pic3','url(images/3.jpg)');
changeSkin('pic4','url(images/4.jpg)');
changeSkin('pic5','url(images/5.jpg)');

4.电脑选取案例
// 1.获取标签
var box = document.getElementById('box');

function changeBackground(id,url) {
    var dom = document.getElementById(id);
    dom.onmouseover = function () {
        box.style.background = url;
    };
}
changeBackground('li1','url("images/1big.jpg")');
changeBackground('li2','url("images/2big.jpg")');
changeBackground('li3','url("images/3big.jpg")');
changeBackground('li4','url("images/4big.jpg")');
changeBackground('li5','url("images/5big.jpg")');

5.if语句的应用 美女竞价

// 1.获取标签
var oh2 = document.getElementById('oh2');
var btn = document.getElementById('btn');

btn.onclick = function () {
    // 弹出一个输入框
    /*
    * '' 代表价格为空
    * null 代表用户点击了取消
    * */
    var price = prompt('请输入价格');
    console.log(price);

    if(price != null){
        if (price == ''){
            // 价格为空,提示
            alert('价格不能为空');
        }else if(parseInt(price) < 1000){
            alert('美女很值钱,请重新竞价');
        }else if(isNaN(parseInt(price)) == true){
            // 用户输入的不是数字
            alert('请输入数字');
        } else {
            oh2.innerHTML = '底价是' + price + '元';
        }
    }else {
        console.log('用户点击了取消');
    }
}

NaN 不是一个数字, 但是一个number类型 NaN和自身不相等

6.switch应用
// 1.获取标签
var sel = document.getElementById('sel');
sel.onchange = function () {
// alert(sel.value);
var str = '';
switch (sel.value){
case '春天':
str = '春意盎然';
break;
case '夏天':
str = '夏日炎炎';
break;
case '秋天':
str = '秋风瑟瑟';
break;
case '冬天':
str = '冬雪皑皑';
break;
default:
str = '未知';
}
alert(str);
}
7.食物选择

• html部分

    
  
    食物选取
    
  
        
  苹果
        
  香蕉
        
  黄瓜
    
    
  

• js部分

    // 1.获取标签
    var box = document.getElementById('box');
    var oSpan = document.getElementById('oSpan');
    var oUl = document.getElementById('oUl');
    // 2.绑定事件
    box.onmouseover = function () {
        oSpan.style.backgroundImage = 'url("images/down.gif")';
        oUl.style.display = 'block';
    };
    box.onmouseout = function () {
        oSpan.style.backgroundImage = 'url("images/up.gif")';
        oUl.style.display = 'none';
    }
  

• display 元素隐藏后不占用位置

• visibility 元素隐藏后还继续占用原来的空间

8.transform属性
// 1.获取标签
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
var box = document.getElementById('box');
// 2.添加事件
// 平移
btn1.onclick = function () {
box.style.transform = 'translate(100px,100px)';
};
// 旋转
btn2.onclick = function () {
box.style.transform = 'rotate(45deg)';
};
// 缩放
btn3.onclick = function () {
box.style.transform = 'scale(0.5,0.5)';
}
// 综合
btn4.onclick = function () {
box.style.transform = ' translate(100px,100px) rotate(45deg) scale(0.5,0.5)';
}
9.输入框的制作

// 1.获取标签
var input = document.getElementById('input1');
var placeholder = '请输入产品名称';

// 2.绑定事件
// 当输入框成为焦点的时候会调用
input.onfocus = function () {
    if(input.value == placeholder){
        input.value = '';
        input.style.color = '#000';
    }
};
// 输入框失去焦点
input.onblur = function () {
    if (input.value == ''){
        input.value = placeholder;
        input.style.color = '#ccc';
    }
}

10.js引入的3中方法 行内式 内嵌式 外联式

11. window.onload 当界面加载完毕的时候调用
    window.onload = function () {
    }
    12.数组

• 1.数组的基本认识

    数组是用来存储大批量的数据, js中的数组可以存储不同类型的数据
    var arr = [1,'2',true,null,undefined,'123',456];
    console.log(arr);
  

  • 1.数组创建的2种方式

      var arr = new Array();
      var arr1 = [];
    

  • 2.数组是有序的,可以通过下标值/索引值来获取 索引值从 0 开始

      console.log(arr[0]);
      console.log(arr[1]);
      console.log(arr[2]);
      console.log(arr[3]);    
    

  • 3.数组的遍历, 数组有一个length属性可以获取数组中元素个数

      // 3.数组也可以采取遍历的方式取出元素
      for(var i = 0; i

• 2.数组的应用 隔行变色

  • box.getElementsByTagName('li'); 获取box里面所有的li标签,返回一个伪数组,目前可以认为是一个数组

• 3.全选,反选,不选

• 4.排他思想

    // 1.获取按钮
    var list = document.getElementsByTagName('button');
    for(var i = 0; i