js笔记（基础知识）

收藏小知识

变黑


filter:brightness(0%)   /* 全黑 */
filter:brightness(0.4)  /* 40% 亮度 */
filter:brightness(1)    /* 无效果 */
filter:brightness(200%) /* 两倍亮度 */

详细链接参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/brightness

条件语句

显示隐藏

 <body>
  <input type="button" name="" value="切换" id="btn">
  <div class="box" id="box" ></div>
 </body>
 window.onload = function(){
    var oBtn = document.getElemenById('btn');
    var oDiv = document.getElemenById('box');
}
oBtn.onclick = function(){
     if(oDiv.style.display == 'none' ){
        oDiv.style.display == 'block' 
     }else{
        oDiv.style.display == 'none'
     }
}
 .box{
         width:30px;
         height:30px;
         background:yellow;
    }

switch

switch(Number(label)){
    case 100:
        return '色情';
    case 200:
        return '广告';
    case 400:
        return '违禁';
    case 500:
        return '涉政';
    case 600:
        return '谩骂';
    case 700:
        return '灌水';                    
    case 110:
        return '性感';                
    case 300:
        return '暴恐';
    case 210:
        return '二维码';                
    default:
        return label;
}

下面的事件中会提到

onmouseout 属性在鼠标指针移动到元素外时触发。

onmouseup 事件会在鼠标按键被松开时发生。
onmousedown 事件会在鼠标按键被按下时发生。
提示:与 onmouseup 事件相关联的事件触发次序 (左边/中间鼠标按钮):

onmousedown
onmouseup
onclick

与 onmouseup 事件相关联的事件触发次序 (右边鼠标按钮):

onmousedown
onmouseup
oncontextmenu

onload
当页面完成加载时，显示一个提示框。

<body onload="mymessage()"></body>
function mymessage(){
    alert("消息在 onload 事件触发后弹出。");
}

onfocus
当输入字段获得焦点时，改变其背景色。

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
function myFunction(x){
    x.style.background="yellow";
}

鼠标事件
当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。

 <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">将鼠标移至文部上</h1>

修改所有 <p> 元素的背景颜色:

<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Runoob!</p>
<p>点击按钮修改 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction() {
        var myCollection = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < myCollection.length; i++) {
            myCollection[i].style.color = "red";
        }
    }
</script>

函数

调用带参数的函数

1.在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
实例

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

上面的函数在按钮被点击时会提示 "Welcome Harry Potter, the Wizard"。
函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：
实例

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
（俩个按钮用一个函数传参）

根据您点击的不同的按钮，上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

事件

1.HTML 事件可以是浏览器行为，也可以是用户行为。
（1）按钮元素中添加了 onclick 属性 (并加上代码):

实例
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

输出显示的是当前的时间（点击按钮展示）

（2）上实例中，JavaScript 代码将修改 id="demo" 元素的内容。
在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

实例
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
（点击按钮在按钮里展示）

（3）JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：

实例
<button onclick="displayDate()">现在的时间是?</button>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串

字符串长度

可以使用内置属性 length 来计算字符串的长度：

  var txt = "Hello World!";
  document.write("<p>" + txt.length + "</p>");
  12
  var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  document.write("<p>" + txt.length + "</p>");
  26

特殊字符串

在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析：

"We are the so-called "Vikings" from the north."

字符串 "We are the so-called " 被截断。
如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:

"We are the so-called \\"Vikings\\" from the north."

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建：var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象：var firstName = new String("John")

var x = "John";              // x是一个字符串
var y = new String("John");  // y是一个对象
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
typeof x // 返回 String
typeof y // 返回 Object

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

var x = "John";              // x 是字符串
var y = new String("John");  // y 是一个对象
document.getElementById("demo").innerHTML = x===y;
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

转换类型

你可以使用typeof操作符来查看 JavaScript 变量的数据类型。

实例

typeof"John"// 返回 string  
typeof 3.14// 返回 number  
typeof NaN                   // 返回 number  
typeof false// 返回 boolean  
typeof [1,2,3,4]              // 返回 object  
typeof {name:'John', age:34} // 返回 object  
typeof newDate()            // 返回 object  
typeof function() {}        // 返回 function  
typeof myCar                 // 返回 undefined (如果 myCar 没有声明)  
typeof null// 返回 object

请注意：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过typeof来判断他们的类型，因为都是返回 object。

constructor 属性

constructor属性返回所有 JavaScript 变量的构造函数。

实例

"John".constructor                // 返回函数 String()  { \[native code\] }  
(3.14).constructor                // 返回函数 Number()  { \[native code\] }  
false.constructor                 // 返回函数 Boolean() { \[native code\] }  
\[1,2,3,4\].constructor             // 返回函数 Array()   { \[native code\] }  
{name:'John', age:34}.constructor // 返回函数 Object()  { \[native code\] }  
newDate().constructor            // 返回函数 Date()    { \[native code\] }  
function() {}.constructor        // 返回函数 Function(){ \[native code\] }

将数字转换为字符串

全局方法String()可以将数字转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式：

实例

String(x)         // 将变量 x 转换为字符串并返回  
String(123)      // 将数字 123 转换为字符串并返回  
String(100+23) // 将数字表达式转换为字符串并返回

Number 方法toString()也是有同样的效果。

实例

x.toString()  
(123).toString()  
(100+23).toString()

将布尔值转换为字符串

全局方法String()可以将布尔值转换为字符串。

String(false)       // 返回 "false"  
String(true)        // 返回 "true"

Boolean 方法toString()也有相同的效果。

false.toString()    // 返回 "false"  
true.toString()     // 返回 "true"

将日期转换为字符串

Date() 返回字符串。

Date()     // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

全局方法 String() 可以将日期对象转换为字符串。

String(new Date())     // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法toString()也有相同的效果。

实例

obj = new Date()  
obj.toString()  // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

将字符串转换为数字

全局方法Number()可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")   // 返回 3.14  
Number(" ")      // 返回 0  
Number("")       // 返回 0  
Number("99 88")  // 返回 NaN

一元运算符 +

实例

vary ="5";     // y 是一个字符串  
varx = + y;     // x 是一个数字

如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):

实例

vary ="John";  // y 是一个字符串  
varx = + y;      // x 是一个数字 (NaN)

将布尔值转换为数字

全局方法Number()可将布尔值转换为数字。

Number(false)    // 返回 0  
Number(true)     // 返回 1

将日期转换为数字

全局方法Number()可将日期转换为数字。

d =newDate();  
Number(d)         // 返回 1404568027739

日期方法getTime()也有相同的效果。

d =newDate();  
d.getTime()       // 返回 1404568027739

自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

以下输出结果不是你所期望的：

5+null   // 返回 5         null 转换为 0  
"5"+null // 返回"5null"   null 转换为 "null"  
"5"+1   // 返回 "51"      1 转换为 "1"   
"5"\-1    // 返回 4         "5" 转换为 5

自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;  

myVar = {name:"Fjohn"}  // toString 转换为 "\[object Object\]"  
myVar = \[1,2,3,4\]       // toString 转换为 "1,2,3,4"  
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换：

myVar = 123             // toString 转换为 "123"  
myVar = true            // toString 转换为 "true"  
myVar = false           // toString 转换为 "false"

使用对象构造器

本例使用函数来构造对象：

<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

输出为：John is 50 years old.
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）

创建 JavaScript 对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("John","Doe",50,"blue");  
var myMother=new person("Sally","Rally",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 person 对象已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

person.firstname="John";  
person.lastname="Doe";  
person.age=30;  
person.eyecolor="blue";  
x=person.firstname;

在以上代码执行后，x 的值将是：John

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)  { 
    this.firstname=firstname;
    this.lastname=lastname; 
    this.age=age; 
    this.eyecolor=eyecolor; 
    
    this.changeName=changeName; 
    function changeName(name) 
     { 
     this.lastname=name; 
     }  
 }
 myMother=new person("Sally","Rally",48,"green");
 myMother.changeName("Doe");
 document.write(myMother.lastname);

changeName() 函数 name 的值赋给 person 的 lastname 属性。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for  (variable in  object)  { 执行的代码……  }

注意：for...in 循环中的代码块将针对每个属性执行一次。

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
function myFunction(){
    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56}; 
    for (x in person){
        txt=txt + person[x];
    }
    document.getElementById("demo").innerHTML=txt;
}
输出结果BillGates56

prototype 继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

Date对象从Date.prototype继承。
Array对象从Array.prototype继承。
Person对象从Person.prototype继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date对象,Array对象, 以及Person对象从Object.prototype继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外，有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性：

实例

function  Person(first, last, age, eyecolor)  {     
this.firstName = first; 
this.lastName = last; 
this.age = age; 
this.eyeColor = eyecolor; 
}  
Person.prototype.nationality = "English";
var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"我父亲的国籍是 " + myFather.nationality; 

输出为我父亲的国籍是 English

当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法：

function Person(first, last, age, eye) {
     this.firstName \= first;
     this.lastName \= last;
     this.age \= age;
     this.eyeColor \= eye;
}
Person.prototype.name \= function() 
    return this.firstName + " " + this.lastName
}; 
var myFather \= new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML \=
"我对父亲是 " + myFather.name();

输出为我对父亲是 John Doe