javascript总结

最新推荐文章于 2022-08-18 16:22:30 发布

我可能是个假开发

最新推荐文章于 2022-08-18 16:22:30 发布

阅读量439

点赞数

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

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/70254553

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

javascript总结

ECMAScript

1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
3.数据类型：原始数据类型(undefined/null/string/number/boolean)
4.语句：
5.运算符：==与===的区别
6.函数：两种写法(有命名称，匿名的)

BOM对象

window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数)，back(),forward()
location: href属性

DOM操作

DOM文档结构.PNG

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

document对象.png

后面两个方法获取之后需要遍历！

以下两个方法很重要，但是在手册中查不到！

创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

Element对象

我们所认知的html页面中所有的标签都是element元素

element.appendChild():向元素添加新的子节点，作为最后一个子节点。
element.firstChild:返回元素的首个子节点。
element.getAttribute():返回元素节点的指定属性值。
element.innerHTML:设置或返回元素的内容。
element.insertBefore():在指定的已有的子节点之前插入新节点。
element.lastChild:返回元素的最后一个子元素。
element.setAttribute():把指定属性设置或更改为指定值。
element.removeChild():从元素中移除子节点。
element.replaceChild():替换元素中的子节点。

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

attribute对象.png

练习

在页面中使用列表显示一些城市

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>

我们希望点击一个按钮实现动态添加城市。

分析：

事件(onclick)
获取ul元素节点
创建一个城市的文本节点
创建一个li元素节点
将文本节点添加到li元素节点中去。
使用element里面的方法appendChild()来添加子节点

JS代码：

<script>
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            //1.获取ul元素节点
            var ulEle = document.getElementById("ul1");
            //2.创建城市文本节点
            var textNode = document.createTextNode("深圳");//深圳
            //3.创建li元素节点
            var liEle = document.createElement("li");//<li></li>
            //4.将城市文本节点添加到li元素节点中去
            liEle.appendChild(textNode);//<li>深圳</li>
            //5.将li添加到ul中去
            ulEle.appendChild(liEle);
        }
    }
</script>

HTML代码

<body>
    <input type="button" value="添加新城市" id="btn"/>
    <ul id="ul1">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>
</body>

事件：

onsubmit()此事件写在form标签中，必须有返回值。
onload()此事件只能写一次并且放到body标签中
其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)

回顾之前已经使用过的事件
(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)

事件.png

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)

获取元素：

document.getElementById("id")

获取元素里面的值:

document.getElementById("id").value

向页面输出

弹窗：alert();……
向浏览器中写入内容：document.write(内容)；
向页面指定位置写入内容,innerHTML

JavaScript内置对象

JS Array
JS Boolean
JS Date
JS Math
JS Number
JS String
JS RegExp

Array对象

数组的创建：
Array对象用于在单个的变量中存储多个值

创建Array对象的语法：

new Array();
new Array(size);
new Array(element0,element1,...,elementn);

数组的特点：长度可变！数组的长度=最大角标+1

Boolean对象

创建Boolean对象的语法：

new Boolean(value);//构造函数
Boolean(value);//转换函数

如果value 不写，那么默认创建的结果为false

Date对象

getTime()返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题

Math和number对象

与java里面的基本一致。

String对象

match()找到一个或多个正则表达式的匹配。
substr()从起始索引号提取字符串中指定数目的字符。
substring()提取字符串中两个指定的索引号之间的字符。

例子：

<script>
    var str = "-a-b-c-d-e-f-";
    var str1 = str.substr(2,4);//-b-c
    //alert(str1);

    var str2 = str.substring(2,4);//-b
    alert(str2);
</script>

RegExp对象

正则表达式对象。
test
检索字符串中指定的值。返回 true 或 false。

全局函数

全局属性和函数可用于所有内建的 JavaScript 对象

这里写图片描述

关于编码和解码的一组方法：

<script>
    var str = "张三";
    //alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
    //alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89

    //alert(decodeURI(encodeURI(str)));//张三
    //alert(decodeURIComponent(encodeURIComponent(str)));//张三

    var str1 = "http://www.ithcx.cn";
    //alert(encodeURI(str1));//http://www.ithcx.cn
    //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.ithcx.cn

    //alert(decodeURI(encodeURI(str1)));//http://www.ithcx.cn
    //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.ithcx.cn

    var str2 = "alert('abc')";
    //alert(str2);
    eval(str2);     
</script>

我可能是个假开发

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript总结

javascript总结ECMAScript1.语法2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！3.数据类型：原始数据类型(undefined/null/string/number/boolean)4.语句：5.运算符：==与===的区别6.函数：两种写法(有命名称，匿名的)BOM对象window:aler
复制链接

扫一扫

专栏目录