javascript基础和html dom基础

最新推荐文章于 2024-08-21 22:58:26 发布

IluckySi

最新推荐文章于 2024-08-21 22:58:26 发布

阅读量543

点赞数

分类专栏： ------javascript 文章标签： javascript基础 dom基础

本文链接：https://blog.csdn.net/sidongxue2/article/details/44840341

版权

------javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一.javascript基础.
1.创建和使用对象方法.
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName;
</script>

2.字符串可以是对象.
var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object
一般不要创建 String 对象，它会拖慢执行速度，并可能产生其他副作用.

3.typeof操作符.
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 new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (if myCar is not declared)
typeof null // 返回 object
var person = null; // Value is null, but type is still an object
var person2; // 值为 undefined, type is undefined
null和undefined的区别.
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true

4.constructor属性.
"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] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
可以通过constructor区分数组和日期.
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}

5.javascript正则表达式.
在JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

6.try catch和throw的使用.
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

7.表单验证.
<form name="myForm" action="demo_form.asp" οnsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

8.js对象和json的区别,json key和value都带双引号.
JSON 语法规则
数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
使用JavaScript内置函数JSON.parse() 将JSON字符串转换为JavaScript对象:

9.href="#"与href="javascript:void(0)"的区别.
#包含了一个位置信息，默认的锚是#top也就是网页的上端。
而javascript:void(0),仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
<body>
<p>点击以下链接查看不同效果：</p>
<a href="javascript:void(0);">点我没有反应的!</a>
<br>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p id="pos">尾部定位点</p>
</body>

10.arguments对象.
JavaScript函数有个内置的对象arguments对象.
argument对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最后一个参数的值：
var x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}

11.js闭包.
变量的作用域分为是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
另一方面，在函数外部自然无法读取函数内的局部变量。
另外注意:声明在函数外的变量无论是否加var都是全局变量，
同时，即使在函数内部如果声明变量不加var，也会认为是声明了一个全局变量.
看下面三个例子：
var n=999; //等同于n = 99,即声明了一个全局变量.
function f1(){
　　alert(n);
}
f1(); // 999
function f1(){
　　var n=999; //声明了一个局部变量,所以在外面调用会报错.
}
alert(n); // error
function f1(){
　　n=999;//虽然在函数内部,但是由于没有加var,所以也是声明了一个全局变量.
}
f1();
alert(n); // 999
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，
正常情况下，这是办不到的，只有通过变通方法才能实现,看如下例子:
function f1(){
n=999;
　　function f2(){
　　 alert(n);
　　}
　　return f2;
}
var result=f1();
result(); // 999
思路:既然f2作为f1的局部变量,可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
其中的f2就是闭包，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
Js代码
function f1(){
var n=999;
nAdd=function(){
n+=1
}
　　function f2(){
　　 alert(n);
　　}
　　return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，
函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，
不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，
而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个
匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

二.html dom.
1.改变html属性.
document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";

2.事件.
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me
</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>

3.eventlistener.
添加事件监听器:
<p>该实例使用addEventListener()方法在按钮中添加点击事件.</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。如果你将<p>元素插入到<div>元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在冒泡中内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在捕获中外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 及冒泡传递，当值为 true 时, 事件使用捕获传递。
删除事件监听器:
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄.

4.dom元素节点.
添加节点:
<div id="div1"></div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除节点:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
可以通过如下代码删除节点.
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
也可以通过如下代码删除节点.
var child=document.getElementById("p1");
child.parentNode.removeChild(child);