一、内置对象
String
1.charAt( idx) 返回指定位置处的字符
2.indexOf(Chr) 返回指定子字符串的位置,从左到右。找不到返回-1
3.substr(m, n) 返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾。
4.substring(m,n) 返回给定字符串中从m位置开始,到n位置结束,如果参数n省略,则意味着取到字符串末尾。
5.toLowerCase() 将字符串中的字符全部转化成小写。
6.toUppercase() 将字符串中的字符全部转化成大写。
7.length 属性,不是方法,返回字符串的长度。
Math
1.Math.random() 随机数
2.Math.ceil() 向上取整,大于最大整数
3.Math.floor() 向小取整,小于最小整数string
Date
获取日期
getFullYear() 年
getMonth() 月
getDate() 日
getHours() 时
getMinutes() 分
getSeconds( ) 秒
设置日期
setYear()setMonth()setDate()setHours()setMinutes()setSeconds()
toLoacaleString()转换成本地时间字符串
<script type="text/javascript">
var str = "Hello world";
console.log(str);
console.log(str.substring(3));//从下标3开始,截取到最后
console.log(str.substring(3,5));从下标3开始,到下标5结束
console.log( str.toLowerCase());//转小写
console.log(str.toUpperCase());//·转大写
// 1.Math.random() 随机数
console.log(Math.random());
// 2.Math.ceil() 向上取整,大于最大整数
console.log(Math.ceil(1,2));
// 3.Math.floor() 向小取整,小于最小整数string
console.log(Math.floor(1,2));
//得到日期对象
var date = new Date();
console.log(date);
//。getFullYear() 年
console.log(date.getFullYear( ));
//。getMonth() 月
console.log(date.getMonth() +1);
// 0~11l/。getDate()
console.log(date.getDate( ) );
// 。 getHours() 时
console.log(date.getHours( ));
// getMinutes() 分
console.log(date.getMinutes());
// getSeconds() 秒
console.log(date.getSeconds());
var mstr = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes();
var dateStr = date.getFullYear()+"-"+(date.getMonth() +1)+"-"+date.getDate( ) +" "+date.getHours( )+":"+date.getMinutes()+":"+date.getSeconds()
console.log(dateStr);
// 时间本地化
console.log(date.toLocaleString());
</script>
二、对象
1.对象的创建
1.字面量形式创建对象
var 对象名 = {};//空对象
var 对象名={
键:值,
键:值,
......
};
2.通过new 0bject创建
var对象名= new object();//空对象
3.通过0bject对象的create方法创建
var 对象名 = 0bject.create(null);//空对象
var 对象名 = 0bject.create(对象);
2.对象的操作
获取对象的属性 (如果属性不存在,则获取undefined)
对象名.属性名;
设置对象的属性 (如果属性存在,则修改属性值;如果属性不存在,则添加新的属性值)
对象名.属性名=值;
3.对象的序列化和反序列化
序列化:将]S对象(SON对象)转换成JSON字符串
var 变量名 = JSON.stringify(对象);
反序列化:将JSON字符串转换成]S对象(JSON对象)
var 对象名 = JSON.parse(JSON字符串);
4. this
谁调用函数,this指代谁。
1.直接调用函数, this代表的全局的window对象
2.调用对象中的函数, this代表的是对象本身
<script type="text/javascript">
/*对象的创建*/
//字面量形式创建对象
var obj1 = {};//空对象
console.log(obj1);
var obj2 = {
name : "zhangsan",age: 18
};
console.log(obj2);
//通过new 0bject创建
var obj3 = new Object();//空对象
console.log(obj3);
//通过object对象的create方法创建
var obj4 = Object.create(null); //空对象
console.log(obj4);
var obj5 = Object.create(obj2);
console.log(obj5);
/*对象的操作*/
//获取对象的属性
//获取不存在的属性
console.log(obj1.name);//zhangsan
//获取存在的属性
console.log(obj2.name) ;
console.log(obj3.name); // undefined
console.log(obj4.name); // undefined
console.log(obj5.name); // zhangsan
//设置对象的属性
//存在的属性,修改属性值obj2.age = 20;
console.log(obj2);
//不存在的属性,添加属性值
obj2.upwd = "123456";
console.log(obj2);
console.log( " -----------------" );
/*对象的序列化和反序列化*/
//序列化
// JSON对象
var obj = {
name : "zhangsan",pwd : "123456",age: 18
};
obj.name = "lisi" ;
console.log(obj);
//将JSON对象转换为JSON字符串
var objToStr = JSON.stringify(obj);
console . log(objToStr);
console.log( "======");
//JSON字符串
var jsonStr = '{ name : "zhangsan" , pwd : "123456" , age:18} ';
jsonStr.name="lisi";
console.log(jsonStr);
//将JSON字符串转换为JSON对象
/* var strToObj = JSON.parse(obj);
console.log(strToObj); */
console.log("=================");
/* this */
// 1.直接调用函数,this代表的全局的window对象
function test() {
console.log("这是一个测试方法...");
console.log(this); // window对象
}
test();
// 2.调用对象中的函数,this代表的是对象本身
var o = {
name : "zhangsan",
age: 18,
sayHello:function(){
console.log("你好呀~");
console.log(this);//当前 o 对象
}
}
//调用对象中的方法
o.sayHello();
</script>
三、事件
事件中几个名词:
事件源:给什么元素/标签绑定事件事件名:绑定什么事件
事件监听:浏览器窗口
执行函数:事件触发后需要执行什么代码
常用的事件类型
onload: 当页面或图像加载完后立即触发
onblur: 元素失去焦点
onfocus: 元素获得焦点
onclick: 鼠标点击某个对象
onchange: 用户改变域的内容
onmouseover: 鼠标移动到某个元素上
onmouseout: 鼠标从某个元素上离开
onkeyup: 某个键盘的键被松开
onkeydown: 某个键盘的键被按下
事件流
事件冒泡:事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点(文档)
事件捕获:事件开始时由文档节点接受,然后逐级向下传播到具体的元素节点
事件处理程序(事件绑定方式)
1.HTML事件处理程序
直接在html元素上绑定事件
2.DOM 0级事件
先获取事件源,再给事件源绑定事件
不能同时给元素绑定相同事件多次
3.DOM 2级事件
注:通过id属性值获取节点对象
document.getElementById( "id属性值");
<body onload="loadWindow()">
<!-- onclick事件:点击事件(单击事件) -->
<button onclick="test()" onmouseout="outButton()">按钮</button>
<!--常用事件类型-->
<!--
onblur事件:失焦事件
onfocus事件:聚焦事件
-->
姓名:<input type="text" onblur="aa( )" onfocus="bb()"/>
<!--
-->
城市:<select onchange="changeCity()">
<option> 北京</option>
<option> 上海</option>
<option> 深圳</option>
</select>
<hr>
<!-- HTML事件处理程序 -->
<button type="button" onclick="alert('Hello')">按钮1</button>
<!-- DOM 0级事件-->
<button type="button" id="btn2">按钮2</button>
<!-- DOM 2级事件-->
<button type="button" id="btn3">按钮3</button>
</body>
<script type="text/javascript">
function loadWindow() {
console.log("文档加载完毕..." );
}
function test() {
console. log("按钮被点击了..." );
}
function aa() {
console.log("失去焦点了..." );
}
function bb() {
console.log("聚焦了..." );
}
function changeCity(){
console.log("值改变了");
}
function outButton(){
console.log("鼠标离开了");
}
/* DOM0级事件 */
// 1.事件源:获取事件源((按钮)
var btn2 = document.getElementById( "btn2" );
console.log(btn2);
// 2.事件类型:给事件源绑定指定事件
btn2.onclick = function(){
console.log("按钮2被点击了...");
}
//3.执行函数:事件触发后要执行的代码btn
/* DOM2级事件 */
// 1.事件源:获取事件源(按钮)
var btn3 = document.getElementById( "btn3");
//添加事件监听
btn3. addEventListener( "click", function( ){
console.log("按钮3被点击了..." );
}, false);
btn3. addEventListener( "mouseout",btnFunction, false);
function btnFunction(){
console.log("鼠标离开按钮三了");
}
btn3. addEventListener( "click", function( ){
console.log("按钮3被点击了2..." );
}, false);
</script>