Javascript

变量

var 变量名;

<script type=text/javascript>
    var mynum;
    mynum = 8;
</script>

JS区分大小写,num与Num是两个变量

IF判断

小明成绩为80,判断是否合格(>60)

<script type=text/javascript>
    var score = 80;
    if (score >= 60) {
        document.write(及格);
    } else {
        document.write(不及格);
    }
</script>

调用函数

function:定义函数关键词 function 函数名(){函数代码...}

<head>
    <meta charset=UTF-8>
    <meta name=viewport content=width=device-width, initial-scale=1.0>
    <title>Document</title>
    <script type=text/javascript>
        function numCount()
        {
            var num = 10;
            num++;
            alert(num);
        }
    </script>
</head>

<body>
    <input type=button value=点击我 onclick=numCount()>
</body>

document.write();输出内容

输出指定变量、字符串内容,也可以输出换行等标签 document.write(字符串或变量);

<script type=text/javascript>
    var baigei1 = wdnmd;
    var baigei2 = 真的熬;
    document.write(baigei1 + <br />);
    document.write(baigei1 + baigei2 + 玩NM都);
</script>

alert 消息对话框

弹出一个消息对话框 alert(字符串或变量);

<script type=text/javascript>
    var baigei1 = wdnmd;
    alert(baigei1);
</script>

confirm 消息对话框

confirm:点击确定返回true,反之false confirm(字符串或变量);

<script type=text/javascript>
    var mymessage = confirm(你是女生吗);
    if (mymessage == true) {
        document.write(你是女士!);
    } else {
        document.write(你是男士!);
    }
</script>

prompt消息对话框

prompt(字符串1, 字符串2);字符串1为消息框中的文本,不可修改 字符串2为文本框的文本,可修改 点击确定返回文本框内容,取消返回null

<script type=text/javascript>
    var score;
    score = prompt(请输入您的分数:, 100);
    if (score >= 90) {
        document.write(你很棒!);
    } else if (score >= 75) {
        document.write(不错吆!);
    } else if (score >= 60) {
        document.write(要加油!);
    } else {
        document.write(要努力了!);
    }
</script>

window.open打开新窗口

新建一个浏览器窗口 window.open(URL, 名字或特殊名称, 参数);URL为打开浏览器的指定链接; 名字可自定义,相同名字的窗体只能存在一个;特殊名称包含了 _blank,_top,_self 等; 参数有 - top:窗口距离浏览器顶边大小,数值类型

  • left:窗口距离浏览器左边大小,数值类型
  • width:窗口宽度,数值类型
  • height:窗口高度,数值类型
  • menubar:菜单,yes/no
  • toolbar:工具条,yes/no
  • scrollbars:滚动条,yes/no
  • status:状态栏,yes/no
<script type=text/javascript>
    function Wopen() {
        window.open('https://blog.nutssss.cn', 'test', 'width = 600, height = 400, top = 100, left = 0');
    }
</script>

window.close关闭窗口

window.close(); //关闭本窗口对象窗口.close(); //关闭指定窗口

<script type=text/javascript>
    var blog = window.open('https://blog.nutssss.cn');
    blog.close();
</script>

数组

 var myarr=new Array(); //定义数组
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;
 document.write("第一个人的成绩是:"+myarr[0]);
 document.write("第二个人的成绩是:"+myarr[1]);
 document.write("第三个人的成绩是:"+myarr[2]);

组长度获取

 var mynum=new Array(65,90,88,98);
 document.write("数组的长度是:"+  mynum.length );

结果:4

二维数组

创建二维数组

var wdnmd = [[0 , 1 , 2 ],[1 , 2 , 3]]
var wdnmd = new Array();
for(var i = 0; i < 3; i++)
{
    wdnmd[i] = new Array();
    for(var j = 0; j < 6; j++)
    {
        wdnmd[i][j] = i + j;
        document.write(wdnmd[i][j] + " ");
    }
}

结果:0 1 2 3 4 5 1 2 3 4 5 6 2 3 4 5 6 7

多维数组练习

 //第一步把之前的数据写成一个数组的形式,定义变量为 infos
 var infos = [['小A','女',21,'大一'], ['小B','男',23,'大三'], ['小C','男',24,'大四'], ['小D','女',21,'大一'], ['小E','女',22,'大四'], ['小F','男',21,'大一'], ['小G','女',22,'大二'], ['小H','女',20,'大三'], ['小I','女',20,'大一'], ['小J','男',20,'大三']];

 //第一次筛选,找出都是大一的信息
 for(var i = 0; i < 10; i++)
 {
     if(infos[i][3] == '大一')
     {
         for(var j = 0; j < 4; j++)
         {
             document.write(infos[i][j] + " ");
         }
         document.write("<br />");
     }
 }

 //第二次筛选,找出都是女生的信息
  for(var i = 0; i < 10; i++)
 {
     if(infos[i][1] == '女')
     {
         for(var j = 0; j < 4; j++)
         {
             document.write(infos[i][j] + " ");
         }
         document.write("<br />");
     }
 }

函数

函数可以多次调用,减少代码重复

function  函数名( )
{
     函数体;
}
 sub2();
 function sub2() {
   sub=5-2;
   alert("5和2的差:"+sub);
 }

函数调用

直接在script内调用

    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数,直接写函数名。

html里onclick调用

<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件,直接写函数名
</form>

鼠标事件

时间对象

var mydate=new Date();//当前时间2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。

获取当前年份,星期几

var mydate=new Date(); 
var myyear= mydate.getFullYear();
document.write("年份:"+myyear);
  var mydate=new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  document.write("今天是:" + weekday[mydate.getDay()]);

返回/设置时间

 var mydate=new Date();
  document.write("当前时间:"+mydate+"<br>");
  mydate.setTime( mydate.getTime()  + 2* 60 * 60 * 1000);
  document.write("推迟二小时时间:" + mydate);

字符串

字符串大小写转换

小转大:toUpperCase()
大转小:toLowerCase()

    var message="I love JavaScript!";
    var mychar=  message.toLowerCase()   ;
    document.write("字符串为:"+mychar+"<br>");

返回指定位置字符

语法:字符串.charAt(位置)

  var mystr="I love JavaScript!"
  document.write(mystr.charAt(mystr.length-1));

字符串首次位置

语法:字符串.indexOf(字符, 起始位置);
如果忽略起始位置则从首字符开始检索

  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));

结果:
0
4
9

字符串分割

语法:字符串.split("字符", 次数)

var mystr="86-010-85468578";
document.write(mystr.split("-")+ "<br />");
document.write(mystr.split("")+ "<br />");
document.write(mystr.split("", 3));

提取指定字符串

语法:字符串.substring(起始位置,终止位置)
如果忽略终止位置则截取到最后

var mystr="Hello World!"
document.write(mystr.substring(5)+ "<br />");
document.write(mystr.substring(0, 5));

结果:
World!
Hello

提取指定数量字符串

语法:字符串.substr(起始位置,数量)
忽略数量则一直提取到最后

var mystr="Hello World!";
document.write(mystr.substr(5)+ "<br />");
document.write(mystr.substr(0, 5));

结果:
World!
Hello

Math对象

提供数学计算方法

  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);

结果:
3.141592653589793
15


随机数

random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。

document.write((Math.random())*10);

数组对象方法

数组连接

语法:数组.concat(数组1,数组2...数组N)

  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!");
  var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);

结果:
hello!,I,love,JavaScript,!

指定数组连接分隔符

语法:数组.join("字符")

    var myarr1= new Array("86","010")
    var myarr2= new Array("84697581");
    var myarr3= myarr1.concat(myarr2);
    document.write(myarr3.join("*"));

选定数组

语法:数组.slice(起始位置,结束为止)
忽略结束位置则选定到最后

  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);

结果:
1,2,3,4,5,6
3,4
1,2,3,4,5,6

数组排序

语法:数组.sort(方法函数)
如果不指定<方法函数>,则按unicode码顺序排列。
如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。

   function sortNum(a,b) {
        return a - b;
        //升序,如降序,把“a - b”该成“b - a”
   }
    var myarr = new Array("80","16","50","6","100","1");
    document.write(myarr.sort(sortNum));

Window对象

window对象是BOM的核心,window对象指当前的浏览器窗口。

计时器

设置计时器

语法:setInterval(代码,交互时间);

  setInterval(clock, 1000);
  var attime;
  function clock(){
    var time=new Date();
    attime= time;
    document.getElementById("clock").value = attime;
  });

取消计时器

语法:clearInterval(由setInterval返回的ID值)

<head>
    <script type="text/javascript">
        function clock() {
            var time = new Date();
            document.getElementById("clock").value = time;
        }
        var i = setInterval("clock()", 100);
    </script>
</head>

<body>
    <form>
        <input type="text" id="clock" size="50" />
        <input type="button" value="Stop" onclick="clearInterval(i);" />
    </form>
</body>

延时

语法:setTimeout(代码,延迟时间);

<head>
    <script type="text/javascript">
        var num = 0;

        function numCount() {
            document.getElementById('txt').value = num;
            num = num + 1;
            setTimeout("numCount()", 1000);
        }
    </script>
</head>

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" value="Start" onClick="numCount()" />
    </form>
</body>

取消延时

语法:clearTimeout(由setTimeout返回的ID);

<head>
<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onclick="startCount();" />
    <input type="button" value="Stop"  onclick="stopCount();" />
  </form>
</body>

History 对象

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

从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。

语法:window.history.[属性|方法]

对象属性:

  • length:返回浏览器历史url数量

对象方法:

Location对象

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

对象图形展示

对象属性

对象方法

Navigator对象

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

   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);

结果:
Browser nameNetscape Browser version5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36 Edg/85.0.564.51

userAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法:navigator.userAgent

<head>
<script type="text/javascript">
  function validB(){ 
    var u_agent =navigator.userAgent; 
    var B_name="不是想用的主流浏览器!"; 
    if(u_agent.indexOf("Firefox")>-1){ 
        B_name="Firefox"; 
    }else if(u_agent.indexOf("Chrome")>-1){ 
        B_name="Chrome"; 
    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
        B_name="IE(8-10)";  
    }
        document.write("浏览器:"+B_name+"<br>");
        document.write("u_agent:"+u_agent+"<br>"); 
  } 
</script>
</head>
<body>
  <form>
     <input type="button" value="查看浏览器"  onclick="validB()" >
  </form>
</body>

screen对象

screen对象用于获取用户的屏幕信息。

语法:window.screen.属性

屏幕可用高和宽度

  1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。

  2. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。

注意:

不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。

        document.write("可用宽度:" + screen.availWidth);
        document.write("可用高度:" + screen.availHeight);

DOM基操

ID获取元素

找到指定ID并返回Object元素: [object HTMLParagraphElement] 未找到则返回NULL document.getElementById(ID名);

<body>
    <p id=con>JavaScript</p>
    <script type=text/javascript>
        var mychar = document.getElementById(con);
        document.write(结果: + mychar); 
    </script>
</body>

innerHTML 属性

获取或替换html元素内容 Object.innerHTMLObject是获取的元素对象,如通过document.getElementById(ID)获取的元素

<body>
    <h2 id=con>javascript</H2>
    <p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
    <script type=text/javascript>
        var mychar = document.getElementById(con);
        document.write(原标题: + mychar.innerHTML + <br>);
        mychar.innerHTML = Hello world!;
        document.write(修改后的标题: + mychar.innerHTML);
    </script>
</body><body>
    <h2 id=con>javascript</H2>
    <p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
    <script type=text/javascript>
        var mychar = document.getElementById(con);
        document.write(原标题: + mychar.innerHTML + <br>);
        mychar.innerHTML = Hello world!;
        document.write(修改后的标题: + mychar.innerHTML);
    </script>
</body>

改变HTML样式

修改指定ID元素样式 Object.style.样式= 样式属性;Object是获取的元素对象,如通过document.getElementById(ID)获取的元素

<body>
    <h2 id=con>I love JavaScript</H2>
    <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <script type=text/javascript>
        var mychar = document.getElementById(con);
        mychar.style.color = red;
        mychar.style.backgroundColor = #CCC;
        mychar.style.width = 300px;
    </script>
</body>

显示和隐藏

Object.style.display = 值;

<body>
    <h1>JavaScript</h1>
    <p id=con>做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p>
    <form>
        <input type=button onclick=hidetext() value=隐藏内容 />
        <input type=button onclick=showtext() value=显示内容 />
    </form>
    <script type=text/javascript>
        function hidetext() {
            var mychar = document.getElementById(con).style.display = none;
        }

        function showtext() {
            var mychar = document.getElementById(con).style.display = block;
        }
    </script>
</body>

className控制类名

修改指定元素的CSS样式或获取元素class属性

    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className = "one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className = "tow";
       }
    </script>

getElementsByName()方法

返回指定名称的对象集合

<head>
<script type="text/javascript">
function getnum(){
  var mynode=document.getElementsByName("myt");  
  alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">

<br />
<input type="button" onclick="getnum()" value="看看有几项?" />
</body>

结果:
6

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

getAttribute()方法

通过元素节点的属性名称获取属性的值。

<body>
    <p id="intro">课程列表</p>
    <ul>
        <li title="第1个li">HTML</li>
        <li>CSS</li>
        <li title="第3个li">JavaScript</li>
        <li title="第4个li">Jquery</li>
        <li>Html5</li>
    </ul>
    <p>以下为获取的不为空的li标签title值:</p>
    <script type="text/javascript">
        var con = document.getElementsByTagName("li");
        for (var i = 0; i < con.length; i++) {
            var text = con[i].getAttribute('title');
            if (text != null) {
                document.write(text + "<br>");
            }
        }
    </script>
</body>

结果:
第1个li
第3个li
第4个li

setAttribute()方法

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

语法:elementNode.setAttribute(name,value)

说明:

  1. name: 要设置的属性名。
  2. value: 要设置的属性值。
<body>
    <p id="intro">我的课程</p>
    <ul>
        <li title="JS">JavaScript</li>
        <li title="JQ">JQuery</li>
        <li title="">HTML/CSS</li>
        <li title="JAVA">JAVA</li>
        <li title="">PHP</li>
    </ul>
    <script type="text/javascript">
        var Lists = document.getElementsByTagName("li");
        for (var i = 0; i < Lists.length; i++) {
            var text = Lists[i].getAttribute("title");
            document.write(text + "<br>");
            if (text == "") {
                Lists[i].setAttribute("title", "js");
                document.write(Lists[i].getAttribute("title") + "<br>");
            }
        }
    </script>
</body>

节点属性

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

  1. nodeName : 节点的名称

  2. nodeValue :节点的值

  3. nodeType :节点的类型

一、nodeName 属性: 节点的名称,是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

<body>
  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
        var list = document.getElementsByTagName("li");
        for(var i = 0; i < list.length; i++) {
            document.write(list[i].nodeName + "<br />");
            document.write(list[i].nodeType + "<br />");
            document.write(list[i].nodeValue + "<br />");
        }
  </script>
</body>

结果:
LI
1
null
LI
1
null
LI
1
null

访问子节点childNodes

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:elementNode.childNodes

<body>
    <div>
        javascript
        <p>javascript</p>
        <div>jQuery</div>
        <h5>PHP</h5>
    </div>
    <script type="text/javascript">
        var test = document.getElementsByTagName("div")[0].childNodes;
        for (var i = 0; i < test.length; i++) {
            document.write(text[i].nodeName);
        }
    </script>
</body>

结果:
javascript
javascript
jQuery
PHP

访问子节点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.firstChild

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.lastChild

<body>
    <div id="con">
        <p>javascript</p>
        <div>jQuery</div>
        <h5>PHP</h5>
    </div>
    <script type="text/javascript">
        var x = document.getElementById("con");
        document.write(x.firstChild.nodeName + "<br />");
        document.write(x.lastChild.nodeName + "<br />");
    </script>
</body>

访问父节点parentNode

获取指定节点的父节点
语法:elementNode.parentNode

<body>
    <ul id="con">
        <li id="lesson1">javascript
            <ul>
                <li id="tcon"> 基础语法</li>
                <li>流程控制语句</li>
                <li>函数</li>
                <li>事件</li>
                <li>DOM</li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
        var mylist = document.getElementById("tcon");
        document.write(mylist.parentNode.parentNode.parentNode.nodeName);
    </script>
</body>

结果:
UL

访问兄弟节点

  1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:nodeObject.nextSibling

  1. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:nodeObject.previousSibling

<body>
    <ul>
        <li id="tcon">基础语法</li>
        <li id="tcon2">流程控制语句</li>
        <li id="tcon3">函数</li>
        <li>事件</li>
        <li>DOM</li>
    </ul>
    <script type="text/javascript">
        var a = document.getElementById("tcon2");
        document.write(a.nextSibling.nodeName);
        document.write(a.previousSibling.nodeName);
    </script>
</body>

后 插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)

<body>

    <ul id="test">
        <li>JavaScript</li>
        <li>HTML</li>
    </ul>

    <script type="text/javascript">
        var otest = document.getElementById("test");
        var newnode = document.createElement("li");
        var newtext = document.createTextNode("PHP");
        newnode.appendChild(newtext);
        otest.appendChild(newnode);
    </script>

</body>

结果:
JavaScript
HTML
PHP

前 插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);

<body>

    <ul id="test">
        <li>JavaScript</li>
        <li>HTML</li>
    </ul>

    <script type="text/javascript">
        var otest = document.getElementById("test");
        var newnode = document.createElement("li");
        newnode.innerHTML = "PHP";
        otest.insertBefore(newnode, otest.childNodes[1]);
    </script>

</body>

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)

<body>
    <div id="content">
        <h1>html</h1>
        <h1>php</h1>
        <h1>javascript</h1>
        <h1>jquery</h1>
        <h1>java</h1>
    </div>
    <script type="text/javascript">
        function clearText() {
            var content = document.getElementById("content");
            for (var i = content.childNodes.length - 1; i >= 0; i--) {
                var childNode = content.childNodes[i];
                content.removeChild(childNode);
            }
        }
    </script>
    <button onclick="clearText()">清除节点内容</button>
</body>
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...