初学JavaScript

JavaScript

可以放在页面的任何位置

直接插入代码

<script type=”text/javascript”></script>

text/javascript说明这是javascript代码

代码写在.js文件中

<script src=”文件名.js”></script>

PS:JS与C++语言一样的地方这里就不再提及

 

变量

用var定义变量

 

写入文字

document.write(“文字”);

 

有关name

Var X=document.getElementsByName(“name”);

X等于名字为”name”的元素的数组

Var X=document.getElementsByTagName(“tagName”);

X等于标签名为”tagName”的元素的数组(标签名就是h,input之类的)

有时候直接用tagName拿元素组时,可能会混进一些不想要的元素,要先筛选,再操作

 

有关id

通过id获取元素

var X=document.getElementById(“id”);

获取id后可以用X.innerHTML来访问元素的值

也可以直接修改X.innerHTML的值

若修改X.innerHTML的值,原元素也会改变

可以通过js来改变已知id元素的形式

var X=document.getElementById(“id”);

X.style.color=”red”;

color可以替换:

http://img.mukewang.com/52e4d4240001dd6c04850229.jpg

通过id隐藏/显示内容

修改display的值

X.style.display=”none/block”;

通过X.className=”类名”来改变X的类属性

重置

X.removeAttribute(“style”);

 

Name和id节点属性及节点间的访问:

X为通过name或id获取的变量

X.getAttribute(“属性”);属性可以为id/name/title或其他

X.setAttribute(“属性”,”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

用X.childNodes;获取X节点的所有子节点,注意

http://img.mukewang.com/538d2b8a000163e303430127.jpg

如上图,除了IE浏览器,其他浏览器会把节点间的换行当成一个空白节点

获取第一/最后子节点

X.first/lastChild;

获取父节点

X.parentNode;

获取兄弟节点

X.nextSibling;后一个

X.previousSibling;前一个

通过var newnode=document.createElement(“节点类型,如:p”);生成一个新的节点

PS:创建文本节点为document.createTextNode(“内容”);

用newnode.innerHTML或用newnode.setAttribute(“属性”,”对应属性值”)的形式给节点赋值

然后用X.appendChild(newnode);就可以把新节点插入到X的最后子节点的地方去

X.insertBefore(newnode,node);把nownode节点插入到node前面

X.removeChild(node);删除子节点

X.replaceChild(newnode,node);用newnode替换node

(用上述函数时多要用到节点的父节点,直接用node.parentNode比较好,不容易出错)

 

 

函数

function 函数名() {}

调用函数例子:

<input type=”button” value=”按钮上显示的文字” onclick=”函数名()”/>

PS:除了自己定义的函数,其他所有函数都是对象函数,也就是说都要通过 对象.函数()的形式调用,变量也是。

 

对话框(写在函数里面,供bottom调用):

弹出警告框

alert(“框中的内容”);

确认对话框

confirm(“显示的文字”);返回值为boolean

确定返回true,取消返回false

提问对话框

prompt(“你要显示的问题/消息”,”输入框的默认值(不写就默认为空)”)

点击确定按钮就返回输入框的值,点击取消就返回null

 

窗口:

打开一个窗口

window.open(“网址”,”窗口名称”,”参数字符串”)

如果不写网址,弹出来的窗口就为空

窗口名称:可选参数,被打开窗口的名称。

    1.该名称由字母、数字和下划线字符组成。

    2."_top""_blank""_self"具有特殊意义的名称。

       _blank:在新窗口显示目标网页

       _self:在当前窗口显示目标网页

       _top:框架网页中在上部窗口中显示目标网页

    3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

   4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:

http://img.mukewang.com/52e3677900013d6a05020261.jpg

例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

</script>

关闭窗口

先用一个变量X来保存window.open()的返回参数

然后用X.close();来关闭窗口

 

 

事件

http://img.mukewang.com/53e198540001b66404860353.jpg

这些可以在<input type=”button”/>上加,也可以加到<a>上,或者<select>中。

onload比较特殊,写在<body>中。

 

对象

关于年份(Date)这个对象的操作

http://img.mukewang.com/555c650d0001ae7b04180297.jpg

创建对象:var mydate=new Date();

get/setDay() 返回星期几(数字)

String

stringObject.length string长度

stringObject.charAt(X) 返回X位置的一个字符

stringObject.indexOf(a,X) 从X开始找a,返回第一个找到的位置,X可选,不写X就从0开始找

stringObject.split(a,X) 将a作为分割符,并返回前X个已经分割好的字符串,X可选,不写X就返回全部分割好的字符串

stringObject.substring(a,b) 返回下标为[a,b)的字符串。b可选,不写b的话就返回a及a以后的字符串。如果a>b,则返回[b,a)的字符串,如果a=b,则返回空字符串

stringObject.substr(a,X) 返回从a开始长度为X的字符串,X可选,X不写就返回a后面的所有字符串

Math

对象属性

http://img.mukewang.com/532fe7cf0001e7b505170269.jpg

对象方法

http://img.mukewang.com/532fe841000174db05160622.jpg

 

数组

创建数组:var myarray=new Array();或var myarray=[1,2,3];

直接赋值var myarray=new Array(1,2,3);

多个数组连接a1.concat(a2,a3···an)

将上面的数组按顺序连接起来

  1. join(“X”)用X作为分隔符,a的每两个元素都用X分隔开来(返回的是一个字符串)

a.reverse()讲数组a的元素颠倒

a.slice(a,b)返回下标由[a,b)的元素组成的数组如果不写b,就返回a即a以后的元素组成的数组

a.sort(mysort)给a数组以你拟定的函数排序

function mysort(a,b)

{

return a-b;//升序

//return b-a 降序

}

总的来说,如果想要升序排列,在a>b的时候就返回一个正数;想要降序排列,在a<b的时候返回一个正数

 

JavaScript计时器

setInterval(函数名,交互时间)

这样每隔一段交互时间,此函数就会被执行一次(交互时间单位是ms)

clearInterval(计时器id)

用i记录好这个计时器的id

i=setInterval(a,b);

clearInterval(i);

setTimeout差不多,不过这个只会执行一次

也是i=setTimeout(a,b);

clearInterval(i);

 

一些window的对象

语法:window.对象.对象属性/方法();

history

前进/后退网页

返回前一个网页window.history.back();

返回后一个网页window.history.forward();

去前X个网页window.history.go(-X);

去后X个网页window.history.go(X);

location

有关网页的信息都可以用location

对象属性:

http://img.mukewang.com/5354b1d00001c4ec06220271.jpg

对象方法:

http://img.mukewang.com/5354b1eb00016a2405170126.jpg

window.location.href;当前的网址(URL)

有关用户屏幕的信息用screen对象

http://img.mukewang.com/5354d2810001a47706210213.jpg

 

浏览器对象

有关浏览器的信息可以用navigator对象

http://img.mukewang.com/5354cff70001428b06880190.jpg

可以通过useAgent的属性判断用的是什么浏览器

 

获得当前浏览器窗口大小值

document.body.clientWidth/Height;

获取网页实际高度和宽度

document.body.scrollWidth/Height

获取网页尺寸

document.body.offsetWidth/Height;

由于网页滑轮的滚动,所显示的网页离真正全部网页的距离(不太懂,上原图吧)

http://img.mukewang.com/5347b2b10001e1a307520686.jpg

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

document.body.offsetTop/Left

document.body.scrollTop/Left

 

类型转换

例 转int:parseint();

 

其他

鼠标放在/移出某个元素上时的操作

obj.onmouseover/out=function(){}

顺带一提,函数如果只在一个地方被调用,可以不命名,像上面那样直接使用

另外,函数参数可以直接传this,例如现在有个del(),可以直接onclick=”del(this)”就会把当前的obj传过去

猜你喜欢

转载自blog.csdn.net/weixin_42036144/article/details/81155457
今日推荐