JAVA script基础知识
2016-11-13 18:07
369 查看
JAVA SCRIPT类型转换：
1）typeof操作符：返回变量的数据类型
2）constructor属性:该属性返回js变量的构造函数，用法（变量名.constructor.toString()）
JAVA SCIRPT表单的验证:
1)在<form>标签中添加事件onsubmit="return 函数名" 加上return就不会转到新的页面
2)document.forms["表单名称"]["元素名称"].value;就能获得元素名称所对应的元素的值。
JAVA SCRIPT验证API
1）约束验证DOM方法：
checkValidity():如果input元素输入的数据是合法的就返回true,否则返回false。这里应该设置约
束条件，比如:required,max,min等。
setCustomValidity（）:设置input元素的validationMessage属性，用于自定义错误提示信息。
2)约束验证DOM属性：
validity：布尔属性值，返会input输入值是否合法。
validationMessage：浏览器错误提示信息。
willValidate：指定input是否需要验证。
validity：属性:
customError 设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch 设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow 设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow 设置为 true, 如果元素的值小于它的最小值。
stepMismatch 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch 设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing 设置为 true，如果元素 (required 属性) 没有值。
valid 设置为 true，如果元素的值是合法的。
JAVASCRIPT JSON:
JSON定义:json用于存储和传输数据的格式，通常用于服务端想网页传递数据。
1）JSON的语法规则:数据为 键/值 对,数据由逗号分隔,大括号保存对象,方括号保存数组
2)JSON数组:"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
3)JSON 字符串转换为 JavaScript 对象:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
var obj = JSON.parse(text);//转换函数
4）JSON.stringify（）//将js值转换为JSON字符串。
JAVASCRIPT VOID:
1）一种嵌入js代码的格式，javascript:后面跟你想要执行的js代码。
2)javascript:void(0);执行void里面的表达式，但是没有返回值。
JAVASCRIPT 函数定义:
1)函数表达式:函数表达式可以储存在变量里。var x = function (a, b) {return a * b}; var z=x(2,4);
2)自调用函数:函数表达式可以 "自调用",自调用表达式会自动调用,如果表达式后面紧跟 () ，则会自动调
用,不能自调用声明的函数,通过添加括号，来说明它是一个函数表达式：(function () {
var x = "Hello!!"; // 我将调用自己})();//上面的函数实际上是匿名自我调用的函数。
3）arguments.length 属性返回函数调用过程接收到的参数个数：
JAVASCIRPT函数调用:
1)this关键字:this指向函数执行时当前对象。
2）函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。
在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
myFunction() 和 window.myFunction() 是一样的：
3）全局对象:当函数没有被自身的对象调用时， this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口（window 对象）。举例:function myFounction(){ return this;}
这里这个this就是window全局对象。
4）函数作为方法调用:以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName),
及一个方法 (fullName):
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
5)作为函数方法调用函数:
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本
身。
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2);
function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);
JAVASCRIPT 内嵌函数:
1)javascript内嵌函数:所有函数都能访问全局变量。 实际上，在 JavaScript 中，所有函数都能访问它们
上一层的作用域。JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。该实例中，内嵌函数
plus() 可以访问父函数的 counter 变量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
JAVASCRIPT 闭包:
1)就是函数的自我调用，
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
JAVASCRIPT HTML DOM:
DOM介绍:
1）通过id和标签名查找HTML元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>你好世界!</p>
<div id="main">//这里div元素包含两个p子元素。
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");//得到div元素对象
var y=x.getElementsByTagName("p");//得到关于p元素的对象数组。
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html>
2）通过类名查找元素:
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
JAVASCRIPT HTML DOM 改变HTML:
1)改变HTML的内容:
document.getElementById(id).innerHTML=新的 HTML
2)改变HTML的属性:
document.getElementById(id).attribute=新属性值
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";//重点。
</script>
JAVASCRIPT HTML DOM 改变CSS:
1)改变HTML样式:
document.getElementById(id).style.property=新样式
2)使用事件:
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">//这里好好理解，不只是调用函数。
点我!</button>
JAVASCRIPT HTML DOM事件:
1）事件的应用:
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>//改变了h1元素的内容，注意这里this，可以吧h1元素理解为对象。
2）各种事件:
onload 和 onunload 事件:
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange事件:
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
onmouseover 和 onmouseout 事件:
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件:
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
JAVASCRIPT HTML DOM 元素(节点):
1）创建新的HTML元素:
定义:向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
<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);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
这段代码创建新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是一个新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素：
element.appendChild(para);
删除已有的HTML元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
JAVA SCRIPT类型转换：
1）typeof操作符：返回变量的数据类型
2）constructor属性:该属性返回js变量的构造函数，用法（变量名.constructor.toString()）
JAVA SCIRPT表单的验证:
1)在<form>标签中添加事件onsubmit="return 函数名" 加上return就不会转到新的页面
2)document.forms["表单名称"]["元素名称"].value;就能获得元素名称所对应的元素的值。
JAVA SCRIPT验证API
1）约束验证DOM方法：
checkValidity():如果input元素输入的数据是合法的就返回true,否则返回false。这里应该设置约
束条件，比如:required,max,min等。
setCustomValidity（）:设置input元素的validationMessage属性，用于自定义错误提示信息。
2)约束验证DOM属性：
validity：布尔属性值，返会input输入值是否合法。
validationMessage：浏览器错误提示信息。
willValidate：指定input是否需要验证。
validity：属性:
customError 设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch 设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow 设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow 设置为 true, 如果元素的值小于它的最小值。
stepMismatch 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch 设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing 设置为 true，如果元素 (required 属性) 没有值。
valid 设置为 true，如果元素的值是合法的。
JAVASCRIPT JSON:
JSON定义:json用于存储和传输数据的格式，通常用于服务端想网页传递数据。
1）JSON的语法规则:数据为 键/值 对,数据由逗号分隔,大括号保存对象,方括号保存数组
2)JSON数组:"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
3)JSON 字符串转换为 JavaScript 对象:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
var obj = JSON.parse(text);//转换函数
4）JSON.stringify（）//将js值转换为JSON字符串。
JAVASCRIPT VOID:
1）一种嵌入js代码的格式，javascript:后面跟你想要执行的js代码。
2)javascript:void(0);执行void里面的表达式，但是没有返回值。
JAVASCRIPT 函数定义:
1)函数表达式:函数表达式可以储存在变量里。var x = function (a, b) {return a * b}; var z=x(2,4);
2)自调用函数:函数表达式可以 "自调用",自调用表达式会自动调用,如果表达式后面紧跟 () ，则会自动调
用,不能自调用声明的函数,通过添加括号，来说明它是一个函数表达式：(function () {
var x = "Hello!!"; // 我将调用自己})();//上面的函数实际上是匿名自我调用的函数。
3）arguments.length 属性返回函数调用过程接收到的参数个数：
JAVASCIRPT函数调用:
1)this关键字:this指向函数执行时当前对象。
2）函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。
在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
myFunction() 和 window.myFunction() 是一样的：
3）全局对象:当函数没有被自身的对象调用时， this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口（window 对象）。举例:function myFounction(){ return this;}
这里这个this就是window全局对象。
4）函数作为方法调用:以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName),
及一个方法 (fullName):
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
5)作为函数方法调用函数:
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本
身。
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2);
function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);
JAVASCRIPT 内嵌函数:
1)javascript内嵌函数:所有函数都能访问全局变量。 实际上，在 JavaScript 中，所有函数都能访问它们
上一层的作用域。JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。该实例中，内嵌函数
plus() 可以访问父函数的 counter 变量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
JAVASCRIPT 闭包:
1)就是函数的自我调用，
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
JAVASCRIPT HTML DOM:
DOM介绍:
1）通过id和标签名查找HTML元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>你好世界!</p>
<div id="main">//这里div元素包含两个p子元素。
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");//得到div元素对象
var y=x.getElementsByTagName("p");//得到关于p元素的对象数组。
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html>
2）通过类名查找元素:
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
JAVASCRIPT HTML DOM 改变HTML:
1)改变HTML的内容:
document.getElementById(id).innerHTML=新的 HTML
2)改变HTML的属性:
document.getElementById(id).attribute=新属性值
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";//重点。
</script>
JAVASCRIPT HTML DOM 改变CSS:
1)改变HTML样式:
document.getElementById(id).style.property=新样式
2)使用事件:
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">//这里好好理解，不只是调用函数。
点我!</button>
JAVASCRIPT HTML DOM事件:
1）事件的应用:
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>//改变了h1元素的内容，注意这里this，可以吧h1元素理解为对象。
2）各种事件:
onload 和 onunload 事件:
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange事件:
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
onmouseover 和 onmouseout 事件:
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件:
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
JAVASCRIPT HTML DOM 元素(节点):
1）创建新的HTML元素:
定义:向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
<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);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
这段代码创建新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是一个新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素：
element.appendChild(para);
删除已有的HTML元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 1109学习记录 java script 基础知识实例
- Java Script 函数基础知识
- JAVA相关基础知识(1)
- JAVA相关基础知识_mxf
- JAVA相关基础知识（一）（转贴）
- JAVA基础知识(4)
- JAVA基础知识(5)
- 第二讲 Java语言基础知识
- Java 应了解的基础知识（转载）
- JAVA相关基础知识(6)
- JAVA相关基础知识(5)
- JAVA基础知识(3)
- JAVA相关基础知识(2)
- JAVA相关基础知识 选择自fanlitcn 的Blog
- JAVA相关基础知识(7)
- JAVA相关基础知识(3)
- 【每日工作－第一天、第二天】Java基础知识
- JAVA相关基础知识
- JAVA基础知识精华总结
- J2ME中需要的Java基础知识