JavaScript
-
javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
-
js语法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> // window.onload=function(){ //获取id为btnId的对象 var btn=document.getElementById("btnId"); //获取按钮对象的click属性 btn.onclick=function(){ //弹窗函数 alert("Waring"); }; } </script> </head> <body> <button id="btnId">SayHello</button> </body> </html> <!--1.使用var声明变量，声明时不需指明数据类型 var 变量名； js五种基本类型：number String boolean null undefined 对象：object typeof：测试对象类型， 如果声明出来未赋值，则undefined var可以动态赋值 --> var num1;//声明变量 num1=12;//赋值 num1="你好" <!--2.声明函数 方法不管在哪里声明，浏览器都会优先加载 变量则必须先声明后使用； 在js中，方法的唯一标识就是方法名，即不存在重载，调用方法的时候是可以选择传递的 --> //声明 function sum(a,b){ alert(a+b); }//调用 sum(0,1); //方法名就是变量名 var sum=function(a,b){ alert(a+b); } <!--3.创建对象--> //第一种方式 var obj=new Object(); //第二种方式,创建出来的对象如何添加属性和方法 var obj2={}; //动态增加属性 obj2.name="猪八戒"； //获取属性 alert(obj2.name); // obj2.work=function(){ alert("haha"); }; obj2.work(); //在声明的时候给对象添加属性和方法 var obj3={name:"猪八戒",age:500,work:function(){ alert("吃水。。"); }}; alert(obj3.name); alert(obj3.age); obj3.work; <!----> 其他大部分语法跟java公用，但有不同,牵涉到声明变量，用var声明就好 try{ var i=10/0; }catch(e){ alert(e); }- 事件
<!--常用事件可以查看dom文档--> <!--在标签的事件属性中编写js代码--> <button id="btnId" onclick="alert('HelloWorld')">ByeBye</button> <!--动态绑定 步骤； 1.找到元素 2.为元素相应的事件属性赋值一个方法 3.当事件发生以后，浏览器自动调用 --> var button=document.getElementById("btn"); button.οnclick=function(){ alert("你好"); } <!--window.onload:浏览器加载完成整个页面的时候调用后面的方法--> window.οnlοad=function(){ var button=document.getElementById("btn"); button.οnclick=function(){ alert("你好"); } } <!---->- js的几种写入方式
<!--写在body标签后面--> <body> <button id="btnId">SayHello</button> <!--图片加载没完成时，script中的img加载失败--> <!--img或iframe等加载时间过长，会导致获取不到属性--> <img src="" id="img"/> <script type="text/javascript"> var btn=document.getElementById("btnId"); //获取按钮对象的click属性 btn.onclick=function(){ //弹窗函数 alert("Waring"); } var img=document.getElementById("img"); </script> </body> <!--写在头中--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //若无window.onload预先加载完整个页面，则失败 window.onload=function(){ //获取id为btnId的对象 var btn=document.getElementById("btnId"); //获取按钮对象的click属性 btn.onclick=function(){ //弹窗函数 alert("Waring"); }; } </script> </head> <body> <button id="btnId">SayHello</button> </body> </html> <!--写在事件属性中(不推荐)，结构耦合度高--> <button onclick="alert('hello')">hello</button> <!--引入外部的js文件--> <script type="text/javascript" src="路径"></script>//不可在里面写代码，只能重起一行
5. dom模型:document object model 文档对象模型
```html
<!--dom模型，也就是浏览器把html页面抽象成一个document对象，包括页里面的所有元素。
dom模型是一个属性模型-->
<!--bom模型:浏览器对象模型-->
<!--节点：每一元素都是节点
父节点：当前节点的上一级节点
子节点：当前节点的下一级节点
祖先节点：当前节点的祖先
后代节点：当前节点的后代
兄弟节点：互为兄弟
-->
<!--
元素节点：HTML标签的文本内容（<a href="www.baidu.com">百度</a>）
属性
节点：元素的属性（href="www.baidu.com"）
文本节点：HTML标签中的文本内容（百度）
-->
<a href="www.baidu.com">百度</a>
<!--所有节点都有三个属性
元素节点 属性节点 文本节点
nodeName:节点名 标签名 属性名 #text
nodeType:节点类型 1 2 3
nodeValue:节点值 null 属性值 文本值
-->
window.οnlοad=function(){
var aEle=document.getElementById("aid");
alert(aEle.nodeName);
alert(aEle.nodeType);
alert(aEle.nodeValue);
//返回元素的属性节点
var attrEle=aEle.getAttributeNode("id");
alert(attrEle.nodeName);
alert(attrEle.nodeType);
alert(attrEle.nodeValue);
//返回元素的第一个子节点
var textFile=aEle.firstChild;
alert(textFile.nodeName);
alert(textFile.nodeType);
alert(textFile.nodeValue);
}
<a href="www.baidu.com" id="aid">百度</a>-
dom查询
<!--每个载入的html文件都是一个document--> https://www.runoob.com/jsref/dom-obj-document.html <!--getElementById():通过id属性获取一个元素节点对象--> <!--getElementsByTagName():通过标签名获取一组元素对象--> <!--getElementsByName():通过name属性获取一组元素对象--> <!-- 对象.innerText:获取元素中的文本 对象.innerHTML:获取元素的整个html片段--> //返回第一个子节点:对象名.firstChild;返回最后一个子节点：对象名.lastChild; var firstEle=father.firstChild; //返回父节点 var son=document.getElementById("元素ID"); var parent=son.parentNode //返回前一个兄弟节点：对象名.previousSibling; 返回后一个兄弟节点：nextSibling; var di=document.getElementById("ID名"); var xiong=xiong.previousSibling; //获取标签遍历所有节点 var list=document.getElementsByTagName("标签名"); for(var i=0;i<list.length;i++){ var liFile=lis[i]; alert(liFile.innerText); } //传入name值查找对象 var names=document.getElementByName("元素的name"); for(var i=0;i<names.length;i++){ var lis=names[i]; alert(lis.value); } //名为parent的父元素的子节点 var parent=document.getElementByName("name"); var son=parent.getElementByTagName("子标签名"); for(var i=0;i<son.length;i++){ var lis=son[i]; alert(lis.innerHTML); } //返回名为parent的父元素的子节点们 var parent=document.getElementByName("name"); var child=parent.childNodes; for(var i=0;i<child.length;i++){ alert(child[i].nodeValue) } //读取元素value 值 var ele=document.getElementById("ID"); alert(ele.value); //设置元素新值 var ele=document.getElementById("ID"); ele.value="新值"; //返回文本 var ele=document.getElementById("ID"); alert(ele.innerText); alert(ele.innerHTML); <!---->
7. dom增删改
<!--修改 元素.元素的属性-->
var ele=document.getElementById("ID");
ele.innerText="newText"; //修改属性文本
<!--删除 父节点.removeChild(当前节点)-->
var ele=document.getElementById("Id");
//找到要删除的节点的父节点
var parent=ele.parentNode;
parent.removeChild(ele);
<!--替换 父节点.replaceChild(新元素,旧元素);-->
var ele=document.getElementById("Id");
var parent=ele.parentNode;
parent.replaceChild(newele,ele);
<!--创建 父元素.appendChild(新建子节点);-->
//1.创建子节点
//2.创建父节点
//3.把子节点加到父节点
//创建<li>南京</li>
var ele=document.getElementById("id");
//创建子节点
var textEle=document.createTextNode("南京");
//创建父节点
var liEle=document.createElement("li");
alert(textEle.nodeName+"---"+liEle.nodeName);
//子节点加入父节点
liEle.appendChild(textEle);
<!--替换 父元素.replaceChile(新节点,旧节点);-->
var parentUl=document.getElementById("Ul");
parentUl.replaceChile(newNode,oldNode);
<!--在一个节点之前插入新节点 父元素.insertBefore(新节点,目标节点);-->
//创建子节点
var textEle=document.createTextNode("南京");
//创建父节点
var liEle=document.createElement("li");
//子节点加入父节点
liEle.appendChild(textEle);
//找到目标节点的节点
var insert=document.getElementById("in");
//找到父元素
var parent=document.getElementById("parent");
parent.insertBefore(liEle,insert);新节点 父元素.insertBefore(新节点,目标节点);–>
//创建子节点
var textEle=document.createTextNode(“南京”);
//创建父节点
var liEle=document.createElement(“li”);
//子节点加入父节点
liEle.appendChild(textEle);
//找到目标节点的节点
var insert=document.getElementById(“in”);
//找到父元素
var parent=document.getElementById(“parent”);
parent.insertBefore(liEle,insert);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
