学习笔记14

2017年10月19日
学习笔记与总结

1.定时器
设定的时间点,去触发一个事件
定时器的分类:
1:一次定时器
2:循环定时器*/

一次性定时器:setTimeout()
特点:只执行一次
setTimeout()有两个参数
参数1:你要执行的函数名称或者是代码块
参数2:延迟时间 单位是毫秒
setTimeout(showHello,3000);
此处函数体后不应加括号,否则浏览器在阅读时立刻执行

参数1的第二种类型:
setTimeout(function () {
alert("Hello");
},3000);

循环定时器 setInterval()
特点:根据制定的延迟时间,循环执行
setInterval(showHello,3000)

一次性定时器的返回值*/
var timeID1 = setTimeout(showHello,3000);
console.log(timeID1);
/*先执行定时器再赋值*/
var timeID2 = setInterval(showHello,3000);
console.log(timeID2);
/*返回值为分配好的顺序数*/

function clean1() {
clearTimeout(timeID1);
}

function clean2() {
clearInterval(timeID2);
}

2.DOM入门
当script标签写在头部时
文档就绪函数:当文档加载完毕,才会触发对应事件
window.onload = function () {
alert(document.getElementById("btn").innerHTML);
}

DOM:文档对象模型 Document Object Model
浏览器通过渲染html文件生成一个层次分明的DOM树
js可以通过这种层级关系对你任意一个Dom节点进行操作
操作方法分类:
1:Core Dom:这套方法具有通用性,可以作用于xml、html等具有结构性的文档
2:XML Dom:专门用来操作Xml文档
3:HTML Dom:专门用来操作HTML文档

通过id选择器:返回的结果只会是一个,
如果有同名的ID的元素,只会按顺序返回第一个
如果没有同名ID的元素存在,返回一个空对象Null

3.获取元素
方法返回的结果是数组类型
数组里包括所有name属性匹配的元素
getElementByName()
getElementsByTagName():通过标签名
getElementByName(): 通过name属性
getElementByClassName(): 通过class名

获取元素节点时,一定要注意:获取节点的语句,必须在 DOM 渲染完成之后执行。2种方式实现:
①将 JS 代码写在 body 之后
②将代码写到window.onload 函数之中
返回到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作
例如: getElementByName("name1")[0].onclick = function

4.获取和修改元素属性
getAttribute()方法:获取元素的某一个属性。
var src = img.getAttribute("src");
setAttribute()方法:修改元素的属性,第一个参数为修改的属性,
第二个参数为修改后的属性值
img.setAttribute("src","../../../img/cap.jpg");

setAttribute的弊端
1:通过setAttribute方法给元素添加的事件和样式属性在低版本的IE浏览器中无效
2:通过setAttribute方法添加事件和属性,书写比较繁琐!

5.用点符号法去修正setAttribute方法的弊端
//btn.setAttribute("onclick","showHello()");
//btn.setAttribute("style","color:red");
btn.onclick = showHello;
btn.style.color = "red";

多个属性的定义可以通过更简单的方法进行优化。
优化的方法:

方法1:cssText 代码提示缺失 +=";样式"可以实现多个样式的追加
text.style.cssText += ";color:red;font-size:30px;font-style:italic"

方法2:可以给元素直接添加一个样式类 += " 类名称" 可以实现多个样式类同时存在
text.className += " textStyle"

总结:
.cssText和.className方法都是以覆盖的形式进行样式的添加
在使用这两个方法的时候,需要注意以 += ";样式" 或者 +=" 样式类" 来进行追加

6.实现样式类或者样式ID的添加
function change() {
var text = document.getElementById("text");
var cla = text.getAttribute("class");
text.setAttribute("class",cla + " hhy2");
}

7.获取样式
获取行内样式
通过.style方法获取的都是元素的行内样式。非行内样式无法获取
text.style.color = "yellow";
有赋值操作,是对样式进行设置
text.style.color = "yellow";
没有赋值操作,是对样式进行获取
console.log(text.style.color);
对文本进行修改
text.innerHTML = "hhy";
对文本进行获取
console.log(text.innerHTML);

获取行内及非行内样式
window.getComputedStyle:w3c标准提供的方法,
凡是符合w3c标准的浏览器都可以通过它来获取样式

element.currentStyle:非W3C类型的浏览器获取样式的方法。

通过相关的属性对浏览器类型进行判断,如果BOM对象存在这个属性说明
是W3C类型的浏览器,
否则默认为低版本IE浏览器

console.log(text.innerHTML);获取整个文本结构
console.log(text.innerText);只是获取文本

8.查找节点
通过父元素去查找子元素:
空格和换行默认也是一个元素
console.log(ul.firstChild);
只会找元素节点,忽略空格和换行
console.log(ul.firstElementChild);

console.log(ul.lastElementChild);

通过子元素去查找父元素
var li2 = document.getElementById("li2");
console.log(li2.parentNode);

通过父元素查找所有子元素
返回所有的节点和空格及换行
console.log(ul.childNodes);
只返回所有节点
console.log(ul.children);

返回整个文档
console.log(ul.ownerDocument);

返回前一个同级节点
console.log(li2.previousSibling);
console.log(li2.previousElementSibling);

返回后一个同级节点
console.log(li2.nextSibling);
console.log(li2.nextElementSibling);

9.创建和克隆节点
creatElement:创建一个全新的标签,不包含任何的内容和属性。
var text2 = document.createElement("p");
以下操作为在标签内添加内容
text2.innerHTML = "";

cloneNode():复制一个元素,复制整个元素的全部信息
cloneNode(布尔值):ture:完全复制这个标签,flase:复制标签,不包含内部内容
var text1 = document.getElementById("text1");
var text3 = text1.cloneNode(true);

10.追加和插入节点。移除和替换节点。删除和替换节点
appendChild:在元素最末尾和追加方式插入节点
var div = document.getElementById("div");
div.appendChild(text3);

insertBefore:在一个元素之前插入一个新的元素。
两个参数:
参数1:你要新增的元素
参数2:在哪个元素之前插入
div.insertBefore(text2,text1);

removeChild:移除一个子元素
var text = document.getElementById("text");
document.body.removeChild(text);

replaceChild:替换一个子元素
var crt = document.createElement("p");
crt.innerHTML = "JR";
document.body.replaceChild(crt,text);

removeChild():删除一个节点
document.body.removeChild(img1);

replaceChild( , ):替换一个节点 被替换的节点在前,替换的节点在后
var img2 = document.createElement("img");
img2.src = "../../../img/ship.jpg";
document.body.replaceChild(img2,img1);
阅读更多
文章标签: 学习笔记
个人分类: 学习笔记
上一篇学习笔记13
下一篇JavaScript中常用事件1
想对作者说点什么? 我来说一句

Redis学习笔记整理

2017年11月14日 82KB 下载

14章 透视图(Perspectives)

2011年11月20日 3.43MB 下载

没有更多推荐了,返回首页

关闭
关闭