JavaScript初级

JavaScript

事件驱动型语言

事件：click，focus，select，submit等

事件句柄：onclick，onfocus，onselect，onsubmit等

ECMAScript：JS的核心语法标准

DOM编程和BOM编程

【在网页的控制台使用：console.log(xxx)输出数据，类似java的System.out.println(xxx);】

【source可以对代码DEBUG】

1、页面嵌入JS的三种方法

1.1标签直接使用

<input type="button" onclick="alert('弹窗')"/>

1.2脚本块

位置随意

<script>
    alert("弹窗");
    alert('弹窗')；
</script>

1.3引入外部JS文件

script标签必须成对书写

<script src="javascript/xs.js"></script>

2、数据类型

var 声明变量【ES6的局部变量声明：let i】

=		//赋值
==		//类型不一样，值一样，也会判断为true
===		//绝对等于，即比较值，也比较数据类型

Undefined和Null

undifined：只有一个值“underfined”，当变量声明后未赋值时，默认的赋值【未定义】

null：空

Number

所有的数字
NaN			//Not a Number
Infinity	//无穷大

String

var a = "abc";
var b = 'abc';
var c = new String("abc");
//属性
a.length;
//函数
a.substr(开始下标,截取个数);
a.substring(开始下标,结束下标)；	  //截取字符串，不包含结束下标

Boolean

true|false

数组

var arr = [1,2,3,a,b,abc,null,true];
arr.length;
arr.indexof(2);
arr.slice(3);//截取数组，从下标3开始
arr.slice(1,3);//截取下标1-3的数组，不包括下标3

arr.push(xx);//末尾添加元素
arr.pop();//末尾删除一个元素
arr.unshift(xxx);//头部添加元素
arr.shift();//头部删除一个元素

arr.reverse();//反转数组
arr.sort();//排序

arr.join("-");//拼接，数组元素之间插入符号“-”

对象

var obj = {
	name : xxx,
	age : 123
}

Set和Map

【ES6】

var map = new Map([['tom',11],['jack',22]]);
map.get('tom');

3、严格检查格式

ES6环境下

<script>
    'use strict';
	//你的代码
</script>

4、遍历、迭代

for(let i of arr)
    

5、函数

//定义函数的两种方式
function a(x){
}

var a = function(x){
}

获取函数中的参数

var a = function(x){
    arguments.length;//【js对传参不敏感，传进多个参数也不会报错】argument是一个数组，存储的是传递进函数的参数
}

常量

const PI = '3.14';

6、内部对象

日期Date

var now = new Date();
now.getFullYear();		//年
now.getMonth();			//月	0-11
now.getDate();			//日
now.getDay();			//星期几
...
now.getTime();			//从1970年至今的毫秒数

7、Json字符串

Json：标准的、轻量级的数据交换格式，体积小，容易解析

var people = {name : "xxx",age : "23";sex : "男"}
//var arr = [{},{},{}]
//js对象【或者数组】转换成Json字符串{"name":"xxx","age":"23","sex":"男"}
var jasonObj = JSON.stringify(people);

//Json字符串转换成js对象【或者数组】：parse( '{"name":"xxx","age":"23","sex":"男"}' );
var obj = parse(jsonObj);

8、操作BOM对象

BOM：浏览器对象模型

window：代表当前浏览器窗口

navigator：当前浏览器【不常用】

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

screen：代表电脑屏幕对象

loaction：当前页浏览器URL

location.reload();//刷新网页
location.assign('网页地址')；//更改URL，跳转到‘网页地址’

document：当前页面

document.title="xxx";//将网页的title设置为”xxx“

获取具体的标签节点

windiw.document.getElementById('');

获得cookie信息

document.cookie

history：操作网页，代表浏览器历史记录

history.back();//返回
history.forword();//前进

9、操作DOM对象

DOM：文档对象模型

浏览器网页就是一个DOM树

• 更新：更新DOM节点
• 遍历：得到DOM节点
• 删除：删除DOM节点
• 添加：添加新的DOM节点

9.1 获得DOM节点【基本选择器】

var a1 = document.getElementById('');		//通过ID获得
var a1 = document.getElementsByClassName('');	//通过类名获得
var a1 = document.getElementsByTagName('');	//通过标签名获得

//通过父节点获得子节点
var father = document.getElementById('');
var childrens = father.children;
var first = father.firstChild;
var last = father.lastChild;

//通过子节点获得父节点
var f = a1.parentElement;

9.2 更新DOM节点

//操作文本【会覆盖节点内原来的数据】
a1.innerText='';//修改标签内文本
a1.innerHTML='';//可以解析为HTML文件并执行

//操作css
a1.style.color = 'red';
a1.style.padding = '10px';

9.3 删除节点

先获取父节点，通过父节点删除子节点

var fa = self.parentElement;

fa.removeChild(self);
fa.removeChild(fa.children[0]);

9.4 插入节点

追加

//将已经存在的节点【a1】移动，追加到后面
fa.appendChild(a1);

//创建新标签
var newp = document.createElement('p');//新建一个p标签
newp.id = 'p2';	//添加id属性
newp.innerText='hahaha';	//添加内容

newp.setAttribute('id',p2);

插到前面(了解)

//将a2标签插入到a1标签前面
fa.insertBefore(a2,a1);

10、操作表单

<form action="" method="post" onsubmit="return subm()">
    用户名<input type="text" name="name" id="username"/>
    密码<input type="password"  id="pwd"/>
    <input type="hidden" name="password" id="relpwd"/>
    <input type="submit"/>提交
</form>


<script>
    var subm = function(){
        var name = document.getElementById('username');
        var pwd = document.getElementById('pwd');
        var relpwd = document.getElementById('relpwd');
        relpwd.value = md5(pwd.value);	//使用md5对密码加密,需要导入md5的js文件
        return true;
    }
</script>

11、jQuery

是一个库，封装了大量的JS代码

在线引入jQuery库【jQuery CDN加速】

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

公式：

$(selector).action()

//js
document.getElementById('id')

//jQuery【#id就是css的id选择器】
$('#id')

事件

• 鼠标事件

• 键盘事件

• 其他事件

//当网页加载完毕执行
$(document).ready(function(){
    xxx;
});

//简写
$(function(){});

操作DOM

$('#a1').text();
$('#a1').text('xxx');

$('a2').html();
$('a2').html('<del>xxx</del>');

操作css

$('#a1').css("color":"red","background":"blue")
$('#a2').css("color","red")

元素的显示和隐藏

$('#a1').show()
$('#a1').hide()

事件

• 鼠标事件

• 键盘事件

• 其他事件

//当网页加载完毕执行
$(document).ready(function(){
    xxx;
});

//简写
$(function(){});

操作DOM

$('#a1').text();
$('#a1').text('xxx');

$('a2').html();
$('a2').html('<del>xxx</del>');

操作css

$('#a1').css("color":"red","background":"blue")
$('#a2').css("color","red")

元素的显示和隐藏

$('#a1').show()
$('#a1').hide()