web APIs——day01
-
API是什么？目的？
是为程序员提供的一个接口，帮助程序员实现某种功能。 提供应用程序与开发人员以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 只需直接调用使用即可。 -
什么是web Api？
浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 -
什么是DOM？什么是DOM树？
https://www.zhihu.com/question/34219998/answer/268568438 -
console.dir()?
作用：显示一个对象所有的属性和方法。 -
获取元素？
-
getElementById()：作用，参数，返回值
语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null -
getElementsByTagName()/element.getElementsByTagName() ：作用，返回值，如果只有1个？如果没有给定的元素？
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 作用：根据标签名获取元素对象 参数：标签名 返回值：元素对象集合（伪数组，数组元素是元素对象） 1.getElementsByTagName返回的是 获取过来元素对象的集合(指的是当前页面所有给定的元素的集合) 以伪数组的形式存储的 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式 3. 如果页面中只有一个li 返回的还是伪数组的形式 4. 如果页面中没有这个元素 返回的是空的伪数组的形式 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素 -
H5新增获取元素方式（IE，5，6，7，8不能兼容）
-
getElementsByClassName()
根据类名获得某些元素集合 -
querySelector()
返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 例如（var firstBox = document.querySelector('#box');） -
querySelectorAll()
返回指定选择器的所有元素对象集合
-
-
获取特殊元素
-
获取body元素
var body = document.body; -
获取html元素
var html = document.documentElement; -
获取head元素
var head = document.head;
-
-
-
页面加载是从上到下的。
-
什么是事件？
在编程时系统内发生的动作或者发生的事情 -
事件三要素？
- 事件源（谁）：触发事件的元素 - 事件类型（什么事件）： 例如 click 点击事件 - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 -
执行事件的步骤？
1- 获取事件源 2- 绑定事件（注册事件） 3- 添加事件处理程序（采用函数赋值形式） -
常见的鼠标事件
鼠标事件 触发条件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发 -
元素内容操作
-
innerText
-
innerHTML
-
innerText 和 innerHTML的区别？
- 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 - 设置内容时的区别： innerText不会识别html，而innerHTML会识别
-
-
常用元素的属性操作
-
innerText,innerHTML
-
src,href
-
id,alt,title
-
获取&设置
获取：元素对象.属性名 设置：元素对象.属性名 = 值
-
-
表单元素的属性操作
-
type
-
value
-
checked
-
selected
-
disabled
-
案例：仿京东显示密码
eye.onclick = function(){ if (flag == 0) { //遇到的问题：路径需要用 “/”反写杠 eye.src = '../2-案例/images/open.png' pwd.type = "text" flag = 1 }else{ eye.src = "..\\2-案例\\images\\close.png" pwd.type = "password" flag = 0 } }
-
-
样式属性操作
-
element.style 行内样式操作
元素对象的style属性也是一个对象！ 元素对象.style.样式属性 = 值; JS修改style样式操作，产生的是行内样式，css权重最高 【适合样式比较少 或者 功能简单的情况下使用】 -
element.className 类名样式操作
将样式通过css的形式写下，然后通过JS事件将类名添加上即可 this.className = 'first change'; 1-使用className来操作元素类名属性 2-className会直接更改元素的类名，会覆盖原先的类名（如果需要保留原来的类名，则添加两个类名即可） 【适合样式较多或者功能复杂的情况】-
案例：淘宝点击关闭二维码
-
获得焦点和失去焦点
onfocus获得焦点 onblur失去焦点 -
案例：显示隐藏文本框内容
-
案例：密码框格式提示错误信息
//遇到的问题：querySelector()里面是需要带符号的 // this.value.length：获取当前输入的字符长度 <script> var ipt = document.querySelector('.ipt') var msg = document.querySelector('.message') ipt.onblur = function () { if (this.value.length < 6 || this.value.length > 16) { msg.className = "message wrong" msg.innerHTML = '您输入的位数不对要求6~16位'; } else { msg.className = "message right" msg.innerHTML = '您输入的正确'; } } </script>
-
-
web APIs——day02
-
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 1. 所有元素全部清除样式（干掉其他人） 2. 给当前元素设置样式 （留下我自己） 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己 <script> var btn = document.getElementsByTagName('button') console.log(btn); for(var i = 0;i<btn.length;i++){ btn[i].onmouseover = function(){ for(var j = 0;j<btn.length;j++){ btn[j].style.backgroundColor = '' } this.style.backgroundColor = 'pink' } } </script> -
百度换肤
<script> var imgs = document.querySelector('.baidu').querySelectorAll('img') var img = document.getElementsByTagName('img') console.log(imgs === img);//false //getElementsByTagName() 返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection // querySelector() 返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 //querySelectorAll() 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。 for (var i = 0; i < img.length; i++) { img[i].onclick = function () { // 思路错误：这里不需要用到排他思想 // for (var j = 0; j < img.length; i++) { // img[i].style.backgroundImage = '' // } // this.src 代表的是当前点击的图片的地址 // console.log(this.src); // 思路错误：这里设置的是图片的地址 document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script> -
隔行换色
<script> var tr = document.querySelector('tbody').querySelectorAll('tr') // 用这个方法会有一个bug，就是只要当鼠标经过且离开之后，还会继续存在一个添加了bg的类 // for (var i = 0; i < tr.length; i++) { // tr[i].onmouseover = function () { // for (var j = 0; j < tr.length; j++) { // tr[j].className = '' // } // this.className = 'bg' // } // } for (var i = 0; i < tr.length; i++) { tr[i].onmouseover = function () { this.className = 'bg'; } tr[i].onmouseout = function () { this.className = ''; } } </script> -
全选反选
-
input中是否选中是哪个属性
-
全选和取消全选的做法?
-
下面复选框全部选中,上面全选才能选中,怎么做?
-
<script> // 全选，全不选，单选 // 1-input中是否选中是哪个属性 // 已解决：check.checked var th_check = document.querySelector('thead').querySelector('input') var tb_check = document.querySelector('tbody').querySelectorAll('input') // 2-全选和取消全选的做法? // 已解决:让下面所有的复选框的checked属性（选中状态） 跟随 全选按钮即可 th_check.onclick = function () { for(var i = 0;i<tb_check.length;i++){ tb_check[i].checked = this.checked } } // 3-下面复选框全部选中,上面全选才能选中,怎么做? // 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的， // 如果有一个没选中的， 上面全选就不选中。 for (var i = 0; i < tb_check.length; i++) { tb_check[i].onclick = function () { var flag = true for (var j = 0; j < tb_check.length; j++) { if (!tb_check[j].checked) { flag = false break } } th_check.checked = flag } } </script>
-
