目录
- 注册事件
- 案例之点击按钮切换图片
- 非表单元素的属性
- 案例
- 点击按钮div的显示和隐藏
- 切换照片
- 点击一张照片，在当前页面显现出大图
- innerHTML和innerText的区别
- innerText的兼容性处理
- 案例
- 表单元素的属性
- 案例
- 给文本框赋值
- 检测用户名
- 设置下拉框中的选中项
- 搜索文本框
- 全选和反选
- 案例
- 自定义属性操作
注册事件
- 获取页面元素
- 触发事件
案例
在body标签中定义一个input标签，和一个img标签，然后在script中，先给获取要操作的页面元素，然后给input标签设置触发事件，因为是获取点击事件，所以用事件源（这里是btn）调用onclick属性（触发事件都是由on开头），然后给写一个匿名函数赋值给btn.onclick; 所以以后每次点击按钮时都会执行function内的内容
//获取页面元素 var btn = document.getElementById('btn'); var mv = document.getElementById('mv'); //定义一个变量记录照片的状态 flag = 1; //触发事件 btn.onclick = function() { if (flag === 1) { //mv是个伪数组，所以可以用对象的方法改变mv内的属性 mv.src = 'images/b.jpg'; flag = 2; // 让下一次点击时可以切换回上一张 } else if (flag === 2) { mv.src = 'images/a.jpg'; flag = 1; } } 非表单元素
- href
- title
- id
- src
- className
// 获取对象元素 var link = document.getElementById('link'); var mv = document.getElementById('mv'); //打印DOM对象元素的属性值 console.log(link.id); // link console.log(link.href); // https://www.baidu.com/ console.log(link.title); //我是百度 console.log(mv.src); //file:///C:/Users/Administrator/Desktop/front-end%20learning/2019.05.20/images/1.jpg console.log(mv.alt); //beauty console.log(link.id); //link //改变DOM对象的属性值 link.id = 'love'; mv.id = 'henious'; 案例
点击按钮div的显示和隐藏
-步骤
在html内定义一个按钮和一个div盒子，分别给他们设置id名，并给div盒子设置背景颜色。先获取页面元素，然后给button设置状态。 当点击按钮后，我们要对盒子进行操作，所以我们要获取div对象。获取完div对象之后，我们应该要判断当前的div盒子是显示的还是隐藏的（我们默认刚进入网页时，盒子是显示的），这时我们便要定义一个Boolean变量（isShow）来帮我们记录div的状态。然后进入判断， 如果盒子是显示的，当我们点击按钮后，我们应该让盒子隐藏起来，并且改变button的value的值为显示，然后改变isShow的值为false，如果盒子是隐藏的，那么我们应该让盒子显示出来，改变button的value的值为隐藏，然后改变isShow的值为true
//获取元素 var btn = document.getElementById('btn'); //给按钮注册事件 //isshow 记录了box的状态，true显示， false 隐藏 var isShow = true; btn.onclick = function() { var box = document.getElementById('box'); if (isShow) { box.className = 'hidden'; btn.value = '显示'; isShow = false; } else { box.className = 'show'; btn.value = '隐藏'; isShow = true; } } 切换照片
- 步骤
- 先在网页中生成一个button和一个图片
- 获取button和img的页面元素
- 定义一个变量记录照片状态，让它点击按钮时可以来回切换
- 触发事件
//获取页面元素 var btn = document.getElementById('btn'); var mv = document.getElementById('mv'); //定义一个变量记录照片的状态 var flag = 1; //触发事件 btn.onclick = function() { if (flag === 1) { //mv是个伪数组，所以可以用对象的方法改变mv内的属性 mv.src = 'images/b.jpg'; flag = 2; // 让下一次点击时可以切换回上一张 } else if (flag === 2) { mv.src = 'images/a.jpg'; flag = 1; } } 点击一张图片在当前页面出现大图
-案例描述
先在html中生成一div，这个div内有4个a标签，每个a标签都有一个img标签。在div外再定义一个img标签，用来显示点击a标签时，a标签里面的img标签里的图片会显示在此img标签中。再设一个p标签，p标签的内容会随着点击a标签的变化而变化
- 步骤
- 获取div内所有的a标签
- 给所有a注册事件
- 触发事件
//获取元素 获取到所有的a标签 var gallaryShow = document.getElementById('gallaryShow'); var links = document.getElementsByTagName('a'); //给所有的标签a注册事件 for (var i = 0; i < links.length; i++) { //所有的a标签对应的元素 var link = links[i]; //注册事件 link.onclick = function() { //获取占位大的img标签 var image = document.getElementById('image'); image.src = this.href; var des = document.getElementById('des'); des.innerText = this.title; return false; } } innerHTML和innerText的区别
- innerHTML ： 会把标签和文本一起输出
- innerText ： 输出纯文本
var hi = document.getElementById('hi'); console.log(hi.innerHTML);// hello world console.log(hi.innerText); //hello world innerText的兼容性处理
- 如何知道浏览器是否支持元素的某个属性
- 用console.log(typeof ) 来测试，当此属性存在时返回该属性的类型，若属性不存在是，返回undefined
var box = document.getElementById('box'); function getInnerText(element) { // 判断当前浏览器 是否支持元素的innerText属性，支持innerText 使用element.innerText获取内容 // 如果不支持innerText属性，使用element.textContent获取内容 if (typeof element.innerText === 'String') { return element.innerText; } else { return element.textContent; } } console.log(getInnerText(box)); 表单属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例
给文本框赋值
// 获取元素 var btn = document.getElementById('btn'); // 注册事件 btn.onclick = function () { var txt = document.getElementById('txt'); console.log(txt.value); console.log(txt.type); // 当html中的标签的属性，只有一个值的时候 // DOM中对应的元素的属性值是布尔类型 console.log(txt.disabled); txt.disabled = true; } var btn1 = document.getElementById('btn1'); btn1.onclick = function () { var txt = document.getElementById('txt'); // 设置文本框中的内容 txt.value = 'hello world'; } 检测用户名
//获取按钮元素 var btnLogin = document.getElementById("btnLogin"); //给按钮注册事件 btnLogin.onclick = function() { //获取用户名文本框元素 var userName = document.getElementById('userName'); // 检测用户名是否是3-6位，密码是否是6-8位， if (userName.value.length < 3 || userName.value.length > 6) { userName.className = 'highlight'; return; } else { userName.className = " "; } //获取密码文本框元素 var userPassWord = document.getElementById('userPassWord'); //密码是否是6-8位 如果不满足要求高亮显示文本框 if (userPassWord.value.length < 6 || userPassWord.value.length > 8) { userPassWord.className = 'highlight'; return; } else { userPassWord.className = " "; } console.log('执行登录'); } 当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
//当页面加载完毕，给所有的文本框赋值 var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; //根据type属性判断是否是文本框 if (input.type === 'text') { input.value = i; } } //当点击按钮时，获取所有文本框的值，并且用|分割 var btn = document.getElementById('btn'); btn.onclick = function() { var array = []; for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; //判断是文本框 if (input.type === 'text') { array.push(input.value); } } console.log(array.join('|')); } 设置下拉框中的选中项
//给按钮注册事件 var btn = document.getElementById('btn'); //注册触发事件 btn.onclick = function() { //获取所有的option var selectFoods = document.getElementById('selectFoods'); var options = selectFoods.getElementsByTagName('option'); //随机生成索引 var randomIndex = parseInt(Math.random() * options.length); // 4 根据索引获取option，并让option选中 var option = options[randomIndex]; option.selected = true; } 搜索文本框(获取焦点和失去焦点)
全选和反选
商品 价钱 iPhone8 8000 iPad Pro 5000 iPad Air 2000 Apple Watch 2000
By for now!