JavaScript总结

最新推荐文章于 2021-07-31 20:26:31 发布

飞鸟逐岸

最新推荐文章于 2021-07-31 20:26:31 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/HS_blog/article/details/81274656

版权

1. 什么是JavaScript

JavaScript是被设计用来向HTML页面添加交互行为
JavaScript是一种脚本语言
JavaScript由数行可执行计算机代码组成
JvaScript通常被直接嵌入HTML页面
JavaScript是一种解释性语言
所有的人无需购买许可证均可使用JavaScript

1.1 JavaScript的变量

统一使用var定义

变量的命名规则：

1、变量命名必须使用字母、下划线或者$开始；

2、可以使用任意多个英文字母、数字、下划线或$组成；

3、不能使用JavaScript关键词和JavaScript保留字。
变量名称对大小写敏感

1.2 JavaScript数据类型

原始数据类型有：string/number/boolean/null/undefined
引用数据类型：Array/Boolean/Date/Math/Number/String/ReqExp

注意：JavaScript并不区分浮点数和整数，都是用number来表示。

1.3 获取元素内容

获取元素：

 document.getElementById(“id名称”);1

获取元素里面的值

 document.getElementById(“id名称”).value;

1.4 JavaScript 语句

// 构造函数
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];

}
// 原型
Person.prototype = {
    constructor: Person,
    sayName: function() {
        return this.name;
    }
}
// 实例化
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");
alert(person1.friends);                     //输出"Shelby,Count,Van"
alert(person2.friends);                     //输出"Shelby,Count"
alert(person1.friends === person2.friends);     //输出false
alert(person1.sayName === person2.sayName);        //输出true123456789101112131415161718192021222324

1.5 JavaScript常用事件

onload 加载完毕 

onclick 单击事件
ondblclick 双击事件

onfocus 得到焦点
onblur 失去焦点

onchange 改变事件，对于文本框要焦点失去才会判断

onmouseover 鼠标在上面
onmouseout 鼠标离开

onkeyup 键盘弹起
onkeydown 键盘按下

onsubmit 表单提交事件

1.6 设置事件的两种方式：

方式一： 有名/命名函数
事件="函数名（）"；//里面的（）不能省略。。。

方式二： 无名/匿名函数
事件=function(){
            执行代码；
        }

<head>
    <meta charset="UTF-8">
    <title>设置事件的两种方式</title>
</head>
<body>
    <input type="button" value="方式一：有名函数" onclick="fun1()"/>
    <input type="button" value="方式二：无名函数" id="btn2"/>


    <script>
        function fun1(){
            alert("方式一：有名函数");
        }

        var button2 = document.getElementById("btn2");
        button2.onclick = function(){
            alert("方式二：无名函数");
        }
    </script>
</body>

1.7 JavaScript的引入方式

内部引入方式
直接将javascript代码写到HTML里面。
外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件。

2. JS Window

2.1 Window对象的方法

setInterval():它有一个返回值，主要是提供给clearInterval使用。
setTimeout():它有一个返回值，主要是提供给clearTimeout使用。
clearInterval():该方法只能清除由setInterval设置的定时操作
clearTimeout():该方法只能清除由setTimeout设置的定时操作

2.1.1 使用JS完成页面定时弹出广告的代码

<script type="text/javascript">
    var time;
    function init(){
        //设置显示图片的定时操作
        time = setInterval("showAd()",3000);
    }

    //显示图片的函数
    function showAd(){
        //获取广告图片的
        var imgEl = document.getElementById("img1");
        //设置图片的属性(display)让其显示
        imgEl.style.display="block";

        //清除显示图片的定时操作
        clearInterval(time);

        //设置隐藏广告图片的定时操作
        time = setInterval("hiddenAd()",3000);
    }

    //书写隐藏广告图片的函数
    function hiddenAd(){
        //获取广告图片并设置隐藏的属性
12345678910111213141516171819202122232425

2.2 Location对象

Location 对象包含有关当前 URL 的信息。

href:该属性可以完成通过JS代码控制页面的跳转。

<html>
    <head>
        <meta charset="UTF-8">
        <title>location对象</title>
        <script>
            function tiao(){
                window.location.href="http://www.itcast.cn";
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="tiao()">跳转到传智播客首页</a>
    </body>
</html>

3. Element对象

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

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

3.1 demo

//我们希望点击一个按钮实现动态添加城市。
<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>       

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

飞鸟逐岸

关注

0
点赞
踩
2

收藏

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

1. 什么是JavaScriptJavaScript是被设计用来向HTML页面添加交互行为JavaScript是一种脚本语言JavaScript由数行可执行计算机代码组成JvaScript通常被直接嵌入HTML页面JavaScript是一种解释性语言所有的人无需购买许可证均可使用JavaScript1.1 JavaScript的变量统一使用var定义变量的命名规...
复制链接

扫一扫