游戏中的HTML属性有两种用法，你知道吗？

©

©

®

注册商标

®

®

™

商标

™

™

×

乘号

×

×

÷

分区标志

÷

÷

需要记住空的、>、

案例：美容廊

// 1. 获取一组a元素
let links = document.getElementsByTagName('a');
// 2. 获取id为photo的img元素
let photo = document.getElementById('photo');
// 3. 获取id为des的p元素
let p = document.getElementById('des');
// 4. 循环遍历a，注册 click事件
for (let i = 0; i < links.length; i++) {
  links[i].onclick = function () {
    // 4.1 获取当前点击的a的href值赋值给 img的src属性
    photo.src =  this.href;
    // 4.2 获取当前点击的a的title值赋值给p的 textContent
    p.textContent = this.title;
    // 4.3 取消a的默认跳转行为
    return false;
  };
}

注意：在为a元素注册点击事件时，如果a元素设置了href属性html空格是用案例分析，当a的点击事件被触发并执行事件处理函数时，执行会继续跳转到href 属性，这是 a 标签的默认行为。

我们希望a的事件处理程序不跳转，取消a标签的默认行为可以在事件处理程序中为false

表单属性

最初的目的是为了验证用户的输入是否合法。为了验证表单元素，我们需要获取用户输入的内容，这需要用到表单元素的属性。

案例：登录验证

let btn = document.querySelector('#btn');
btn.onclick = function () {
  let username = document.querySelector('#username').value;
  let pwd = document.querySelector('#pwd').value;
  let chk = document.querySelector('#chk');
  if (!chk.checked) {
    alert('请同意用户协议');
    return false;
  }
  if (username.length  6) {
    alert('用户名应该在3-6位之间');
    return false;
  }
  if (pwd.length < 8) {
    alert('密码必须超过8位');
    return false;
  }
  alert('我去登陆了')
  // 阻止 a 的默认行为
  return false;
};

案例：注册页面

// 1. 获取复选框
let agree = document.querySelector('#agree');
// 2. 获取按钮
let registerBtn = document.querySelector('#registerBtn');
// 3. 给复选框注册点击事件
agree.onclick = function () {
  registerBtn.disabled = !agree.checked;
};

案例：选择购物车的所有功能

// 1. 获取thead中一个复选框
let allck = document.querySelector('#all');
// 2. 获取tbody中一组复选框
//【功能1】
let cks = document.querySelectorAll('tbody input[type=checkbox]');
// 3. 给thead中一个复选框注册点击事件
allck.onclick = function () {
  // 3.1 获取thead中这个复选框的checked值
  let isOk = allck.checked;
  // 3.2 循环遍历tbody中的每一个复选框，设置checked值为thead中这个复选框的checked值
  for (let i = 0; i < cks.length; i++) {
    cks[i].checked = isOk;
  }
};
//【功能2】
// 1. 循环遍历tbody中每一个复选框注册点击事件
for (let i = 0; i < cks.length; i++) {
  cks[i].onclick = function () {
   // 2. 获取tbody中所有的复选框的个数
    let len1 = cks.length; 
    //3. 获取tbody中选中的复选框的个数
    let len2 = document.querySelectorAll('tbody input:checked').length;
    // 4. 对比是否一致，若一致，则设置thead中全选框为true，否则为false
    if (len1 === len2) {
      allck.checked = true;
    } else {
      allck.checked = false;
    }
  };
}

自定义属性

到此我们介绍了标签所具有的属性，即HTML中的标准属性。标签还支持自定义属性。为了满足某些业务需求，我们可以将数据存储在标签的自定义属性中。

例如：在购物车的情况下，如果我们想删除购物车中的某个商品，可以将这个数据的id存储在当前行的自定义属性中，比如属性proId。

自定义属性有两种用途html空格是用案例分析，即：

// div
const d5 = document.querySelector('#d5');
const d6 = document.querySelector('#d6');
// 浏览器中审查元素，可以看到 d5 的 div 中会有 proId 的属性
d5.setAttribute('proId', 5)
console.log(d5.getAttribute('prodId'))
// 浏览器审查元素，可以看到 data-pro-id 的属性
// 浏览器自动把大写字母转换成了 pro-id 的形式
d6.dataset.proId = 6
console.log(d6.dataset.proId)

注意：我们得到的自定义属性或标准属性的值都是字符串类型。

删除
删除

浏览器在处理 HTML 时，会将 HTML 文档转换成浏览器内存中的 DOM 树。在转换过程中，标签的 HTML 标准属性会被转换为 DOM 元素的属性，但标签是自定义的属性不会转换为 DOM 元素的属性。

const d5 = document.querySelector('#d5');
console.log(d5.proId);  // 打印的结果为 undefined

但是我们可以设置DOM元素的自定义属性。注意这里的自定义属性不会转换成HTML标签的自定义属性，只会转换为对象的属性。我们仍然可以通过 DOM 对象的 Value 来获取这个属性。

const d6 = document.querySelector('#d6');
d6.proId = 6
console.log(d6.proId);  // 打印结果为 6

案例：点击小图切换到大图

let small = document.querySelector('#small');
let big = document.querySelector('#big');
small.onclick = function () {
  // 在事件处理函数中可以通过 this 获取到触发事件的元素
  // 这里的 this 就是 small 对象
  let bigImgSrc = this.dataset.big;
  big.src = bigImgSrc;
};

家庭作业

图片切换

猜数字游戏

文章来源:http://www.toutiao.com/a7034312894980293127/

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。