成都哪家网站建设,电商网站建设培训班,商洛免费做网站公司,网站开发总结 优帮云JavaScript 1.简介 JavaScript简介#xff1a; JS是运行在浏览器端的一门脚本语言#xff0c;一开始主要用来做浏览器验证#xff0c;但现在功能已经不止于此。 所谓脚本语言就是指#xff0c;代码不需要编译#xff0c;直接运行#xff0c;并且读入…JavaScript 1.简介 JavaScript简介 JS是运行在浏览器端的一门脚本语言一开始主要用来做浏览器验证但现在功能已经不止于此。 所谓脚本语言就是指代码不需要编译直接运行并且读入一行运行一行 JavaScript目前应用非常广泛例如浏览器端的验证Ajax客户端等甚至也有服务器端的JavaScript--node.js 2.编写位置 1网页内部 script typetext/javascript alert(这是啥); /script 2外部的.js文件 JavaScript一般单独写在一个.js文件中通过以下方法来引用 script typetext/javascript srcscript.js/script 3基本语法 ①注释 单行注释 // 多行注释 /**/ ②变量 Ⅰ声明JS是一门弱类型语言声明变量时不需要指定变量的类型只需要使用var关键字 例如var a Ⅱ赋值 JS是一门动态类型的语言可以给一个变量赋任意类型的值同时在使用过程中可以任意修改变量 变量的类型 a123; ahello; Ⅲ声明和赋值同时进行 var b123; var chello; var dtrue; ③函数 在JS中函数也是一个对象也可以将一个函数的引用赋值给一个变量 1)声明函数使用function关键字 第一种方式 var sumfunction(a,b){ return ab; }; 第二种方式 function sum2(a,b,c){ return abc; }; sum2(2,3,4); 2)函数的调用 -函数的引用; -sum(123,234) -sum2(123,abc,true) 调用函数不会检查参数类型和个数所以在js中不存在重载这回事 例如 ④对象 Ⅰ对象的创建 (1)var objnew Object(); (2)var obj {} Ⅱ动态的为对象添加属性 对象.属性名属性值 例obj.name张三; obj.age16; obj.funfunction(){ alert(hello); }; Ⅲ在创建对象时直接添加属性 注意键值对之间使用 “ ”隔开。 3.事件 (1)用户操作网页或者浏览器所发生的交互行为称为事件。比如点击按钮最小化窗口修改文本框内容等。 (2)JS为我们定义许多浏览器中的事件。比如单击、双击、移动 等。 (3)我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响应函数 1)直接通过标签的属性来设置这种方式是结构与行为耦合不推荐使用 button οnclickalert(hello)按钮/button -这种方式叫做结构与行为耦合不推荐使用这种方式 2)在script标签来设置 button idbtn按钮/button script //获取到按钮的对象 var btn document.getElementById(btn); //为btn绑定一个单击响应函数 btn.οnclickfunction(){ alert(hello); } /script 3)几种鼠标事件 //鼠标单击事件 button idbtn οnclickalert(你点我干嘛)点我/button 鼠标单击按钮事件触发 //鼠标双击事件 button idbtn οndblclickalert(你点我干嘛)点我/button //鼠标移到按钮上事件触发 button idbtn οnmοuseοveralert(鼠标移动上来了)点我/button //鼠标从按钮上移走事件触发 button idbtn οnmοuseοutalert(鼠标移走)点我/button 4.加载方式 (1)浏览器加载网页代码时是由上到下依次加载的。 (2)如果我们在浏览器还尚未加载网页中的元素那么将无法确定控制台将会报错。 解决该问题有两种方式 1)将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都编写在head标签中 这种形式不符合使用规则 2)将js代码编写到window.οnlοadfunction(){}中推荐使用方式 注意编写js时上来就把window.οnlοadfunction(){}写上 程序是一行一行执行的如果var btndocument.getElementById(btn1);代码之前没有写window.οnlοadfunction(){} 那么在执行的时候是找不到body里面的idbtn1,因此window.οnlοadfunction(){}作用就是加载完整个页面之后再执行里面的内容。 但是如果将javascript写在body里面之前已经加载完了idbtn1所以var btndocument.getElementById(btn1);再运行就没有问题了。 注意button标签只能写在body里面。 5.DOM编程 DOM全称Document Object Model DOM编程是JavaScript中非常重要的一部分内容 。 DOM主要是通过JavaScript来控制网页中的各种元素从而达到使网页可以和用户进行动态交互的作用。 DOM的操作主要分为四部分增、删、改、查。 1document对象: document是一个文档节点代表整个文档所有节点都是它的后代节点。 document也是window的对象的属性可以直接使用。 2节点类型 ① 元素节点HTML文档中的HTML标签 ②文本节点元素的属性 ③ 属性节点HTML标签中的文本内容 3节点属性 4元素节点的属性 1.获取元素对象.属性名 例element.value element.id element.className 2.设置元素对象.属性名新的值 例element.valuehello element.idid01 element.classNamenewClass 其它属性 innerHTML:元素节点通过该属性获取和设置标签内部的html代码 nodeValue文本节点可以通过nodeValue属性获取和设置文本节点的内容 5***DOM查询 通过document对象查询 document.getElementById() -通过id属性获取一个元素节点对象 document.getElementsByTagName() -通过标签名获取一组元素节点对象 document.getElementByName() -通过name属性获取一组元素节点对象,一般用来获取表单项 通过具体的元素对象查询 element.getElementsByTagName -查找当前元素节点内指定标签名的子节点 element.childNodes -查找当前节点的所有子节点 element.firstChild -查找当前节点的第一个子节点 element.lastChild -查找当前节点的最后一个子节点 element.parentNode -查找当前节点的父节点 element.previousSibling -查找当前节点的前一个兄弟节点 element.nextSibling -查找当前节点的后一个兄弟节点 例 注意1.function myQuery(idStr,func){ var btndocument.getElementById(idStr); btn.οnclickfunc; } 这段代码为4个查询中共有的内容所以封装成一个方法下面直接调用就可以了避免写重复代码起到了简化代码的作用。 2.在查询 “#city的所有子节点” 的时候其实只有四个--北京上海东京首尔但是在用火狐浏览器和谷歌浏览器运行时会把 节点与节点之间的空格也当作了一个节点所有此时应该根据元素节点的属性用if语句判断一下if(liEle5[i].nodeType1){} 当nodeType1时才是元素节点。 6***DOM增删改 ①创建元素节点 document.createElement(标签名) ②添加子节点 父节点.appendChild(子节点) ③插入节点 父节点.insertBefore(新节点,旧节点) ④替换节点 父节点.replaceChild(新节点,旧节点) ⑤删除节点 父节点.removeChild(子节点) 子节点.parentNode.removeChild(子节点) ***** ⑥读写元素内部HTML代码 读取 元素.innerHTML 设置 元素.innerHTML 新值 需要注意点在设置元素节点时有以下两种方式 1.document.getElementById(bj).innerHTML 天津; 2.document.getElementById(bj).firstChild.nodeValue天津; 请参照以上4元素节点的属性中其他属性部分。转载于:https://www.cnblogs.com/double-s/p/7801886.html
