js基础第二天

2017-11-25 本文已影响0人 LIT乐言

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 = '<h2>我是标题</h2><p>我是段落</p>';

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部分

  <div id="box">
  <span id="oSpan">食物选取</span>
  <ul id="oUl">
      <li>苹果</li>
      <li>香蕉</li>
      <li>黄瓜</li>
  </ul>
  </div>

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中方法行内式内嵌式外联式

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<arr.length; i++){
      console.log(arr[i]);
  }

2.数组的应用隔行变色
- box.getElementsByTagName('li'); 获取box里面所有的li标签,返回一个伪数组,目前可以认为是一个数组
3.全选,反选,不选

4.排他思想

  // 1.获取按钮
  var list = document.getElementsByTagName('button');
  for(var i = 0; i<list.length; i++){
      // 绑定事件
      list[i].onclick = fn;
  }
  function fn() {
  //            alert('点我啊');
      // 1.取消所有的按钮选中
      for(var j = 0; j<list.length; j++){
          list[j].className = '';
      }
      // 2.选中当前的按钮
      // this 在事件指令中指向事件的调用者
      this.className = 'curr';
  }![88865-106.jpg](https://img.haomeiwen.com/i9199255/6cb65ae37ac21a9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

js基础第二天

猜你喜欢

热点阅读