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 οnclick="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 οnlοad="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>

 

 

转载于:https://www.cnblogs.com/ZSMblog/p/9612483.html

• 点赞
• 收藏
• 分享
• 文章举报

baiqiao6080 发布了0 篇原创文章 · 获赞 0 · 访问量 72 私信 关注