javascript相关基础

1、javascript:void(0)

javascript:void(0)表示不做任何动作

Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。

<a href="javascript:void(0);" onclick="alert('ok');"></a>  
// 这里表示这个链接不做跳转动作，执行onClick事件。

（1）void 操作符用法格式如下

1. javascript:void (expression)

2. javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。

 

下面的代码创建了一个超级链接，用户单时会提交表单

<a HREF="javascript:void(document.form.submit())">单此处提交表单</a>

（2）a href=#与 a href=javascript:void(0) 的区别链接的几种办法

#包含了一个位置信息

默认的锚点是#top 也就是网页的上端

而javascript:void(0)   仅仅表示一个死链接

这就是为什么有的时候页面很长浏览链接明明是#是

跳动到了页首

而javascript:void(0) 则不是如此

所以调用脚本的时候最好用void(0)或者<input onclick>、<div onclick>等

2、函数

(1) arguments.length

arguments.length 属性返回函数接收到参数的个数

（2）a href=#与 a href=javascript:void(0) 的区别链接的几种办法

#包含了一个位置信息

默认的锚点是#top 也就是网页的上端

而javascript:void(0)   仅仅表示一个死链接

这就是为什么有的时候页面很长浏览链接明明是#是

跳动到了页首

而javascript:void(0) 则不是如此

所以调用脚本的时候最好用void(0)或者<input onclick>、<div onclick>等

2、函数

(1) arguments.length

arguments.length 属性返回函数接收到参数的个数

(2) toString()

toString() 方法将函数作为一个字符串返回

<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

(3) 函数表达式的自调用

函数表达式可以 "自调用"。

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

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

不能自调用声明的函数。

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

<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

4、对象

(1) arguments

这个函数体内的arguments非常特殊，实际上是所在函数的一个内置类数组对象，可以用数组的[i]和.length。

 

js语法不支持重载！但可用arguments对象模拟重载效果。

arguments对象：函数对象内，自动创建的专门接收所有参数值的类数组对象。 arguments[i]: 获得传入的下标为i的参数值 arguments.length: 获得传入的参数个数！

重载：

　　程序中可定义多个相同函数名，不同参数列表的函数， 　　调用者不必区分每个函数的参数， 　　执行时，程序根据传入的参数个数，自动判断选择哪个函数执行。

//1、如果用户传入一个参数，求平方
    function sum(a){
        console.log(a*a);
    }

    //如果用户传入两个参数，就求和
    function sum(a,b){
        console.log(a+b);
    }
    sum(4); //？
    sum(4,5); //？

上述例子中本意是想让同名函数sum()根据参数不同输出不同结果，但是sum是函数名字，本质也是个变量，第二个会覆盖第一个，所以上述的正确输出答案是：NaN,9.所以这样显然不可以。

如果用arguments,就简单多了。

//2、
    function calc(){
        //如果用户传入一个参数，求平方
        if(arguments.length==1){
            console.log(arguments[0]*arguments[0]);
        }else if(arguments.length==2){
        //如果用户传入两个参数，就求和
            console.log(arguments[0]+arguments[1]);
        }
    }
    calc(4); //16
    calc(4,5); //9
    
/*3、无论用户传入几个数字，都可以求和*/
    function add(){
        //arguments:[]
        //遍历arguments中每个元素，并累加
        for(var i=0,sum=0;i<arguments.length;sum+=arguments[i++]);
        return sum;//返回和
    }

    console.log(add(1,2,3)); //6
    console.log(add(1,2,3,4,5,6)); //21

python 中为什么不需要重载

函数重载主要是为了解决两个问题。

（1）可变参数类型。

（2） 可变参数个数。

另外，一个基本的设计原则是，仅仅当两个函数除了参数类型和参数个数不同以外，其功能是完全相同的，此时才使用函数重载，如果两个函数的功能其实不同，那么不应当使用重载，而应当使用一个名字不同的函数。

好吧，那么对于情况 （1），函数功能相同，但是参数类型不同，python 如何处理？答案是根本不需要处理，因为 python 可以接受任何类型的参数，如果函数的功能相同，那么不同的参数类型在 python 中很可能是相同的代码，没有必要做成两个不同函数。

那么对于情况 （2），函数功能相同，但参数个数不同，python 如何处理？答案就是缺省参数。对那些缺少的参数设定为缺省参数即可解决问题。因为你假设函数功能相同，那么那些缺少的参数终归是需要用的。

好了，鉴于情况 （1） 跟 情况 （2） 都有了解决方案，python 自然就不需要函数重载了。

这里顺便说一下python中参数传递时候的*arg和**args，看几个小栗子就一清二楚了：

第一个小栗子：

def test1(farg,*args):
    print ("farg:",farg)
    for value in args:
       print ("args:",value)
 
test1(1,"two",3,"4")

5、闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
    
    
add();
add();
add();

// 计数器为 3

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

6、js查找HTML元素的方式、方法

一、HTMLCollection（document.getElement....）

二、NodeList（querySelectorAll (......)）

三、二者的区别和共同点

HTMLCollection是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

注意：节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

（1）通过id

通过id可以直接操作标签（原因是id唯一）

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

以下两种不行，每个类名、标签都可能不唯一，在操作的时候需要注明是第几个标签

（2）通过classname

<p class="p1">Hello World!</p>
<script>
document.getElementsByClassName("p1")[0].innerHTML="新文本!";
// 注意：在此操作的时候必须指明（只有一个也必须标明），虽然不会报错，但是看不到执行效果
</script>

（3）通过tag标签（与classname类似）

<p id="p1">Hello World!</p>
<script>
document.getElementsByTagName("p")[0].innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

7、标签操作

（1）添加节点

在之前添加

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);

在之后添加（默认）

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

（2）删除节点

必须通过父节点进行删除当前节点，两种方式

① 直接找到父节点

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

② 通过子节点的父级来删除

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

（3）替换

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
//para 替换child

8、数字

无限

myNumber=2;
while (myNumber!=Infinity){
    myNumber=myNumber*myNumber;
    document.write(myNumber +'<BR>');
}


var x = 2/0;
var y = -2/0;
document.write(x + "<br>");
document.write(y + "<br>");

NaN

其中无穷大是数字

<p>一个数字除以一个字符串结果不是一个数字</p>
<p>一个数字除以一个字符串数字结果是一个数字</p>
<p id="demo"></p>
<script>
var x = 1000 / "Apple";
var y = 1000 / "1000";
document.getElementById("demo").innerHTML = isNaN(x) + "<br>" + isNaN(y);
</script>

数字可以是数字，也可以是数字对象

9、字符串

string.length   字符串长度

替换：后面的替换前面的

<p>替换 "Microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>

内容匹配：

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

str.split(",") 按，分割

10、日期对象

//获取当前日期
var d=new Date();
d.getFullYear();//获取年份
d.getTime();//返回的是1970/01/01至今的毫秒数
d.setFullYear(2020,10,3);//设置具体的日期时间
d.getDay()//显示今天周几，返回的是一个数字
d.getDate();//显示今天是一个月中的哪一天，返回的是一个数字

在网页上显示一个钟表

<script>
function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小于10的数字前加一个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
</script>
</head>
<body onload="startTime()">
    
<div id="txt"></div>

创建时间实例

new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)


var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

// 设置一个特定的日期 (2010 年 1 月 14 日)：
var myDate=new Date();
myDate.setFullYear(2010,0,14);

// 设置5天后的日期
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

// 两个日期进行比较
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是2100年1月14日之前");
}
else
{
    alert("今天是2100年1月14日之后");
}

11、数组对象

数组对象是使用单独的变量名来存储一系列的值。

数组的操作

// 合并
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);

// 连接字符串
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x=document.getElementById("demo");
    x.innerHTML=fruits.join();
}

// 删除最后一个
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.pop();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}

// 追加
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.push("Kiwi")
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}

//反转
fruits.reverse();

//删除第一个
fruits.shift();

// 截取1到3，左闭右开
fruits.slice(1,3);

// 数组排序，默认升序
fruits.sort();

//=====================================================================================
//数字排序
function myFunction(){
    var points = [40,100,1,5,25,10];
    points.sort(function(a,b){return a-b});
    var x=document.getElementById("demo");
    x.innerHTML=points;
}

//数字降序
function myFunction(){
    var points = [40,100,1,5,25,10];
    points.sort(function(a,b){return b-a});
    var x=document.getElementById("demo");
    x.innerHTML=points;
}

// 在第二个位置添加
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2,0,"Lemon","Kiwi");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
//=====================================================================================
// 转换成字符串
fruits.toString();

// 开头添加
fruits.unshift("Lemon","Pineapple");

12、布尔对象

如果布尔对象无初始值或者其值为:
0
-0
null
""
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 "false" 时）！

13、windows窗口检测

可以打开，关闭一个窗口，并且获取这个窗口的状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var myWindow;
function openWin(){
    myWindow=window.open("","","width=400,height=200");
}
function closeWin(){
    if (myWindow){
        myWindow.close();
    }
}
function checkWin(){
    if (!myWindow){
        document.getElementById("msg").innerHTML="我的窗口没有被打开!";
    }
    else{
        if (myWindow.closed){
            document.getElementById("msg").innerHTML="我的窗口被关闭!";
        }
        else{
            document.getElementById("msg").innerHTML="我的窗口没有被关闭!";
        }
    }    
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
<br><br>
<input type="button" value="我的窗口被关闭了吗?" onclick="checkWin()" />
<br><br>
<div id="msg"></div>
    
</body>
</html>