js总结（一）

最新推荐文章于 2022-10-06 01:06:03 发布

___KAKU

最新推荐文章于 2022-10-06 01:06:03 发布

阅读量257

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lina2017lina/article/details/78863031

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

2017.12.21

一、JS中HTML DOM

1、文本追加（点击按钮，出现文本框）

$(function(){
$("#bt1").click(function(){
$(this).before('添加<input type="text" value="点击添加文本框" />'+'</br>');
});
});

--------------------------------------------------------

<button id="bt1">点击显示</button></br>
--------------------------------------------------------

2、显示日期

第一种jquery

$(function(){
       $("#bt2").click(function(){
           $("#p3").innerHTML=Date();
       });
   });

第二种js

window.οnlοad=function(){
       document.getElementById("bt2").οnclick=function(){
           document.getElementById("p3").innerHTML=Date();
       }
   }

----------------------------------------------------

<p id="p3"></p>

<button id="bt2">点击显示日期</button></br>

-----------------------------------------------------

====================================================================

3、navigator对象

是一个对象，提供给用户浏览器及版本的信息

====================================================================

4、onchange事件

针对文本框触发的事件,离开文本框触发事件

function change1(){
           var x=document.getElementById("iput1");
           x.value=x.value.toUpperCase();
       }

----------------------------------------------------

输入字母1：<input type="text" id="iput1" οnchange="change1()"/>

注意：

如果写成：

function change2(){
           var x=document.getElementById("iput2").value;
           x=x.toUpperCase();
       }

效果出不来

可以理解为

change1()获取的是对象，change()2获取的是普通值

=====================================================================

5、添加事件监听addEventListener()和移出事件监听removeEventListener()
语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

----------------------------------------------------------------------------

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

例子1：

element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}

例子2（传参）：

----------------------------------------------------------------------------

你可以使用 removeEventListener() 方法来移除事件的监听。

-----------------------------------------------------------------------------

事件冒泡、事件捕获

什么是冒泡和捕获？

事件的触发顺序

冒泡：先触发内部<p>，再触发外部<div> |useCapture-------------->默认true(不写)

捕获：先触发外部<div>,再触发内部<p> |useCapture--------------->false

监听事件中useCapture即为设置冒泡或者捕获

element.addEventListener(event, function, useCapture);

======================================================================

6、创建新的HTML元素/删除HTML元素

createElement、createTextNode、appendChild

思路：创建新的元素--->已存在的元素中添加该元素

（有一个父、子的概念）

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
---------------------------------------------------------------------------
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

varelement=document.getElementById("div1");
element.appendChild(para);
</script>

==========================================================================

二、JS的对象

对象分两类：内部的（如：Array,Date...任何事物都是对象）

自定义的

***函数也是对象***

对象拥有方法和属性

访问：

属性：对象.属性

方法：对象.方法()

创建JS对象

（1）直接创建

     a. person=new Object();
       person.firstname="John";
   b. person={firstname:"John",lastname:"Doe"};

（2）使用构造器创建

a. function person(firstname,lastname,age,eyecolor){

this.firstname=firstname;

this.lastname=lastname;

}

varmyFather=new person("John","Doe");

JS的for...in遍历的是所有的属性

例：

JS number

是js唯一的一种数字类型，可表示小数和整数

==========================================================================

三、JS的浏览器BOM

BOM:浏览器对象模型

作用：可以跟浏览器进行互动

window对象

所有浏览器都支持，网页中的全局属性、全局方法则是window的属性和方法

其中document也是window对象中的

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

其他对象：

window.screen 对象

包含有关用户屏幕的信息。

window.screen对象在编写时可以不使用 window 这个前缀

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

注：不能放到window.onload中

----------------------------------------------------------------------------------

window.location 对象

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

编写时可不使用 window 这个前缀

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href返回当前页面的url
location.pathname返回url路径名
location.assign加载新的文档

-----------------------------------------------------------------------------------

window.history 对象

包含浏览器的历史

编写时可不使用 window 这个前缀。

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

-----------------------------------------------------------------------------------

window.navigator 对象

包含有关访问者浏览器的信息

window.navigator 对象在编写时可不使用 window 这个前缀

txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

----------------------------------------------------------------------------------

window中的弹窗

三种：方法可以不带上window对象

alert()警告框:

window.alert("sometext");

confirm()确认框:

window.confirm("sometext");

例子：

var r=confirm("按下按钮");
if (r==true)
{
x="你按下了\"确定\"按钮!";
}
else
{
x="你按下了\"取消\"按钮!";
}

propmpt()提示框：

window.prompt("sometext","defaultvalue");

例子：

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}

换行：

例子：

alert("Hello\nHow are you?");

-------------------------------------------------------------------------

window中的计时事件

setInterval() - 固定时间重复发生事件。

例子：

setInterval(function(){alert("Hello")},3000);

setTimeout() - 指定时间发生事件（延时效果）

例子：

setTimeout(function(){alert("Hello")},3000);

clearInterval() - 清除setInterval()

例子：

clearTimeout() - 清除setTimeout()

例子：

            var myVar;

            function myFunction()
             {
                myVar=setTimeout(function(){alert("Hello")},3000);
             }

               function myStopFunction()
             {
                   clearTimeout(myVar);
         }

-----------------------------------------------------------------------------------

window中的cookie

Cookie 用于存储 web 页面的用户信息。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script>

   /*设置创建cookie 函数*/
function setCookie(cname,cvalue,exdays){
   var d = new Date();
   d.setTime(d.getTime()+(exdays*24*60*60*1000));
   var expires = "expires="+d.toGMTString();
   document.cookie = cname+"="+cvalue+"; "+expires;
}
   /*获取cookie函数*/
function getCookie(cname){
   var name = cname + "=";
   var ca = document.cookie.split(';');
   for(var i=0; i<ca.length; i++) {
       var c = ca[i].trim();
       if (c.indexOf(name)==0) return c.substring(name.length,c.length);
   }
   return "";
}
   /*检测cookie函数*/
function checkCookie(){
   var user=getCookie("username");
   if (user!=""){
       alert("Welcome again " + user);
   }
   else {
       user = prompt("Please enter your name:","");
       if (user!="" && user!=null){
           setCookie("username",user,30);
       }
   }
}
</script>
</head>
<body οnlοad="checkCookie()"></body>
</html>

==========================================================================

2017.12.24

四、JS函数

用关键字function 定义函数。函数可以通过声明定义，也可以是一个表达式

注：

分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。

函数声明

例：
function myFunction(a, b) {
return a * b;
}

函数表达式

例：（匿名函数）

var x = function (a, b) {return a * b};
var z = x(4, 3);

Function函数

函数通过关键字 function 定义。函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

例：

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

函数提升（Hoisting）

将当前作用域提升到前面去的的行为

例：

myFunction(5);

function myFunction(y) {
    return y * y;
}(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义函数时无法提升。

自调用函数

自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

(function () {
var x = "Hello!!"; // 我将调用自己
})();

可以作为一个值使用

function myFunction(a, b) {
return a * b;
}

var x = myFunction(4, 3) * 2;

函数是一个对象

函数参数

显示参数、隐式参数

Arguments对象

是一个内置的对象，包含了函数调用的参数数组

例子：

不用定义，直接可以使用

JS函数调用

JavaScript 函数有 4 种调用方式。

每种方式的不同方式在于 this 的初始化。

this关键字调用

this全局函数调用

例子：

作为函数调用,与window.myFunction(10,2);一样

（1）function myFunction(a,b){returna *b;}myFunction(10,2);

全局对象 this此时返回的是window

（2）functionmyFunction(){returnthis;}myFunction();

作为方法调用

（3）

varmyObject={firstName:"John",lastName:"Doe",fullName:function(){returnthis.firstName+"" +this.lastName;}}myObject.fullName();

构造器调用

（4）functionmyFunction(arg1,arg2){this.firstName =arg1;this.lastName =arg2;}// This creates a new objectvarx =newmyFunction("John","Doe");x.firstName;

作为函数调用。但是call()与apply()这两个方法，第一个参数必须是自己对象本身

（5）functionmyFunction(a,b){returna *b;}myObject =myFunction.call(myObject,10,2);

JS闭包

提到闭包，就先要理解一下局部变量和全局变量

局部变量：方法或者函数内部使用的，在外部不起作用

全局变量：方法或者函数在全局中使用，任何地方都能够使用

所以：局部变量和全局变量即使名字相同，也不会产生影响

简单来说：

闭包就是一个函数引用另一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会增加内存消耗。

或者说闭包就是子函数可以使用父函数的局部变量，还有父函数的参数。

闭包例子：

var add =(function(){

var counter =0;

return function(){

return counter +=1;

}

})();

add();add();add();

//结果为3

**闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。**

可以将以上代码理解为：

function outerFunction() {
    var counter = 0;
    function innerFunction(){
        return counter += 1;
    }
    return innerFunction;
    /*
     注意 typeof innerFunction 是：function；而typeof innerFunction（）是number；
    */
}
var add = outerFunction();

/* 
调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次
内部函数inner Function，内部函数公用了counter，所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。
*/

add();
add();
add(); outerFunction() {
    var counter = 0;
    function innerFunction(){
        return counter += 1;
    }
    return innerFunction;
    /*
     注意 typeof innerFunction 是：function；而typeof innerFunction（）是number；
    */
}
var add = outerFunction();

/* 
调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次
内部函数inner Function，内部函数公用了counter，所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。
*/

add();
add();
add();

==========================================================================

五、JS基础

js用法

三种：

1.在head中加上<script></script>标签

2.在body中加<script></script>标签

3.在head中引入外部文件

例如：<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>

输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。（方便调式js用）

注：html文档 html元素的理解

语句

单行写
x = 5 + 6;
y = x * 10;
代码块

function myFunction(){

document.getElementById("demo").innerHTML="你好Dolly"; document.getElementById("myDIV").innerHTML="你最近怎么样?";

}

用分号‘；’隔开
注： js中会自动省略多余的空格
使用反斜杠对代码行进行换行

数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）

变量

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

例：

var x=5; var y=6; var z=x+y;

注：变量都对大小写敏感

变量分为局部变量和全局变量

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行

注释

添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
 单行注释以 // 开头；
 多行注释以 /* 开始，以 */ 结尾。
。
 单行注释以 // 开头；
 多行注释以 /* 开始，以 */ 结尾。

对象

JavaScript 对象是拥有属性和方法的数据。
例：
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
 访问属性：person.lastName;
          person["lastName"];
     访问方法：name = person.fullName();


*JavaScript 对象是属性和方法的容器。var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
 访问属性：person.lastName;
          person["lastName"];
     访问方法：name = person.fullName();


*JavaScript 对象是属性和方法的容器。

函数

function myFunction()
{
    var x=5;
    return x;
}
也可以认为是代码块

也可以认为是代码块

作用域

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁

************************************************

学习阶段，及时更新，不是按顺序写的

___KAKU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录