Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS中的内置对象</title>
<meta http-equiv="refresh" content="2" />
<script type="text/javascript">
//var mess=prompt('请输入表达式:','a');
//alert(mess);
//内置函数eval() 计算表达式的值
//var value=eval(mess);
//alert(value);
//isNaN():表示的是 是否是 非数字的值
// var value=parseInt(mess);
//判断是非数字
// if(isNaN(value)){
// alert('是一个非数字的值');
// }else{
// alert('不是非数字');
// }
//Math对象
//random() 随机产生0-1之间的数值
//round() 四舍五入
//随机出0-5之间的整数
//alert(Math.round(Math.random()*5));
//随机出1-5之间的整数
alert(Math.round(Math.random()*4+1));
</script>
</head>
<body>
</body>
</html>
Date对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date日期对象</title>
<script type="text/javascript">
// 获取当前时间
var dateTime=new Date();
//getHours()：获取小时
//alert(dateTime.getHours());
// getMinutes():获取分钟
//alert(dateTime.getMinutes());
//getMonth(): 获取月份 但是取值为0-11
// /alert(dateTime.getMonth()+1);
// getFullYear():获取年份
// alert(dateTime.getFullYear());
</script>
</head>
<body>
</body>
</html>
JavaScript 面向对象编程
面向对象是一种解决问题的思路，一种编程思想。
万事万物都是对象，在 JavaScript 中，所谓的对象，就是键值对的集合。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.function(){
// 用id的方法获取页面中的元素
// var div1=document.getElementById('div1');
// 用classname的方法获取页面中的元素
// var div2=document.getElementsByClassName('div2');
// 用标签的名称获取页面中的元素
// var p1=document.getElementsByTagName('p');
// 用name的方法获取页面中的元素
// var div3=document.getElementsByName('name');
//第一种方式:传统的方式
// div1.style.border='1px solid red';
// div1.style.width=200+'px';
// div1.style.height=200+'px';
//第二种方式: 函数的方式 作用:对于相同的代码块进行封装
// function getById(id){
// return document.getElementById(id);
// }
// function setStyle(Ele){
// Ele.style.border='1px solid red';
// Ele.style.width=200+'px';
// Ele.style.height=200+'px';
// }
// var div1= getById('div1');
// setStyle(div1);
//面向对象的方式设置元素的样式
var inlett={
getEle:{
byId:function(id){
return document.getElementById(id);
},
byClass:function(clas){
return document.getElementsByClassName(clas);
}
},
setStyle:{
setCss:function(Ele){
Ele.style.border='1px solid red';
Ele.style.width=200+'px';
Ele.style.height=200+'px';
}
}
};
var div1= inlett.getEle.byId('div1');
inlett.setStyle.setCss(div1);
}
</script>
</head>
<body>
<div id="div1">1</div>
<div class="div2">2</div>
<p>2019</p>
<input name="name" type="button" value="2019" />
</body>
</html>
Object 对象
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
对象字面量方式
var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}
面向对象的三大特征
封装性
对象是将数据与功能组合到一起, 即封装
(1)js 对象就是 键值对的集合
键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
如果键值是函数, 那么就称为方法
(2)对象就是将属性与方法封装起来
(3)方法是将过程封装起来
继承性
让某个类型的对象获得另一个类型的对象的属性的方法
多态性
不同的类可以定义相同的方法或属性。
对象（类）的创建
在 JavaScript 中，我们通常可以使用构造函数来创建特定类型的对象
以这种方式调用构造函数实际上会经历以下 4 个步骤：
(1)创建一个新对象（实例）
(2)将构造函数的作用域赋给新对象（也就是重设了 this 的指向，this 就指向了这个新对象）
(3)执行构造函数中的代码（为这个新对象添加属性）
(4)返回新对象
JavaScript 中的 DOM 操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.function(){
//常用的访问 HTML 元素的方法
//通过getElementById()方法
//var div1=document.getElementById('div1');
//通过getElementsByClassName()方法
//var div2=document.getElementsByClassName('div2');
//通过getElementsByName()方法
//var div3=document.getElementsByName('name');
//通过getElementsByTagName()方法
//var p1=document.getElementsByTagName('p');
//常用的操作元素节点的增、删、改、及重置所在位置的方法
//1)appendChild()方法：把新的子节点添加到指定节点。
// var span1=document.getElementById('span');
// var div1=document.getElementById('div1');
// var p1=document.getElementById('p');
// div1.appendChild(span);
//2)removeChild()方法：删除子节点。
// div1.removeChild(p1);
//3) replaceChild()方法:替换子节点。
// div1.replaceChild(span1,p1);
//4) insertBefore()方法：在指定的子节点前面插入新的子节点。
// div1.insertBefore(p1,span1);
// 常用的创建元素属性、节点、文本及获取、修改属性值方法
// 1.createElement()方法：创建元素节点。
// var div2=document.createElement('div');
// document.getElementsByTagName('body')[0].appendChild(div2);
// 2.createTextNode()方法：创建文本节点。
// var textNode=document.createTextNode('2019');
// div2.appendChild(textNode);
// 3.createAttribute()方法：创建属性节点
// var attribute=document.createAttribute('id');
// attribute.value='div2';
// alert(attribute);
// 4.getAttribute()方法：返回指定的属性值。
// div2.setAttributeNode(attribute);
// span1.innerHTML=div2.getAttribute('id');
// 5.setAttribute()方法：把指定属性设置或修改为指定的值。
// div2.setAttribute('id','div_02');
// 常用的 HTML DOM 属性
// (1) innerHTML 属性： 设置或返回表格行的开始和结束标签之间的 HTML
// (2) parentNode 属性：以 Node对象的形式返回指定节点的父节点;如果指定节点没有父节点，则返回 null。
//将p标签的父节点对象显示到span中
// span1.innerHTML=p1.parentNode;
//将p标签的父节点名称显示到span中
// span1.innerHTML=p1.parentNode.nodeName;
// ) childNodes 属性：返回节点的子节点集合，以 NodeList 对象
//返回子节点集合
//var nodeList= div1.childNodes;
//返回[object NodeList]
//alert(nodeList);
//返回text文本节点
//alert(nodeList[2].nodeName);
// (4) attributes 属性： 返回指定节点的属性集合，即 NamedNodeMap
//alert(div1.attributes.length);
// (5) nodeName 属性： nodeName 属性指定节点的节点名称。
//alert(div1.attributes[2].nodeName);
// (6) nodeValue 属性： 设置或返回指定节点的节点值
alert(div1.attributes[2].nodeValue)
}
</script>
</head>
<body>
<span id="span">span</span>
<div id="div1">div
<p id="p">段落</p>
</div>
</body>
</html>