JS
js数组：array.html
<script type="text/javascript"> 设置script
typeof 判断表达式的类型并返回、
arr.length js中获取数组长度是通过.length属性，PHP中是通过count($arr)获取
arr[arr.length]="four"; //向数组中添加元素
arr.push("six"); //想数组中添加元素
arr.pop(); //删除数组中的元素，删除的是最后一个
arr.shift(); //删除数组中的第一个元素
arr.unshift(); //向数组前添加一个元素
if(2 in arr) //in 判断数组中的索引（下标）是佛在某个数组中，
delete arr["a"]; //删除数组中的元素
arr.join(" "); //把数组分割成字符串
arr.tostring(); //把数组转换为字符串
time.tolocalstring(); //对时间函数来讲用tolocalstring
arr.reverse(); //数组反转
arr.concat(); //把两个数组连接起来
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="text/javascript"> 8 var arr=[];//创建数组 9 console.log(typeof arr); 10 arr=[1,2,3]; 11 console.log(arr); 12 arr=[ 13 {x:1}//数组里边的值可以是一个对象（属性=变量） 14 ]//中括号和PHP中括号不一样，不能写下标, 15 console.log(arr); 16 var arr1=new Array(1,3);//创建数组 17 // var arr1=[1,3]//效果一样,但是最好不要写成arr1[]=1; 18 console.log(arr1); 19 var arr3=["world","hello","first"]; 20 console.log(arr3[0]); 21 console.log(arr3.length);//js中获取数组长度是通过length属性，PHP中是通过count（$arr）获取长度 22 //js使用的编码格式是unicode， 23 arr3[arr3.length]="four";//向数组中添加元素 24 console.log(arr3); 25 arr3[arr3.length]="我";//向数组中添加元素 26 console.log(arr3); 27 arr3.push("six");//通过.来调用方法。push函数向数组后添加值 28 arr3.push("seven"); 29 console.log(arr3); 30 // arr3.pop();//删除数组中的值，删除的是最后一个元素 31 console.log(arr3.pop());//弹出被删除的值；pop和push对应 32 var last_val=arr3.pop();//删除数组最后一个值 33 console.log(arr3); 34 console.log(arr3.shift());//弹出（删除）数组中的第一个元素 35 console.log(arr3); 36 console.log(arr3.unshift(10));//unshift和shift相反，shift是删除，unshift是向数组前添加元素 37 console.log(arr3); 38 // if(2 in arr3){//in判断数组中的索引（下标）是否在某个数组中，数组是以key=>value 键值对 方式存储的 39 // alert(1); 40 // }else{ 41 // alert(0); 42 // } 43 44 // var arr4=new Array(); 45 var arr4=[]; 46 arr4["a"]=1;//中括号内如果键名是字符串要用引号 47 console.log(arr4); 48 delete arr4["a"]; 49 console.log(arr4); 50 arr3["a"]=11; 51 console.log(arr3); 52 console.log(arr3.length); 53 for(var i=0;i<arr3.length;i++){ 54 // console.log(arr3[i]); 55 if(i==1){ 56 // break; 57 continue; 58 } 59 console.log(arr3[i]); 60 } 61 //js中数组下标很少用字符串 62 //split()//把字符串分割为数组 63 var str= arr3.join(" "); 64 //把数组分割（组合）成字符串，用在前后台数据交互 65 console.log(str); 66 arr3.reverse();//数组反转 67 console.log(arr3); 68 var arr5=[9]; 69 console.log(arr5); 70 arr6 = arr3.concat(arr5);//把两个数组连接 71 console.log(arr6); 72 console.log(arr3.toLocaleString());//把数组转换为字符串 73 time=new Date(); 74 console.log(time.toLocaleString());//new Date() 75 </script> 76 </head> 77 <body> 78 <div>TODO write content</div> 79 </body> 80 </html>
DOM节点：dom.html
document.getelementsById().innerHTML
.outerHTML
.value
.name
.id
.type
document.getelementsByName("username");
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Document</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <!--div和p标签不存在value属性--> 10 <div id="first" name="first" value="first1" class="ss">根据id获取对应标签</div> 11 <P id="page">获取P标签内容</P> 12 <!--和用什么标签没有关系--> 13 <div >根据tag获取标签</div> 14 <input type="text" value="张三" id="username1" name="username"/> 15 <input type="text" value="李四" id="username2" name="username"/> 16 <select name="sel"> 17 <option value="1" selected>select文本</option> 18 <option value="2" >select文本</option> 19 </select> 20 <script type="text/javascript">//代码是按照顺序从上往下执行 21 // innerHTML获取内部内容 22 alert( document.getElementById("first").innerHTML); 23 alert( document.getElementById("first")); 24 alert( document.getElementById("first").outerHTML); 25 alert( document.getElementById("page").innerHTML); 26 alert(document.getElementById("username1").value); 27 alert(document.getElementById("username2").id); 28 alert(document.getElementById("username1").name); 29 alert(document.getElementById("username2").type); 30 // value,id,name,type都是属性,这里的属性都是内置好的，而不是自己定义的 31 alert(document.getElementsByName("username"));//[object Nodelist] 32 //输出的是一个数组，通过 [].值 来获得值 33 console.log(document.getElementsByName("username")[0].value); 34 console.log(document.getElementsByName("sel")[0].value); 35 console.log(document.getElementsByTagName("select")[0].value); 36 console.log(document.getElementsByClassName("ss")[0].innerHTML); 37 // css选择器，里边可以任意写，可以写标签名，类名，#id，名字；div .class #id自动匹配第一个元素 38 console.log(document.querySelector("input").value); 39 console.log(document.querySelector("#username1").value); 40 console.log(document.querySelector(".ss").id); 41 console.log(document.querySelectorAll("input")[0].value); 42 </script> 43 </body> 44 </html>
node节点：note.html
.firstchild //第一个子节点
.lastchild //最后一个子节点
.nextsibling //下一个兄弟节点
.previoussibling //上一个兄弟节点
.innerhtml //返回开始和结束标签之间的html内容
document.getElementById("").innerHTML="div标签"; //赋值或者是替换内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <div id="ss" class="na"> 10 <span id="child"></span> 11 <span id="child1"></span> 12 </div> 13 <!--换行符会以test显示出来--> 14 <ul id="u"> 15 <li>1</li> 16 <li>2</li> 17 <li>3</li> 18 </ul> 19 <script type="text/javascript"> 20 //parentNode父节点,此节点用的较多 21 var p=document.getElementById("child").parentNode; 22 console.log(p); 23 console.log(p.id); 24 console.log(p.className);//获取父节点的class的值 25 26 var d=document.getElementById("ss").childNodes;//用的较少 27 console.log(d); 28 console.log(d[0].id); 29 //获取第一个子节点，标签之间没有空格才会获取对应的子节点 30 var c=document.getElementById("u").firstChild; 31 console.log(c); 32 //获取最后一个子节点 33 var c_last=document.getElementById("u").lastChild; 34 console.log(c_last); 35 36 var c_all=document.getElementById("u").childNodes; 37 console.log(c_all); 38 // nextSibling下一个兄弟节点 39 var s_next=document.getElementById("ss").nextSibling; 40 console.log(s_next); 41 //previousSibling上一个兄弟节点 42 var s_pre=document.getElementById("u").previousSibling; 43 console.log(s_pre); 44 45 // alert(document.getElementById("ss").innerHTML); 46 //替换内容 47 document.getElementById("ss").innerHTML="div标签"; 48 49 </script> 50 </body> 51 </html>
click.html
onclick="函数名"; //点击事件
onmouseover="函数名"; //鼠标滑过事件
<div>和<a>标签不存在value属性
window.location="url或另一个html文件"; //跳转页面，在当前页面打开
window.location.reload(); //刷新窗口
<a href="javascript:history.back()">返回</a> //返回上一个页面或文件
<a href="javascript:history.forward()">返回</a> //进入下一个文件，前进
history.go(3); //前进3个页面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="text/javascript"> 8 function c1(){ 9 alert("1"); 10 } 11 function open_win(){ 12 //应用：登录成功之后，跳转到要显示的页面 13 window.location="http://www.baidu.com";//在当前页面打开 14 } 15 function shuaxin(){ 16 window.location.reload(); 17 } 18 function open_new(){ 19 window.location="client1.html" 20 } 21 function forward_win(){ 22 history.forward(); 23 } 24 alert(navigator.userAgent);//用户代理，浏览器的相关信息 25 alert(navigator.platform); 26 alert(navigator.appName); 27 alert(navigator.appVersion); 28 alert(screen.width); 29 alert(screen.height); 30 alert(screen.availWidth); 31 alert(screen.availHeight); 32 alert(screen.colorDepth); 33 </script> 34 </head> 35 <body> 36 <div onclick="c1()" >点击</div> 37 <p onclick="c1()" >点击</p> 38 <input type="button" value="点击" onclick="c1()" onmouseover="c1()"/> 39 <a href="javascript:void();" onclick="c1()">aa</a> 40 41 <a href="javascript:void();" onclick="open_win()">打开窗口</a> 42 <a href="javascript:void();" onclick="shuaxin()">刷新窗口</a> 43 <br> 44 <a href="javascript:void();" onclick="open_new()">打开</a> 45 <br> 46 <!--<a href="javascript:void();" onclick="forward_win()">前进</a>--> 47 <!--表示超链接执行的是js函数中的history.forward方法--> 48 <a href="javascript:history.forward();" >前进</a> 49 <!--1,2,3 正数前进，0刷新，负数回退--> 50 <a href="javascript:history.go(3);">go</a> 51 52 </body> 53 </html>
form表单js验证：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <form action="form.php" method="post" id="form"> 10 用户名：<input type="text" name="username" id="username"> 11 邮箱 ：<input type="text" name="email" id="email" > 12 <input type="button" value="提交" id="submit_form" onclick="check_form()"> 13 </form> 14 <script type="text/javascript"> 15 function check_form(){ 16 if(document.getElementById("username").value==""){ 17 alert("用户名不能为空"); 18 return false; 19 } 20 if(document.getElementById("email").value==""){ 21 alert("用户邮箱不能为空"); 22 return false; 23 } 24 document.getElementById("form").submit(); 25 } 26 </script> 27 </body> 28 </html>
js.html
Math.pow(2,2); //2的2次幂
Math.max(a,b,c); //返回最大值，min是最小值
Math.random(); //生成一个大于0小于1的随机数
tofixed(); //四舍五入，括号内保留几位小数
charAt(); //返回指定未知的字符，str.charAt(2);
str.substring(1,4); //第2~4个字符
str.lastIndexof("l"); // l最后出现的位置
typeof(); //返回类型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <!--外部引入文件可以使js文件也可以是其他脚本语言--> 8 <!--<script src="testjs.js"></script>--> 9 <!--<script src="test.php?act=index"></script>--> 10 <!-- <noscript>1 11 请换一个支持js的浏览器 12 </noscript>--> 13 <script> 14 15 //alert 16 alert("开始学习js"); 17 18 $a=1; 19 alert($a); 20 var Number=2; 21 alert (Math.pow(2,2)); 22 alert(Math.max(10,2,3,2,5,6,3,3,5,33)); 23 alert(Math.min('a','a','c')); 24 alert(Math.min('0.1','1','0.5')); 25 // 生成0-1之间的随机小数 26 alert((Math.random()*100).toFixed(0)); 27 alert(Math.PI); 28 alert(Math.E); 29 alert(Math.exp(3)); 30 31 alert(-10/0);// 上溢 无穷 32 //aleret(Numeber.MIN_VALUE);//js里边的最大值 33 alert(2e-3); 34 var str2="abcdwew"; 35 alert(str2.charAt(str2.length-1));//最后一个字符 36 str4="a,b,c"; 37 console.log(str4.replace(",","/")); 38 console.log(1>2); 39 str5="abc"; 40 alert(parseInt(str5)); 41 alert(Math.pow(8,1/3)); 42 alert(Math.sqrt(9)); 43 var a= Number.MIN_VALUE/2; 44 alert (a); 45 var x = 0.3 - 0.2; 46 alert(x); 47 var txt="abcdefghigklmnopqrstuvwxyz" 48 document.write(txt.length); 49 var s = "hello, world"; 50 alert (s.substring(1,4)); 51 alert(s.lastIndexOf("l")); 52 alert(typeof(null)); 53 54 55 </script> 56 </head> 57 <body> 58 <div>javascript</div> 59 </body> 60 </html>
js对象：
object.html
script也可以写成src=“”这种形式引入js。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="object.js"></script> 8 </head> 9 <body> 10 11 </body> 12 </html>
object.js
1 //第一种方式 2 var empty={}//生成一个空对象，一般不用这种方式 3 //变量：值（在对象里边变量称为属性）;(变量加单双引号，对结果没有影响);多个变量之间用逗号隔开； 4 empty={'x':1,y:2}; 5 console.log(empty);//就像PHP中用var_dump（）一样 6 console.log(empty.x);//对象.属性 （输出对象里边的某个属性） 7 8 //第二种方式，这种方式也不常用 9 var empty2=new Object();//创建空对象， 10 empty2.x=4;//为空对象添加一个属性，同时赋值 11 console.log(empty2);// 12 // 13 //第三种方式(和第四种方式比起来，在内部添加方法，) 14 function person(){//在js里面声明对象用的是function 15 // name = "张三";//不加this的时候这是一个变量 16 this.name="张三";//this是js在函数运行时自动生成一个内部对象 17 this.say=function(){//say是一个匿名函数或叫方法 18 console.log(this.name+"说话"); 19 } 20 }//方法 21 var p1=new person();//在外部使用对象 需要new关键词来声明。后面跟上对象名称。 22 console.log(p1.name); 23 p1.say();//say()是一个函数 24 25 function person1(){ 26 this.name = "张三"; 27 this.say=function(){ 28 console.log(this.name+"说话"); 29 } 30 } 31 //function方法里面有this， 32 //把方法（函数）和属性（变量）封装起来就是一个对象 33 var p2 = new person1(); 34 var a= new person1(); 35 console.log(a.name); 36 p2.say(); 37 //person1();//最好用上一种方法(new的方式)调用函数var p1=new person(); 38 //say(); 39 40 41 //第四种方法，prototype 42 function person2(){}//prototype 原型属性对象 43 person2.prototype.sex="女"; 44 person2.prototype.eat=function(){ 45 console.log("吃饭"); 46 return 123; 47 } 48 var p3=new person2(); 49 console.log(p3.sex); 50 console.log(p3.eat());//console.log();在函数有返回值得时候才可以使用 51 p3.eat(); 52 // 53 //延伸。参数是可变的 54 function person4(name,sex){ 55 this.name=name; 56 this.sex = sex; 57 this.say = function(){ 58 console.log(this.name+"在说话"); 59 } 60 } 61 var p4=new person4("李四","男"); 62 var p5=new person4("王五","女"); 63 64 p4.say(); 65 p5.say();
浙公网安备 33010602011771号