admin

javascript学习笔记(2)
#这里记录的主要是我在imooc上学习javascript进阶篇所得的经验#点击事件:onClick onmou...
扫描右侧二维码阅读全文
23
2018/06

javascript学习笔记(2)

#这里记录的主要是我在imooc上学习javascript进阶篇所得的经验

#点击事件:

onClick
onmouseout
onmouseover
onfocus
onblur
onselect 这个onselect是一种选中(这个选中是指你按着鼠标左键拖动鼠标选东西的时候)才会触发onselect 如果只是把光标放在框框内是不会触发的
onchange
onload(往往放在body标签中)
onunload ,使用方法大致如下:
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}
//需要指出的是不同的浏览器对这个方法的支持不同,比如Chrome无反应,IE只有在刷新的时候才有反应

使用parseInt()函数可解析一个字符串,并返回一个整数。
类似的方法还有parseFloat()等

javascript 中也有对象的概念,对象具有对应的属性或方法
对于属性和方法也是有大小写之分的

#关于Date()对象的方法

(注意以下的get方法均有对应的set()方法)
getDay() 返回星期,返回的是0-6的数字,0 表示星期天。如果要返回相对应“星期”,通过数组完成,代码如下:
getFullYear() 返回四位数的年份 如2018
get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数

#关于字符串对象的方法

mystr.toLowerCase()
mystr.toUpperCase()
mystr.length返回的是字符串的长度 ,注意和c++不同的是这里没有 /0
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
split() 方法将字符串分割为字符串数组,并返回此数组
indexOf(substring, startpos)
split(seperator,limit ) 方法将字符串分割为字符串数组,并返回此数组。 seperator 指定用什么来分割,limit限制分割次数的上限
提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。 下界包括而上界不包括
substr(startpos,length) 方法从字符串中提取从 startPos位置开始的指定数目的字符串。 PS:如果startpos是负数,那么从结尾往前数

#Math 对象

几个属性:
E(返回自然对数的底数)
LN2(返回2的自然对数)
LOG2E(返回以2为底的e的对数)
PI
SQRT(返回2的平方根)
几个方法:
atan(x)
acos(x)
ceil(x)
floor(x)
toSource() 返回该对象的源代码
round(x) 四舍五入
random() 获得介于0到1的随机数

#数组对象

concat() 方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组。 用法可以是mya1.concat(4,5) 也可以是mya4 = mya1.concat(mya2,mya3)
join(separator)方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。 separator 参数如果省略,则用',' join
reverse()方法 颠倒数组中元素的顺序,注意这里的reverse()方法是有返回值的,可以放在赋值符号的右边, 且原始的数组已经改变
slice() 方法可从已有的数组中返回选定的元素。 不会修改数组,而是会返回一个子数组
sort(sortMethod) 1.如果不指定<方法函数>,则按unicode码顺序排列。2.如果指定<方法函数>,则按<方法函数>所指定的排序方法排序
#比较函数应该具有两个参数 a 和 b,其返回值如下:
若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。

#window 对象

alert()
confirm()
prompt()
close()
open()

实例: window.open("120.79.231.160","个人网站","width = 400, height = 300,menubar = yes, toolbar = no, status = no");
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开

focus()

#重点讲解定时器:

计时器类型:
一次性计时器:仅在指定的延迟时间之后触发一次。
间隔性触发计时器:每隔一定的时间间隔就触发一次。

setInterval(代码,交互时间);
如 var int = setInterval(clock,100); 或 var int = setInterval("clock()",100);
这样int 就是我们的一个计时器了,可以用clearInterval(int) 方法取消计时器

setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 setTimeout(代码,延迟时间); 可以在setTimeout绑定的代码中运行其自身,从而构造出无穷循环
相应的也有clearTimeout()

#history对象

window.history.[属性|方法]
注意:window可以省略。
history对象有length的属性值
window.history.back(); 相当于 window.history.go(-1); 返回前一个页面
window.history.forward(); 相当于window.history.go(1); 返回下一个页面
返回浏览历史中的其他页面
window.history.go(number);

#Location对象

location用于获取或设置窗体的URL,并且可以用于解析URL。
有hostname 、href 等属性

#Navigator对象

Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本
appName 返回浏览器的名称
appVersion 返回浏览器平台的基本信息
platform 返回浏览器运行的操作系统平台
使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器), 方法大概像 if(u_agent.indexOf("Chrome")>-1)

#screen对象

用于获取用户的屏幕信息
availHeight 可用屏幕的高度
availWidth
height 屏幕的高度 ,单位像素
width

#DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。
获得节点对象的几个方法:
getElementById() getElementsByName() getElementsByTagName()
其中通过Name 和TagName 来获得的对象会返回一个数组
可以遍历数组来进行getAttribute()或者setAttribute(name,value)方法

节点有几个属性

nodeName nodeValue nodeType
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

访问子节点,直接用.childNodes即可,会返回数组 第一个用firstChild 最后一个用lastChild
访问父节点也是类似, 用.parentNode
注意myNode 也有.innerHTML属性
访问兄弟节点
nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

几个操作节点的方法

追加子节点:

otest.appendChild(newNode);   (是添加在父节点子节点的列表尾)

插入节点:

otest.insertBefore(newnode,node);

删除节点:

var x = content.removeChild(otset);

x = null; (彻底删除)

替换元素节点:

otest.replaceChild(newnode,oldnode);

创建元素节点:

document.createElement("p")

创建文本节点:

document.createTextNode(data)

 

确定浏览器可视窗口区域大小:

var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;

 

可以看出一般规律,这些操作都是父节点.functionname(newnode) 有时候newnode 后还有一个node 来确定newnode变化的位置等等

Last modification:March 14th, 2019 at 09:09 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment