JavaScript基础总结

来源：互联网发布：生意参谋怎么看数据编辑：程序博客网时间：2024/06/14 17:30

好多个第二天就交作业但是还没写的夜晚都在看JS，前端应该大概可能似乎算是入门了吧，一个立志搞后端的，不容易啊~(>_<)~，接下来的日子一定很赤鸡，进度先放放。对于考试，我觉得，钱可以拿不到，但是科一定不能挂对吧，O(∩_∩)O~
好了步入正题，10天零散时间的基础总结，希望对大家有帮助

JS基础

JavaScript关键字和保留字

1，JavaScript代码要写在<script></script>之间，<script></script>一般位于<head> </head>之间

2，JS代码也可以写在一个以.js结尾文件中，然后在HTML代码中引用即可：<script src="文件名.js"> </script>

3，document.write是eval的一种形式”, eval要尽量避免，是出于安全考虑，因为eval过于强大，他可以把string串作为代码执行。如果控制不好就会造成安全漏洞。

4，document.write中也可以加入HTML的代码，比如：document.write("&nbspworld");也可以加入Java的代码，比如：document.write(1==1?"hello":"<br/>");

5，JS中的注释和Java中的一样，单行// 多行/* */;

html注释：

css:/*我是注释*/

6,变量的定义：var 变量名;

①变量名必须使用字母，下划线_或者美元符$开始；

②不能使用JS关键字；

7，JS中也有if else的判断语句

8，document.write()是在当前页面输出，alert（）是弹出对话框输出，alert对话框是排它的，即在操作它之前不能做其他操作。

输出多个空格的方法：

① 使用输出html标签 来解决

②. 使用CSS样式来解决: 在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

9，定义函数：function 函数名（）{};

直接在调用位置写函数名就可以

window对象

10，消息对话框 confirm（要显示的内容）返回值为boolen类型 true = 1，false = 0

eg：var judg = confirm("are you lady?");

if(judg==true)

document.write("you are lady");

else

document.write("you are not lady");

11，提问对话框 prompt（“内容一”，“内容二”）

内容一是提示内容，不可以改变，内容二为显示在文本框中的内容，可以改变

12，打开新窗口 window.open('URL','窗口名称','参数字符串')

URL：窗口中要显示的网址。

窗口名称：

1，由字母，数字，下划线组成；注意一些有特殊意义的名称

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

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

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

3，相同那么的窗口只能创建一个，要想创建多个窗口则name不能相同

4，name不能包含有空格

参数字符串：设置窗口的参数，各参数用‘ ’括住，参数之间用，隔开

top=number px

left=number px

width=number px

height=number px

menubar=yes/no 有没有菜单

toolbar= yes/no 有没有工具条

scrollbars=yes/no 有没有滚动条

status=yes/no 有没有状态栏

13，关闭窗口 window.close();或者用窗口对象关闭指定窗口：

var mywin = window.open(url);mywin.close();

14，通过ID获取元素 document.getElementById("id")

获取的元素是一个对象，如果<script>在<head>部分，则输出[object HTMLParagraphElement]，如果放在<body>中的调用元素的后面，则输出null。如果想输出元素内容，应该为 .innerHTML;

15，输出或改变元素内容元素对象.innerHTML;

eg : var mychar = document.getElementById("id");

document.write("原始”+mychar.innerHTML);

mychar.innerHTML = "hello world";

document.write("新赋值为"+mychar.innerHTML);

16，改变HTML样式元素对象.style.property=new style;

eg：mychar.style.fontSize="20px";

mychar.style.backgroundColor = "#CCC";

mychar.style.width = "300px";

17，显示和隐藏元素对象.style.display = "none" or "block";

18，控制类名元素对象.className = "classname”;

19，取消所有设置元素对象.removeAttribute('style');

JS进阶

20，

js事件：

onclick（）；鼠标点击后触发

onmouseover（）；鼠标经过时触发

onmouseout（）；鼠标移开后触发

onfocus（）；鼠标聚焦目标位置后触发

onblur（）；鼠标移开点击后触发

onselect（）选中内容触发

onchange（）改变内容后鼠标点击外部触发

onload（）加载完成后触发

onunload（）页面跳转时触发，window.onunload = 函数名。注意，该事件的等号右边函数名后不加括号。。。只有刷新，超链接等发生时才会有该事件的触发，关闭网页不会。onbeforeunload（）才会在关闭网页时触发

附：简单计算器

<html>

<head>

function count(){

//获取第一个输入框的值

var num1 = parseInt(document.getElementById("txt1").value)

//获取第二个输入框的值

var num2 = parseInt(document.getElementById("txt2").value);

//获取选择框的值

var num3 = document.getElementById("select").value;

var ans;

//获取通过下拉框来选择的值来改变加减乘除的运算法则

switch(num3)

{

case "+":ans = num1+num2;break;

case "-":ans = num1-num2;break;

case "*":ans = num1*num2;break;

case "/":ans = num1/num2;break;

}

//设置结果输入框的值

document.getElementById("fruit").value = ans;

}

21，时间相关

●获取、设置年份 obj.get/setFullYear();

●获取星期 getDay();，返回0~6的数字，0表示星期天。

●获取小时，分钟，秒 getHours() getMinutes() getSeconds()

●获取、设置时间 get/setTime();单位毫秒计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

22，string字符串

●获取长度：varname.length; (length后面没有括号）

●大小写转换 varname.toUpperCase(); varname.toLowerCase();(toUpperCase后面有括号）

●返回指定位置的字符 stringname.charAt（index）;

●返回指定字符串从某位置开始首次出现的位置 stringname.indexOf("substring",startpos);

●字符串的分割 stringname.split("分割字符",分割最大次数）; 第二个参数可有可无

●提取子字符串 stringname.substring(startPos,stopPos);第二个参数可以没有，即到结尾，字符长度为stopPos-startPos；如果start比stop大，则会自动交换这两个参数，如果两个参数相等，则返回空串；

●提取指定长度的子字符串 stringname.substr(startpos,length);length可有可无，没有则默认为结尾；如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。如果startPos为负数且绝对值大于字符串长度，startPos为0。

23，Math函数

●向上取整 Math.ceil（num）即取大于等于num的最小整数

●向下取整 Math.floor（num）取小于等于num的最大整数

●四舍五入 Math.round（num）

●随机数 Math.random（）产生0~1之间的一个随机数

24，数组

●数组定义方法：

1. 定义了一个空数组: var 数组名= new Array();

2. 定义时指定有n个空元素的数组： var 数组名 =new Array(n);

3.定义数组的时候，直接初始化数据： var 数组名 = [<元素1>, <元素2>, <元素3>...];

●数组连接 arrayname.concat(arr1,arr2,...); 不会改变原来数组的值，是产生一个新数组

●指定分隔符连接数组元素 arrayname.join("分隔符")；不会改变原来数组

●元素顺序颠倒 arrayname.reverse();

●选定元素 arrayname.slice(start,end);输出[start，end)的数组元素，类似于string的substring（）；

●排序 arrayname.sort(排序函数)；

排序函数：

function sortf(a,b)

{ return a-b }

注：return a-b为升序；return b-a为降序。虽然我也不理解为撒，但是背会吧0.0.

25，浏览器对象BOM

①，JS计时器：

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。

间隔性触发计时器：每隔一定的时间间隔就触发一次。

●间接性触发计时器 setInterval（执行动作，交互时间）；每隔指定时间触发一次

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计

若参数一为调用函数，格式为：setInterval（“函数名( )”,时间）或者setInterval（函数名，时间）

●取消计时器 clearInterval（ID_of_setInterval）;

eg: var i = setInterval(function1,100);

clearInterval(i);

●一次性计时器 setTimeout（代码动作，延迟时间）；载入后延迟指定时间执行一次代码动作，仅执行一次

●取消计时器 clearTimeout（setTiomeout_id）;

②，history对象 window.history.属性|方法

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

window.history.length;返回历史列表中的URL数量

window.histry.back();加载历史列表中的前一个URL，相当于go（-1）

window.history.forward();加载历史列表中的下一个URL，相当于go（1）

window.history.go();加载历史列表中的某个具体的页面

③，location对象 location.属性|方法

location用于获取或设置窗体的URL，并且可以解析URL

④，navigator对象 navigation.属性

navigator对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

⑤，screen对象 window.screen.属性

获取用户的屏幕信息

属性：

availHeight：窗口可以使用的屏幕高度，单位像素；比如除去任务栏

availWidth：窗口可以使用的屏幕宽度，单位像素；

colorDepth：用户浏览器表示的颜色位数，通常为32位（每像素的位数）；

pixelDepth：用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持此属性）；

height：屏幕的高度，单位像素；

width：屏幕的宽度，单位像素；

26，文档对象DOM

①，getElementsByName()方法返回带有指定名称的节点对象的集合

document.getElementsByName("name");

注意，返回的是元素的数组，不是一个元素，可以通过length属性返回数组的长度

②，getElementsByTagName()方法返回带有指定标签名的节点对象的集合，返回元素的顺序是它们在文档中的顺序。和数组一样，也有length属性

document.getElementsByTagName("TagName");

TagName如 p标签，a标签，img标签等

③，getAttribute()方法通过元素节点的属性名称获取属性的值

var node = document.getElementsById||Name||TagName()

node.getAttribute("属性“”）；

④，setAttribute()方法增加一个指定名称和值得新属性，或者把一个现有的属性设置为指定的值

node.setAttribute("属性名","属性值")

⑤，DOM节点的属性

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

⑥，访问子节点childNodes elementNode.childNodes；返回一个数组

⑦，访问第一个和最后一个子节点 node.firstChild node.lastChild

⑧，访问父亲节点 node.parentNode；访问祖先节点 node.parentNode.parentNode；

⑨，访问兄弟节点

node.nextSibling 访问该节点同层中紧挨着的后面的节点

node.previousSibling 访问该节点同层中紧挨着的前面的节点

10，插入节点 parentNode.appendChild(newnode)；在指定节点的最后一个子节点列表之后添加一个新的子节点

eg:

var test = document.getElementById("父节点");

var newnode = document.createElement("新标签名");

newnode.innerHTML="新内容";

test.appendChild(newnode);

11，插入节点 parentNode.insertBefore(newnode,node);在已有的子节点node之前插入一个新的子节点newnode；

12，删除节点 parentNode.removeChild(childNode)；从子节点列表中删除某个节点，如果删除成功，则返回被删除的节点，如果失败，返回null；

eg清除所有子节点：

var test = document.getElementById("父节点");

for(i=test.childNodes.length;i>=0;i--)

{test.remove(test.childNodes[i])}

13，替换元素节点 parentNode.replaceChild(newnode,oldnode); 即实现子节点对象的替换，返回被替换对象的引用。注：newnode必须先创立

eg：

var newnode = document.createElement("新标签名");

var newText = document.createTextNode("新标签内容");

newnode.appendChild(newText);

var oldnode = document.getElementById("旧标签名");

oldnode.parentNode.replaceChild(newnode,oldnode);

14，创建元素节点 document.createElement(tagname);

eg1 创建一个按钮:

var body = document.body;

var input = document.createElement("input");

input.type = "button";

input.value = "创建一个按钮";

body.appendChild(input);

eg2 创建一个文本框:

var body= document.body;

var btn = document.createElement("input");

btn.setAttribute("type", "text");

btn.setAttribute("name", "q");

btn.setAttribute("value", "使用setAttribute");

btn.setAttribute("onclick", "javascript:alert('This is a text!');");

body.appendChild(btn);

15，创建文本节点 document.createTextNode("content");

eg:

var p = document.createElement("p");

var text = document.createTextNode("hello world");

p.appendChild(text);

document.body.append(p);

16，浏览器窗口可视区域大小

document.documentElement.clientWidth||window.innerWidth

document.documentElement.clientHeight||window.innerHeight

17，网页尺寸 scrollHeight

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

document.body.scrollHeight||document.documentElement.scrollWidth;

document.body.scrollWidth||document.documentElement.scrollHeight;

18，网页尺寸 offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

document.documentElement.offsetWidth|| document.body.offsetWidth;

document.documentElement.offsetHeight|| document.body.offsetHeight;

offsetHeight = clientHeight + 滚动条 + 边框。

19,网页卷去的距离与偏移量

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

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

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

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

在一个浏览器程序中，一个网页的布局与浏览器的边框的距离，可以从css中设置，在一个已经确定好的网页布局中，里面有一个可以拉动滚动条的小窗口，offsetLeft就是有滚动条的窗口到浏览器的左边框的的距离，offsetTop就是滚动条的小窗口到浏览器顶部边框的距离，scrollLfet就是滚动条窗口到网页布局好的左边边框的距离，scrollTop就是滚动条窗口到网页布局好的上边边框的距离

阅读全文

0 0