学习笔记14

标签: 学习笔记
65人阅读 评论(0) 收藏 举报
分类:
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);
查看评论

14.Spring学习笔记_泛型依赖注入(by尚硅谷_佟刚)

泛型依赖注入 Spring 4.0 中可以为子类注入子类对应的泛型类型的成员变量的引用...
  • u012234915
  • u012234915
  • 2016年12月01日 17:30
  • 311

台湾大学林轩田机器学习基石课程学习笔记14 -- Regularization

我的CSDN博客地址:红色石头的专栏 我的知乎主页:红色石头 我的微博:RedstoneWill的微博 我的GitHub:RedstoneWill的GitHub 我的微信...
  • red_stone1
  • red_stone1
  • 2017年05月26日 12:59
  • 1910

《Oracle编程艺术》学习笔记(14)-写一致性

先解释2个概念: · 一致读(Consistent read):“发现”要修改的行时,所完成的获取就是一致读。 · 当前读(Current read):得到块来实际更新所要修改的行时,所完成的获取...
  • fw0124
  • fw0124
  • 2011年10月24日 00:27
  • 1419

cs229-lecture4-学习笔记

牛顿方法() 指数fenbu
  • BiggerQ
  • BiggerQ
  • 2014年08月03日 14:33
  • 573

Coursera机器学习笔记 第1周 第三章 线性代数回顾

第三章 线性代数回顾(Linear Algebra Review) 第1节 线性代数回顾(Linear Algebra Review) 3.1 矩阵和向量 参考视频:3 - 1 -...
  • shengchaohua163
  • shengchaohua163
  • 2017年10月13日 18:40
  • 163

七月算法强化学习 第一课 学习笔记

一、强化学习简介与应用: 1.强化学习定义: 强化学习是机器学习中的一个领域,强调如何基于环境而行动,以取得最大化的预期利益。其灵感来源于心理学中的行为主义理论,即有机体如何在环境给予的奖...
  • linkedin_39447410
  • linkedin_39447410
  • 2017年09月25日 18:55
  • 1182

C++ 学习笔记(一些新特性总结 1)

C++ 学习笔记(一些新特性总结 1)虽然我也用了 C++ 有挺多年了,但是一直本着够用就行的原则,没有特别深入的学习过C++ 的语法,所以好多高级的 C++ 特性都不了解。正好最近从网上找到了本书《...
  • liyuanbhu
  • liyuanbhu
  • 2016年01月17日 09:10
  • 2372

Android编程权威指南(第二版)学习笔记(十六)—— 第16章 使用 intent 拍照

本章主要讲了如何使用 intent 拍照,存储照片和展示照片
  • kniost
  • kniost
  • 2017年01月12日 17:55
  • 443

周志华《Machine Learning》学习笔记(14)--计算学习理论

上篇主要介绍了常用的特征选择方法及稀疏学习。分别介绍了子集搜索与评价、过滤式、包裹式以及嵌入式四种类型的特征选择方法:子集搜索与评价是一种优中生优的贪婪算法;过滤式计算相关统计量来评判特征的重要程度;...
  • u011826404
  • u011826404
  • 2017年06月16日 21:39
  • 1883

笨办法学Python学习笔记 练习26

笨办法学Python学习笔记 练习26 代码错误列表及正确代码。
  • magina507
  • magina507
  • 2016年01月13日 16:20
  • 1187
    个人资料
    等级:
    访问量: 1414
    积分: 165
    排名: 107万+
    文章分类
    文章存档