JavaScript知识汇总集合

最新推荐文章于 2022-04-27 23:12:40 发布
最新推荐文章于 2022-04-27 23:12:40 发布
阅读量360 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： javascript 函数 全局变量
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w493549442/article/details/50469688
版权

1.输出

document.write(“hello word”);//如果在文档加载完成后，此时输出，会覆盖整个文档
从外部引入js文件时，在js文件内不用书写

2.局部变量，全局变量

var m=5,n=10;//全局变量 function demo(){ var i=15;//局部变量 x=8;//当demo函数被调用时，x为全局变量，否则x不能被使用 }

3.事件

onClick 单击事件click
onMouseOver 鼠标经过事件mouseover
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件

4.使用DOM操作HTML

（1）寻找元素
    通过id找到HTML元素:document.getElementById("pId")
    通过标签名找到HTML元素:document.getElementByTagName("p")//当出现多个多个相同的p标签，它会得到相同元素的第一个
（2）改变HTML内容
    使用属性：innerHTML   document.getElementById("pId").innerHTML="Hello"
（3）改变HTML属性
    使用属性：attribute
    <a id="aId" href="http://www.baidu.com">helloword</a>
    document.getElementById("aId").href="http://www.jikexueyuan.com";//改变href属性的内容

5.使用DOM对象操作CSS

(1)语法：document.getElementById(id).style.property=new style
<div id="divId" class="divClass">helloword</div>
.divClass{
    width:20px;
    hight:20px;
    background:red; 
}
document.getElementById("divId").background="blue";//改变divId中的背景样式

6.DOM EventListener:添加事件句柄

方法：addEventListener();//用于向指定元素添加事件句柄
    removeEventListener();//移出事件的句柄
<button id="btn">按钮</button>
document.getElementById("btn").addEventListener("click",function(){alert("hello");});
//句柄事件可以添加多个，不会冲突
var x=document.getElementById("btn");
x.addEventListener("click",hello);
x.addEventListener("click",word);
x.removeEventListener("click",hello);
function hello(){
    alert("hello");
}
function word(){
    alert("word");
}

7.JaveScript事件详解

（1）事件流：描述的是在页面中接受事件的顺序
1.事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
2.事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
<div id="div">
    <button id="btn">按钮</button>
</div>//事件冒泡顺序：先button 后div;事件捕获顺序：先div 后button
（2）事件处理：
1.HTML事件处理：直接添加到HTML结构中，如<button onclick="demo()">按钮</button>
2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
        如：<button id="btn">按钮</button>
            <script>
                var btn=document.getElementById("btn");
                btn.onClick=function(){alert("DOM0级事件处理：");}//添加DOM0级事件处理
                btn.onClick=function(){alert("测试事件覆盖");}//DOM0级事件处理，存在事件冲突，多个只会执行最后一个
                btn.onClick=null;//清除事件
3.DOM2级事件处理：
    addEventListener("事件名","事件处理函数","布尔值");其中布尔值true:事件捕获，false:事件冒泡
    removeEventListener;

4.IE事件处理程序(IE版本小于8)
    attachEvent
    detachEvent
5.浏览器事件支持，根据浏览器支持事件的类型，选择设置事件
    <script>
        var btn=document.getElementById("btn");
        if(btn.addEventListener){
        btn.addEventListener("click",demo);
        }else if(btn.attachEvent){
        btn.attachEvent("onclick",demo);
        }else{
        btn.onclick=demo();
        }
(3)事件对象event：在触发DOM事件的时候都会产生一个对象
    1.type:获取事件类型
    2.target：获取事件目标
    3.stopPropagation():阻止事件冒泡
    4.preventDefault():阻止事件默认行为
        <div id="div">
            <button id="btn">按钮</button>
            <a id="aid" href="www.baidu.com">百度</a>
        </div>
        <script>
            document.getElementById("btn").addEventListener("click",showType);      
            document.getElementById("div").addEventListener("click",showDiv);
            document.getElementById("aid").addEventListener("click",showA);
        function showType(event){
            alert(event.type);//获得事件类型
            alert(event.taarget);//获得响应事件的目标
            event.stopPropagation();//阻止事件冒泡
        }
        function showDiv(){
            alert("div");           
        }
        function showA(event){
            event.stopPropagation();//阻止事件冒泡
            event.preventDefault();//阻止a标签中href默认跳转事件
        }
        </script>

8.JS内置对象:String字符串对象、Date日前对象、Array数组对象、Math对象、浏览器对象

    //创建对象：方法一
    people =new Object();
    people.name="wusw";
    people.age="23";
    document.write("name:"+people.name+" age:"+people.age);
    //创建对象：方法二
    people={name:"wusw",age:"23"};
    document.write("name:"+people.name+" age:"+people.age);
    //创建对象：方法三,使用函数创建
    function people(name,age){
    this.name_=name;
    this.age_=age;
    }
    son=new people("wusw",23);
    document.write("name:"+son.name+" age:"+son.age);
（1）String字符串对象：可以使用双引号或单引号
    match("ad")  内容匹配（有该内容时，返回该内容，没有返回null）
(2) Date对象
    getFullYear()   获得年份
    getTime()   获取毫秒
    setFullYear()   设置具体的日期
    getDay()    获取星期
    getHours()  获得小时
    getMinutes()    获得分
    getSenconds()   获得秒
    var date=new date();
    document.write(date);
    document.write(date.getFullYear());
    document.write(date.getTime());
    date.setFullYear(2015,7,1);
    document.write(date);

    <body onload="startTime()">//onload方法表示页面加载时执行开始计算方法
    <script>
        function startTime(){
        var today=new date();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSenconds();
        m=checkTime(m);
        s=checkTime(m);
        document.getElementById("textId").innerHtml=h+":"+m+":"+s;
        t=setTimeOut(function(){
                startTime();
        },1000);//自动更新
    }
    function checkTime(i){
        if(i<10){
        i="0"+i;
        }
        return i;

    }
    </script>
    <div id="textId"></div>
    </body>
(3)Array数组对象
    concat()    合并数组
    sort()      排序
    push()      末尾追加元素
    reverse()   数组元素翻转
    <script>
        var a={"5","4","3","2","1"};
        doucment.write(a.sort());//升序排列
        document.write(a.sort(function(a,b){
        //return a-b;//升序
        return b-a;//降序
        }));

        </script>
(4)Math对象
    round()     四舍五入
    random()    返回0~1之间的随机数
    max()       返回最高值
    min()       返回最低值
    abs()       返回绝对值

9.JavaScript DOM对象控制HTML

    getElementsByName() 获取name
    getElementsByTagName()  获取元素
    getAttribute()      获取元素属性
    setAttribute()      设置元素属性
    childNodes()        访问子节点
    parentNode()        访问父节点
    createElement()     创建元素节点
    createTextNode()    创建文本节点
    insertBefore()      插入节点
    removeChild()       删除节点
    offsetHeight()      网页尺寸(不包含滚动条)
    scrollHeight()      网页尺寸（包含滚动条）

hello

hello

hello

hello

hello

得到父节点

  • 1
  • 2
  • 3
function getName(){ var count=document.getElementsByName("pn");//当有多个相同的name时，它返回是这多个的集合 alert(count.length); var p=count[2]; p.innerHTML="World"; } getName(); function getTagName(){ var count=document.getElementsByName("p");//通过具体元素名获取，当有多个时，它返回是这多个的集合 alert(count.length); var p=count[2]; p.innerHTML="World"; } getTagName(); function getAttr(){ var anode=document.getElementById("aid");//通过 a标签 var attr=anode.getAttribute("title");//通过a元素的title属性，得到title属性的值,也可以通过id属性获得id属性的值 document.write(attr); } getAttr(); function setAttr(){ var anode=document.getElementById("aid");//通过 a标签 var attr=anode.setAttribute("title","动态设置title属性的值");//第一个参数：属性，第二个参数：属性的值 var getAttr=anode.getAttribute("title");/ document.write(getAttr); } setAttr(); function getChildNode(){ var childnode=document.getElementsByName("ul")[0].childNodes;//多个返回的是数组 alert(childnode.length);//标签与标签直接的空白处算一个 alert(childnode[0].nodeType); } getChildNode(); function getParentNode(){ var div=document.getElementById("pid"); alert(div.getParentNode.nodeName); } getParentNode(); function createNode(){ var body=document.body; var input=document.createElement("input"); intput.type="button"; input.value="按钮"; body.appendChild(input);//将元素节点添加到body中 } createNode(); function addNode(){ var div=document.getElementById("divId"); var pnode=document.getElementById("pid"); var newnode=document.createElement("p"); newnode.innerHTML="动态添加一个P元素，将其放在特定标签之前"; div.insertBefore(newnode,pnode); } addNode(); function removeNode(){ var div=document.getElementById("divId"); var p=div.removeChild(div.getChildNodes[1]); } removeNode(); function getSize(){ var width=document.body.offsetWidth||document.documentElement.offsetWidth; var height=document.body.offsetHeight||document.documentElement.offsetHeight; alert("宽度:"+width+",高度:"+height); } getSize();

10、window对象，计时器，History对象，location对象，screen对象

（1）window对象时BOM的核心，window对象指当前的浏览器窗口所有JavaScript全局对象、函数以及
    变量均自动成为window对象的成员，其中全局变量时window对象的属性，全局函数式window对象的方法。
    甚至HTML DOM的document也是window对象的属性之一
    window尺寸：
        window.innerHeight 浏览器窗口的内部高度
        window.innerWidth  浏览器窗口的内部宽度
    window方法：           window.open()   打开新窗口 window.open("newIndex.html","网页标题名称","height=200,width=200,left=100,top=100",true)
        window.close()  关闭窗口
（2）计时器：
    setInterval()   间隔指定的毫秒数不停地执行指定的代码
    clearInterval() 用于停止setInterval()方法执行的代码
    setTimeout()    暂停指定的毫秒数后执行指定的代码
    clearTimeout()  停止setTimeout方法 
<p id="ptime"></p>
<input type="button" value="暂停" onclick="stopTime()"></input>
<input type="button" value="取消" onclick="clearTimeout()"></input>
<script>
var mytime=setInterval(function(){
    getTime();
},1000);
function getTime(){
var time=new Date();
var t=time.toLocalTimeString();
document.getElemantById("ptime").innerHTML=t;   
}
function stopTime(){
    clearInterval(mytime);//停止之前创建的定时器
}
var timeOut;
function myTimeOut(){
    timeOut;=setTimeOunt(function(){
    alert("timeout");
    },1000);    
}
function clearTimeout(){
    clearTimeout(timeOut);
    }
</script>
（3）History对象：window.history对象包含浏览器的历史（url）的集合
    history.back() 与在浏览器点击后退按钮相同
    history.forward() 与在浏览器点击向前按钮相同
    history.go()      进入历史中的某个界面
（4）location对象：用于获得当前的地址（url），并把浏览器重定向到新的页面
    location对象的属性：
        location.hostname   返回web主机的域名
        location.pathname   返回当前页面的路径和文件名
        location.port       返回web主机的端口
        location.protocol   返回所使用的web协议（如http://或https://）
        location.href       属性返回当前页面的URL
        location.assign()   加载新的文档如：window.location.assign("http://www.baidu.com");
(5)screen对象：window.screen对象包含有关用户屏幕的信息
        screen.availWidth   可用的屏幕宽度
        screen.availHeight  可用的屏幕高度
        screen.Height       屏幕高度
        screen.Width        屏幕宽度

11.javascript面向对象

（1）认识对象：
    var person={
        name:"wusw",
        age:30,
        eat:function(){
            alert("能吃");
        }
    }   
    alert(person.name)
（2）使用函数构造器生产对象
    function Person(){//通过function来虚拟创建一个Person的类

    }   
    Person.prototype={//通过prototype可以设置Person对象中的属性和方法
     name:"iwen",
    age:30,
    eat:function(){
        alert("能吃")
        }
    }
    var p=new Person();//声明一个Person对象
    alert(p.name);//调用对象的方法
（3）深入了解javascript面向对象
    声明：
        function People(){

        }
        People.prototype.say=function(){//通过prototype创建一个say方法
        alert("hello");
        }
    声明2：
        function Person(){
            var _this={}//创建一个空的对象
            _this.say=new function(){
            alert("hello");
            }
            return _this;
        }
    继承：

        function Student(){

        }
        Student.prototype=new People();
        var s=new Student();
        s.say();
    继承2：
        function Teacher(){
            var _this=Person();
            return _this;   
        }
        var t=Teacher();
            v.say();
    重写：
        Student.prototype.say=function(){
            alert("stu-hello");
        }       
        var s=new Student();
        s.say();
    重写2：
        function Teacher(){
            var _this=Person();
            _this.say=new function(){
                alert("T-hello");
            }
            return _this;   
        }
        var t=Teacher();
            v.say();
    调用父类的方法：
        var superSsay=Student.prototype.say;
        function superSay(){
        superSsay.call(this);
        }
        superSay();
    第二种方式创建的对象，调用父类的方法：
        function Teacher(){
            var _this=Person();
            var superSay=_this.say;

            _this.say=new function(){
                superSay.call(_this);
                alert("T-hello");
            }
            return _this;   
        }
        var t=Teacher();
            v.say();
    传递参数：
        function Perple(name){
            this._name=name;
        }
        People.prototype.say=function(){
            alert("peo-hello:"+this._name);
        }
        function Student(name){
        this._name=name;
            }
        Student.prototype=new Perple();
        var superSay=Student.prototype.say;
        Student.prototype.say=function(){
        syperSay.call(this);
        alert("stu-hell0:"+this._name);
        }
        var s=new Student("wusw");
            s.say();
    第二中方法创建的对象，传递参数:
        function Person(name){
            var _this={}//创建一个空的对象
            _this._name=name;
            _this.say=new function(){
            alert("hello:"+_this._name);
            }
            return _this;
        }
        function Teacher(name){
            var _this=Person();
            _this.say=new function(name){
                alert("T-hello:"+_this.name);
            }
            return _this;   
        }
        var t=Teacher("wusw");
            v.say();
    信息封装:
        (function(){
            var n="wusw";//此时的n只能被该函数内调用
            function Perple(name){
            this._name=name;
            }
            People.prototype.say=function(){
            alert("peo-hello:"+this._name);
            }
            window.People=People;//向外部提示可以调用该对象的方式
        }());
    第二种声明对象的封装：
        (function(){
            var n="wusw";
            function Person(name){
            var _this={}//创建一个空的对象
            _this._name=name;
            _this.say=new function(){
            alert("hello:"+_this._name);
            }
            return _this;
            }
            window.Person=Person;
        }());
萧薰晨败1
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现集合
hahahahahahahaha__1的博客
02-01 1282
// 集合（不允许重复）es6提出了Set数据结构，也就是我们的集合 //这里我们通过对象来模拟集合，适用对象而不使用数组的原因是因为对象不允许有重复的属性 //是将集合中的值作为对象的键来定义 function Set(){ this.items = {}; //判断集合中有没有某一个值 this.has = functi...
javascript 集合
wonderfullyh的专栏
05-17 599
集合 all 返回对象所包含的元素集合的引用。 anchors 获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。
JavaScript数据结构——集合
Jyao_In的博客
04-27 3638
集合是由一组无序且唯一（即不能重复）的项组成的。可以将集合想象成一个既没有重复元素，也没有顺序概念的数组。 基于ES2015的Set类来实现我自己的Set类。需要声明以下集合可用的方法： add(element): 向集合添加一个新元素。 delete(element): 从集合移除一个元素。 has(element): 如果元素在集合中，返回true，否则返回false。 clear(): 移除集合中的所有元素。 size(): 返回集合所包含元素的数量。它与数组的length属性相同。 v
集合的JavaScript 实现
Jackshijin的博客
03-10 573
集合是由一组无序且唯一的项组成，集合具有不重复性，就是集合内的元素都是唯一的。是否可以这样理解，集合是一个既没有重复元素也没有顺序概念的数组。不包含任何元素的集合叫做空集。 用JavaScript 创建一个基本的集合，包含以下方法： add(value)：向集合中添加其没有的项 remove（value）：从集合中移除一个项 has(value): 如果value 在集合中，返回true；...
测试人员应该知道的Redis知识(六) Set
Frank_girl的博客
09-08 722
一、概述 Redis 的 Set 是 String 类型的无序集合。集合成员是唯一的，这就意味着集合中不能出现重复的数据。 Redis 中集合是通过哈希表实现的，所以添加，删除，查找的复杂度都是 O(1) 集合中最大的成员数为 2^32 - 1 (4294967295, 每个集合可存储40多亿个成员)。 Set类型是我们工作中经常会用的一种数据类型，我们经常用来进行去重等操作，今天我们一起来看一下针对Set类型，我们工作中常用的一些命令。 二、sadd/smemb...
JavaScript基础知识点汇总（代码+知识点）
09-22
以下是详细的JavaScript知识点解析： 1. **变量**：在JavaScript中，我们可以使用`var`, `let`, 或 `const` 关键字声明变量。`var` 是全局或函数作用域，而 `let` 和 `const` 提供了块级作用域。`const` 用于声明不...
AngularJS框架知识点汇总
01-27
常见的内置指令如`ng-controller`定义了控制器的作用域，`ng-repeat`用于循环渲染数据集合，`ng-model`用于双向数据绑定。自定义指令可以进一步增强HTML的表达力，创建复杂的UI组件。 4. 在例子中，`<html ng-app>`...
前端知识点集合（完整版）
02-27
1.Javascript知识点汇总 2.ajax 3.git 4.node 5.express 6.webpack 7.vue 8.路由 9.vuex 10.vue3 11.react
Html知识点汇总.docx
08-29
Html知识点汇总 Html是超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。本文将对Html知识点进行总结和汇总，覆盖了Html的基本概念、标签、属性、语义化标签、实体字符、块元素、...
JSON相关知识汇总
12-10
JSON对象是一个容纳“名/值”对的无序集合 　名字：任意字符串 　值：任意类型的JSON值，包括数组和对象（对象中可以嵌入对象） 注：JSON字符串必须使用双引号（单引号会报错） 一、对象 javascript中创建字面量：...
JavaScript集合类：Array、Map、Set
热门推荐
cathar的专栏
11-27 2万+
在JavaScript中不像java有那么多的数据结构。在实际工作中，使用对象还是数组需要仔细考虑下。例如：如果实现 Map的功能，既可以使用关联数组，也可以使用对象，那么区别是什么呢？ 需要注意的是，在JavaScript中，所有变量实际上都是某种类型的对象。记住这点，就不难理解一个数组其实就是一个Array() 类型的对象，那么就可以给它添加各种属性。而所谓的关联数组，其实就是给该数组对象增加
JavaScript 中的集合
qq_43477721的博客
10-05 439
对于任何 JavaScript 程序来说，对数据的结构化组合和访问都是一个关键部分。这个语言 从一开始到现在，创建数据结构的主要机制一直都是数组和对象。当然，基于它们已经建 立了很多作为用户库的高级数据结构。 1.TypedArray TypedArray 对象描述底层的二进制数据缓冲的阵列状的图。没有命名的TypedArray全局属性，也没有直接可见的TypedArray构造函数。相反，有许多不同的全局属性，其值是特定元素类型的类型化数组构造函数。 new TypedArray(); // new in
浅析JavaScript中的集合
weixin_42071117的博客
05-08 700
什么是集合 大家在上高中的时候应该都学过数学中的集合运算，比如交集、并集、差集等等。那么JavaScript中的集合是什么呢？你猜的没错，就是对应数学中的集合这个概念。定义：集合是由一组无序且唯一（即不能重复）的项组成的。 创建集合类 首先，给出基本的类定义： class Set { constructor () { this.items = {} // 定义一个空对象，用于存放集合元素 ...
JS中几种常见的集合
xiangpan1207的博客
04-16 2万+
Array数组 1.1 Array的特点及创建方式 Array 中存储的元素是有序可以重复的，长度是可以动态改变，存储的元素可以是任意的数据类型。 1.1.1 构造函数的方式创建数组的方式 var arr = new Array("1","2","3");1.1.2 字面量的方式创建构造函数 var arr = ["a","b","c"];1.2 增arr.push("a");
javascript定义一个list
weixin_30617695的博客
08-01 5913
JavaScript可以定义数组类型，在javascript语言中List叫Array，它有以下2种定义方式方式1：var array=new Array();方式2：var array=[];通常在我们使用中常使用方式2，另外在javascript语言中，因为没有严格的数据类型，可以把多种数据放到数组里，比如：var array=[1,'str',true,{}]; JavaScri...
JavaScript数据结构-集合
李刚的学习专栏
11-06 3684
集合（set）是一种包含不同元素的数据结构。集合中的元素称为成员。集合具有两个重要特性： （1）集合中的成员是无序的 （2）集合中不允许相同成员存在 当想创建一个数据结构，用来保存一些独一无二的元素时，比如一段文本中用到的单词，集合就变得非常有用。 一、集合的定义、操作和属性集合是由一组无序但彼此之间有一定相关性的成员构成的，每个成员在集合中只能出现一次。在数学上，用大括号将一组成员括
JavaScript专业指南：精华问答集结
"这是一本基于JavaScript的专业笔记，由stack overflow上的问题和解答汇编而成，旨在提供400多页的专业提示和技巧。" 在深入JavaScript编程时，了解并掌握基本概念至关重要。本书首先介绍了如何开始使用JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值