JavaScript小结

ZhangCong01

于 2019-07-19 22:09:06 发布

阅读量127

点赞数

分类专栏： web前端文章标签： web

本文链接：https://blog.csdn.net/ZhangCong01/article/details/96476907

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.JavaScript通常用来操作HTML，文档输出document.write("");执行顺序按照编写顺序执行

2.JavaScript标识符必须以字母、下划线或美元符号开始，它会忽略到多余的空格

3.JavaScript数据类型：1.字符串 2.数字 3.布尔：返回真或者假 4.数组 5.对象 6.null 7.未定义 8.赋值为空清除变量

4.JavaScript运算符：1.算术运算符：+、-、*、%、++、--。 2.算数运算符:=、+=、-=、/=、%=。例：i+=j:i=i+j

3.字符串操作：任何类型与字符串相加都转换为字符串类型，变为拼接。例5+“5”结果为55

4.比较运算符：==（不看类型）、===（看类型）、！==、！==、>、< 。5.逻辑运算符：&&、||、！。

6.条件运算符：x<10?"x比10小"：“x比10大”

5.JavaScript条件语句：1.if else 2.switch。例switch（条件语句）{

case 1： document.write（）； break； case 2： document.write（）； break；

default： document.write（）； break； }

6.for循环: for（i=0;i<10;i++）{}

7.while循环： while(i<10){}括号内容为真继续执行，否者停止执行。

do、while：do{}while（i<10:先执行一次再判断

8.跳转语句：break：跳出当前循环语句；continue：跳出本次循环，并进行下一次循环

9.函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。

定义函数：function 函数名（）{函数体}在调用时必须按照相同名称调用函数

10.函数的调用：调用方式1.<script>标签内调用 2.在HTML文件中调用

函数参数：demo（arg1,arg2）; 可以给两个参数进行操作

11.函数的返回值：有时需要将函数的返回值调用给其他地方。return。

12.局部变量和全局变量：局部：函数体内var i = 10为局部变量只能在函数体内使用。

全局：声明在函数体外，可以一直使用，在函数体内 i = 10为全局变量。

13.JavaScript异常捕获：异常：执行代码时，发生了错误，导致程序停止运行。异常抛出：产生异常，生产错误信息

异常捕获：try{发生异常的代码块}catch（err）{错误信息的处理。例弹出错误aler（err）；}，如果没有错误，只触发try。

throw语句：通过throw语句创建一个自定义错误。例function demo(){ try{ var e = document.getElementById（）.value;

if(e==“”){throw "请输入"；}}catch(err){alert(err)}}

14.JavaScript事件：事件是可以被Javascript侦测到的行为：1.onClick单击事件。2.onMouseOver鼠标经过事件。

3.onMouseOut鼠标经过事件。4.onChange文本内容改变事件。5.onSelect文本框选中事件。6.onFocus光标聚集事件。

7.onBlur移开光标事件。8.onLoad：网页加载事件。9.onUnload关闭网页事件。

15.JSDOM简介：HTML DOM：网页被加载时，浏览器会创建页面的文档对象模型，通过DOM改变元素及属性的值

16.DOM操作HTML：1.文档加载完之后不能使用document.write（）会覆盖文档。2.可以通过id找到元素，通过标签名找元素。3.改变HTML的内容使用属性：innerHTML

17.通过DOM对象改变CSS。语法：document.getElementById("div").style.background(要更改的属性)="blue(新的属性值)"

18.DOM EventListener：给元素添加一个事件句柄，改动函数时可以直接在内部改变减少工作量，句柄之间不会覆盖：1.addEventListener（事件，方法）/addEventListener（事件，函数名）function 函数（）{}：向指定元素添加事件句柄。 2.removeEventListener（事件，函数）：移除事件句柄。

19.JS事件流：在网页中接受事件的顺序。事件冒泡：从最具体的到最不具体的。事件捕获：从最不具体的到最具体的。

20.JS事件处理：1.HTML事件处理：直接添加到HTML中，在元素标签中直接添加事件进行操作，缺点：修改一处会改动两处

2.DOM0及事件处理:把一个函数属性值给一个事件处理程序属性。多个事件会被覆盖掉

例：document.getElementById（“id”).οnclick=function(){alert("0级处理")}

3.DOM2级事件处理：通过添加句柄的方式。addEventListener（事件名，事件处理函数，布尔值【可以忽略，true：事件捕获flase：事件冒泡】）。移除使用：removeEventListener（事件，函数）。改变函数只用删一处，多个事件并不会被覆盖。

4.IE处理程序：attachEvent（事件，方法）：添加事件。detachEvent：移除事件。

例：支持很多浏览器if（id.addEventListener）{id.addEventListener（事件，方法）}

else if(id.attachEvent){id.attachEvent（事件，方法）}

else{id.事件=方法}

21.事件对象：在触发DOM事件时都会产生一个对象。

事件对象event：1.type：获取事件类型。例：document.getElementById("id").addEventListener（事件，方法）

function 函数（event）{alert（event.type）；}，此次事件为点击事件

2.target：获取事件目标。将上面的type改成target。获取的目标是上面的id的元素

3.stopPropagation（）：阻止事件冒泡。因为在文本当中是默认为事件冒泡，会执行包含它所指元素的上一级元素的函数。所以需要阻止它。在函数中写：event.stopPropagation（）；

4.preventDefault():阻止事件默认行为。例<a>标签有超链接的话，超链接就是它的默认行为。

例：document.getElementById("id").addEventListener（事件，方法）

function 函数（event）{event.preventDefault();}

22.什么是对象：JS中所有事物都是对象，字符串、数组、函数、数值等，每个对象都具有属性和方法。JS中允许自定义对象。

自定义对象：1.直接定义并创建对象实例。例：创建对象：people =new Object（）；dae = new Date（），

其属性：people.name = "zc" people.age="30",再通过write打印输出。或者people={name:"zc",age:"30"}，在通过write输出。

2.使用函数来定义对象，然后创建对象实例：例:

function people（name,age）{this.name=name; this.age=age;

son=new people("zc",30)； document.write(son.name+",age"son.age)}

23.JS内置对象string字符串对象：用于处理已有的字符串，字符串可以用单引号也可以用双引号。

字符串的属性：length字符串的长度例：document.write(str.length)。

match():内容匹配：document.write(str.match("word"));存在就打印出来，不存在返回空。

字符串的方法：indexOf():查询字符串是否存在，存在返回其当前位置，不存在返回-1。document.write(str.indexOf("word"));

replace():替换字符串。document.write(str.replace("原字符串"，“新字符串”))

字符串大小写转换：toUpperCase（）：转换为大写。toLowerCase（）：转换为小写。document.write(toUpperCase（）);

字符串转换为数组：var s =str.split("分割的符号如，") document.write(s[1]);打印数组中的1号

24.JS内置对象Date日期对象：用于处理日期和时间。常用方法：getFullYear():获取年份,getTime():获取毫秒,setFullYear():设置具体的日期

getDay():获取星期。例设置事件：date.setFullYear(2020.1.1); document.write(date);通过自己调用自己来不断获取事件

例：时钟

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById("div").innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function () {
        startTime();
    },500);
}
function checkTime(i) {
    if(i<10){
        i = "0"+i;
    }
        return i;

}

25.JS内置对象array数组对象：使用单独的变量名来存储一系列的值。通过特定数组名及索引号码，访问特定元素。

数组常用方法：1.concat():合并数组。var c = a.concat(b)

2.sort():排序。例：

document.write(a.sort(function(a,b)//设置为降序。升序直接调用a.sort()
 {
     return b-a;
 }));

3.push():末尾追加元素。

var a =["a","b"];
 a.push("c");
 document.write(a);//在末尾追加

4.reverse():数组元素翻转

var a = ["c","b","a"];
 document.write(a.reverse());//翻转

26.Math对象：执行常见的算数任务。常用方法：round（）：四舍五入，random（）：返回0-1之间的随机数

max（）：返回最高值

// document.write(Math.round(2.5));//四舍五入
// document.write(Math.random());//返回0-1之间的随机数
// document.write(parseInt(Math.random()*10));//返回01-10之间的整数
// document.write(Math.max(100,20,10));
// document.write(Math.min(100,0,20));
// document.write(Math.abs(-10));//返回绝对值

27.DOM对象控制HTML：方法：

1.getElementsByName（）获取name。2.getElementsByTagName（）获取元素

3.getAttribute（）获取元素属性。4.setAttribute（）设置元素属性。5.childNodes（）：访问子节点

6.parentNodes（）访问父节点。7.createElement（）创建元素节点。8.createTextNode创建文本节点

9.insertBefore（）插入节点。10.removeChild（）删除节点。11.offsetHeight网页尺寸。不包含滚动条12.scrollHeight网页尺寸

//前提：设置了4个p元素，name都是pn
//  function getName()
//  {
//      var count = document.getElementsByName("pn");
//      var count = document.getElementsByTagName("p");
//      var p = count[2];
//      p.innerHTML = "World";
// }
// getName();//获取name达到更改目的;直接获取元素达到更改的目的
function getAttr() //获取元素属性
{
    var anode = document.getElementById("aid");
    var attr = anode.getAttribute("href");
    alert(attr);
}
function setAttr() //设置元素属性
{
    var anode = document.getElementById("aid1");
    anode.setAttribute("href","http;//www.4399.com");
    var attr = anode.getAttribute("href");
    alert(attr)
}
//有多个列表
function getChildNode(){
    var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取第0个位置的元素
    alert(childnode.length)//ul标签与li标签后的空白会当成一项
}
function getParentNode(){
    var div = document.getElementById("pid");
    alert(div.parentNode.nodeName);//获取父节点的名字
}
function createNode() //创建元素节点
{
    var body = document.body;//获得body
    var input = document.createElement("input");//创建节点类型
    input.type = "button";//指定类型
    input.value = "按钮";
    body.appendChild(input);//将节点添加到body中
}
function createNode1() //创建文本节点
{
    var body = document.body;
    var input = document.createElement("input");
    input.type = "text";
    // input.value = "按钮";
    body.appendChild(input);
}
function addNode()//插入节点，把节点放在p元素前面
{
    var div =document.getElementById("div");
    var node = document.getElementById("pid");
    var newnode = document.createElement("p");
    newnode.innerHTML = "动态添加了一个p元素";
    div.insertBefore(newnode,node);//放在node的前面
}
function removeNode()//删除节点
{
    var div = document.getElementById("div");
    var p = div.removeChild(div.childNodes[1]);
}
function getSize()//网页尺寸
{
    var width = document.documentElement.offsetWidth||document.body.offsetWidth;//浏览器的兼容可以用异或都写起
    var height = document.documentElement.offsetHeight||document.body.offsetHeight;
    alert(width+","+height);

27.JS浏览器window对象：bom的核心，当前浏览器窗口，全局变量是Window对象的属性，全局函数是window对象的方法

HTML DOM也是window对象的属性之一

尺寸：window.innerHeight浏览器窗口内部高度。 window.innerwidth浏览器窗口内部宽度。

方法：window.open()打开新窗口 window.close()关闭当前窗口

<button id="btn" onclick="btnClicked()">按钮</button>

// document.write("宽度"+window.innerWidth+",高度"+window.innerHeight);//浏览器内部的宽高
function btnClicked() {
    // window.open("xiaoguo.html"//指定要打开的窗口,"windowname"//设置打开页面的名字,"height=200,width=200,top=200 left=200,toolbar=no工具条不显示,menubar=no菜单不显示");//打开新的页面，并设置
window.close();//关闭window页面

28.JS浏览器对象计时器：通过JavaScript，设置代码在一个时间间隔后才执行。

计时方法：1.setlnterval（）间隔指定的毫秒数不停地执行代码。clearnterval（）用于停止setlnterval（）方法执行的函数代码

2.setTimeout（）暂停指定的毫秒数后执行指定的代码。clearTimeout（）用于停止setTimeout（）方法执行的函数代码

<button id="btn" onclick="stopWin()">按钮</button>
<p id="pid"></p>
<script>
    // var mytime = setInterval(function () {
    //    getTime();
    // },1000);//里面有两个参数，第一个为方法函数setInterval会不停的调用，第二个为延时多久执行
    // function getTime() //间隔指定的毫秒数不停执行指定的代码
    // {
    //     var d = new Date();//创建日期的对象
    //     var t = d.toLocaleTimeString();//转换为时分秒的字符串
    //     document.getElementById("pid").innerHTML=t;
    // }
    // function stopTime() {
    //     clearInterval(mytime);//停止执行的代码，从而停止时间
    // }
    var win;
    function getWin() //暂停指定的毫秒数后执行指定的代码
    {
        alert("hello");
        win = setTimeout(function ()
        {
         getWin();//自己调用函数使其一直执行，一直弹出窗口
        },3000);//setTimeout语法格式与setInterval一致
    }
    function stopWin() //停止执行setTimeout()方法的函数代码
    {
        clearTimeout(win);
    }
</script>

29.JS的History对象：对象包含浏览器历史的集合

History方法：1.history.back()后退。2.history.forward（）前进。3.history.go进入历史某个页面

由一个页面进入此页面进行一系列操作
 <form>
        <input type="text" id="username">
    </form>
    <button id="btn" onclick="safe()">按钮</button>
<!--    <script>-->
<!--        function goceshi() {-->
<!--            history.back();//回退-->
<!--        }-->
<!--    </script>-->
    <script>
        function safe() //
        {
            var name =document.getElementById("username").value;
            if(name=="hello"){
                history.go(-1);//进入历史中的某个页面
            }else{
                alert("输入错误");
            }
        }
    </script>

30.JS的location对象：获得当前页面的地址，并把浏览器重定向到新的页面

location对象属性：1.location.hostname返回web主机域名。2.location.pathname返回当前页面的路径与文件名

3.location.port返回web主机端口。4.location.protocol返回所使用的web协议。5.location.href属性返回当前页面的URL

6.location.assign（）方法加载新的文档

// document.getElementById("pid").innerHTML=window.location.hostname;//返回web主机域名
//document.getElementById("pid").innerHTML=window.location.pathname;//得到当前页面路径和文件名
// document.getElementById("pid").innerHTML=window.location.port;//得到当前端口
 //document.getElementById("pid").innerHTML=window.location.href;//得到当前页面地址
// location.assign("http://www.4399.com");//在函数事件中加载新的文档，传递给HTML的元素

31.JS浏览器screen对象：包含有关用户屏幕的信息

document.write("可用高度："+screen.availHeight+"，可用宽度："+screen.availWidth);
 document.write("屏幕高度："+screen.height+"，屏幕宽度："+screen.width);

ZhangCong01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小结

1.JavaScript通常用来操作HTML，文档输出document.write("");执行顺序按照编写顺序执行2.JavaScript标识符必须以字母、下划线或美元符号开始，它会忽略到多余的空格3.JavaScript数据类型：1.字符串 2.数字 3.布尔：返回真或者假 4.数组 5.对象 6.null 7.未定义 8.赋值为空清除变量4.JavaScript运算符：1.算术运...
复制链接

扫一扫