JavaScript笔记

2019-11-06 06:22:06

字体：大中小

来源：转载

供稿：网友

插入JS:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html"; charset=gb18030"><title>插入JS代码</title><script type="text/javascript">document.write("开启JS之旅！")；</script></head></html>可以把html文件和js代码分开，单独创建一个js文件保存js代码。引用js代码： <script src="one.js"></script>例：one.js文件：alert("JS代码");js文件不能直接运行，需要嵌入到html文件中执行。我们可以将Javascript代码放在html文件的任何位置，但一般放在head或者body部分；放在<head>部分：浏览器解析head部分就会执行这个代码，然后才解析页面其余元素放在<body>部分：JavaScript代码在网页读取到该语句的时候就会执行注意：进行页面显示初始化的js必须放在head里，因为初始化都要求提前进行。如果是通过实践调用执行function那么对位置没有要求。一行的结束就被认定为语句的结束，通常在后面加上分号。单行注释：在内容前加//多行注释：以/* 开始，以*/结束定义变量使用关键字var，变量必须以字母，下划线或美元符号开始。变量要先声明再赋值。定义函数： function 函数名(){函数代码；}函数的调用：直接写函数名即可。JavaScript输出内容：document.write("内容"+变量名);输出多项内容，内容之间可用+号连接。JavaScript警告：（alter消息会话框）alter（字符串或变量） JavaScript确认（confirm消息对话框）：语法：confirm(str);参数说 str:在消息会话框中要显示的文本返回值：Boolean值,当点击确定时返回true，当点击取消时返回false.例：<script type="text/javascript">var mymessage=connfirm("你喜欢JavaScript吗?");if(mymessage==true){document.write("很好，加油！");}else{document.write("js功能强大，要学习！");}</script>javascript提问（PRompt消息对话框）prompt弹出消息对话框通常用于询问一些需要与用户交互的信息。语法：prompt(str1,str2);str1表要显示在消息对话框中的文本，不可修改str2表文本框中的内容，可修改javascript打开新窗口（window.open）语法：window.open([URL],[窗口名称],[参数字符串])；JavaScript关闭窗口（window.close）语法：window.close();//关闭本窗口或窗口对象.close();//关闭指定窗口文档对象模型DOM(document object model)定义访问和处理html文档的标准方法。DOM将html文档呈现为带有元素、属性和文本的树结构（节点树）通过ID获取元素： document.getElementById("id");innerHTML：该属性用于获取或替换HTML元素的内容语法：Object,.innerHTML改变HTML样式：语法 Object.style.property=new style;属性property：backgroundColor、height、width、color、font、fontsize等。Object为获取的元素对象显示和隐藏（display属性)： Object.sytle.display=value;value取值：none 隐藏block 显示控制类名（className属性)：设置或返回元素的class属性语法：object.className=className;创建数组： var myarr=new Array();//创建一个空的数组或 var myarr=[10,0,50,60];或var myarr=new Array(50,40,20);//创建数组并赋值数组属性：length 语法：myarr.length;//获取数组的长度二维数组：var myarr=new Array(); for(var i=0;i<2;i++){myarr[i]=new Array();//先声明一维，再声明二维for(var j=0;j<3;j++){myarr[i][j]=i+j;//赋值}Switch语句：switch（表达式){case值1：执行代码块1break；case值2：执行代码块2break；。。。。。default：不同时执行的代码 }继续循环（continue）：continue的作用是仅仅跳过本次循环，而整个循环体继续执行语句结构： for(.....){if(特殊情况){continue;}循环代码；}JavaScript事件：onclick 鼠标单击事件onmouSEOver 鼠标经过事件onmouserout 鼠标移开事件onchange 文本框内容改变事件onselect 文本框内容被选中事件onfocus 光标聚集onblur 光标离开onload 网页导入onunload 关闭网页什么是对象：JavaScript中所有事物都是对象，如字符串、数组、数值、函数等，每个对象都带有属性和方法。对象的属性：反映该对象某些特定的性质的，如字符串长度，图像的长度等。对象的方法：能够在对象上执行的动作，如表单的提交submit、时间的获取getYear等var objectName=new Array();//使用new关键字定义对象或者 var objectName=[];访问对象属性的语法：objectName.propertyName;访问对象的方法：objectName.methodName();Date日期对象：定义一个时间对象：var udate=nw Date();//当前电脑系统时间var d=new Date(2012,10,1);//2012年10月1日或var d=new Date('Oct 1,2012')；访问方法：日期对象.方法名；Date对象中处理时间和日期的常用方法：get/setDate()//返回/设置日期get/setFullYear() //返回/设置年份get/setMonth()get/setHours()get/setMinutes()get/setSeconds()get/setTime()例：var mydate=new Date();document.write(mydate+"<br>");//输出当前时间document.write(mydate.getFullYear()+"<br>");//输出当前年份mydate.setFullYear(1981);//设置年份返回星期方法：getDay(),返回的是0-6的数字，0表示星期日。var mydate=new Date();var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var mynum=mydate.getDay();document.write(mydate.getDate());//输出getDate()获取值document.write("今天是"+weekday[mynum]);//输出星期几String字符串对象：var mystr="i love javascript";访问字符串对象的属性length: stringObject.length;//返回字符串的长度将小写转换成大写： stringObjectName.toUpperCase();返回指定位置的字符：charAt();语法：stringObjectName.charAt(index);返回指定字符串首次出现的位置： stringObjectName.indexOf(substring,startpos);参数：substring:规定需检索的字符串值startpos:规定字符串中开始检索的位置字符串分割：split(); 语法：stringObject.split(separator,limit);参数：separator：从该参数指定的地方分割limit:分割的次数提取字符串substirng();语法：stringObject.substring(startpos,stoppos);参数：starpos:开始位置 stoppos:结束位置提取指定数目的字符substr()语法：stringObject.substr(startpos,length);参数：startpos:提取的字符串起始位置length：提取字符串的长度Math对象：Math对象属性： E //返回算术常量e(约等于2.718) LN2 //返回2的自然对数（约等于0.693） LN10 //返回10的自然对数（约等于2.302） PI //圆周率（3.14159） Math对象方法： abs(x) //返回数的绝对值acos(x) //返回数的反余弦值exp(x) //返回e的指数floor(x) //对数进行向下取整max(x,y) //取最大round(x) //四舍五入pow(x,y) //返回x的y次幂sqrt(x) //平方根random() //0-1之间的随机数ceil(x) //向上取整数组连接concat():用于连接两个或多个数组指定分隔符连接数组元素join(): arrayObject.join(分隔符)；颠倒数组元素顺序reverse()选定元素slice() ; arrayObject.slice(start,end);数组排序：sort()window对象：window对象是BOM的核心，window对象指当前的浏览器窗口window对象方法：alert() 显示警告框prompt（）显示可提示输入对话框confirm() 确认对话框open（）打开一个新的窗口close（）关闭浏览器窗口print（）打印当前窗口内容。。。JavaScript计时器：计时器方法；setTimeout() //指定的延迟时间之后来执行的代码claerTimeout() //取消setTimeout设置setInterval() //每隔指定时间执行代码clearInterval() //取消setInterval设置例：设置一个计时器，每隔100秒调用clock()函数；<script type="text/javascript">var int=setInterval(clock,100);function clock(){var time=new Date();document.getElementById("clock").value=time;}</script><form><input type="text" id="clock" size="50" /></form>History对象：history对象记录了用户曾经浏览过的页面URL，并可以实现浏览器前进与后退相似导航的功能。语法： window.history.[属性|方法]history对象属性： length 返回浏览器历史列表中的URL数量history对象方法: back() 加载history列表中的前一个URLforward() 加载history列表中的下一个URLgo() 加载history列表中的某个集体的页面 Location对象：location对象用于获取或设置窗体的URL，并且可以用于解析URL语法：location.[属性|方法]location对象属性：hash 设置或返回从井号#开始的URL host 设置或返回主机名和当前URL的端口号 hostname 设置或返回当前URL的主机名 href 设置或返回完整的URL port 设置或返回当前URL的端口号 location对象的方法；assign() 加载新的文档reload（）重新加载当前文档replace（）用新的文档替换当前文档Navigator对象：Navigator对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。对象属性：appCodeName 浏览器胆码名的字符串表示 appName 返回浏览器的名 appVersion 返回浏览器的平台和版本信息 platform 返回运行浏览器的操作系统平台 userAgent 返回由客户机发送服务器的user-agent头部的值 screen对象：screen对象用于获取用户的屏幕信息语法：window.screen.属性对象属性：availHeight 窗口可使用的屏幕高度 availWidth 窗口可使用的宽度 colorDepth 颜色位数 height 屏幕高度 whdth 屏幕宽度获取屏幕的可用高度和宽度：<script type="text/javascript">document.write("可用宽度"+screen.availWidth);document.write("可用高度"+screen.availHeight);/</script>DOM对象，控制HTML元素：文档对象模型DOM(document Object Model)定义访问和处理HTML的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。<!DOCTYPE HTML><html><head><meta http-equiv="content-Type" content="text/html;charset=utf-8"/></head><body><h2><a href="http://www.baidu.com">javascript DOM</a></h2><p>对HTML元素进行操作，可添加，改变或移除CSS样式等</p><ul><li>JavaScript</li><li>DOM</li><li>CSS</li></ul></body></html>HTML文档可以说是由节点构成的集合，DOM节点有：1.元素节点：上述<html> <body> <p>等都是元素节点，即标签。2.文本节点：向用户展示的内容，如<li> 中的JavaScript，DOM,CSS等文本3.属性节点：元素的属性，如<a>标签的链接属性href。节点属性：方法说明nodeName 返回一个字符串，其内容是给定节点的名字nodeType 返回一个整数，这个数值代表给定节点的类型nodeValue 返回给定节点的当前值遍历节点树：方法说明childNode 返回一个数组，这个数组有给定的元素节点的子节点构成、firstChild 返回第一个节点lastChild 返回最后一个子节点parentNode 返回一个给定节点的父节点nextSibling 返回给定节点的下一个子节点preiousSibling 返回给定节点的上一个子节点DOM操作：方法说明createElement(element)创建一个新的元素节点createTextNode()创建一个包含给定文本的新文本节点appendChild() 指定节点的最后一个子节点列表之后添加一个新的子节点 insertBefore() 将一个给定节点插入到一个给定元素的给定子节点的前面removeChild() 从一个给定元素中删除一个子节点replaceChild()把一个给定父元素里的一个子节点替换为另一个节点getElementByName()方法：返回带有指定名称的节点对象的集合document.getElementByName(name)该方法返回的是元素的数组，而不是一个元素，有length属性。<script type="text/javascript">function getElements(){var x=document.getElementByName("alink");alert(x.length);}<body><a name="alink" href="#">我是链接一</a><br/><a name="alink" href="#">我是链接二</a><br/><a name="alink" href="#">我是链接三</a><br/><a name="alink" href="#">我是链接四</a><br/><input type="button" onclick="getElements()" value="几个链接"/></body>getElementByTagName()方法：返回带有指定标签的节点对象的集合。getElementByTagName(TagName);getAttribute()方法：通过元素节点的属性名称获取属性的值。elementNode.getAttribute(name);1.elementNode:使用getElementById(),getElementByTagName()等方法获取到的元素的节点。2.name:想要查询得元素节点的属性名称。setAttribute()方法：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。elementNode.setAttribute(name,value);1.name:要设置的属性名2.value：要设置的属性值节点属性：在文档对象模型（DOM)中，每个节点都是一个对象。DOM节点有三个重要的属性：1.nodeName:节点的名称2.nodeValue:节点的值3.nodeType:节点的类型一、nodeName属性：节点的名称，就是只读的。1.元素节点的nodeName与标签名相同2.属性节点的nodeName是属性的名称3.文本节点的nodeName永远是#text4.文档节点的nodeName永远是#document二、nodeValue属性：节点的值1.元素节点的nodeValue是undifined或null2.文本节点的nodeValue是文本自身3.属性节点的nodeValue是属性的值三、nodeType属性：节点的类型，是只读的。一下常用的集中节点类型：元素类型节点类型元素 1属性 2文本 3注释 8文档 9

上一篇：【js】javascript中的原型prototype

下一篇：JavaScript 运算对象Math