JS学习总结
内部JS
<script>
//js代码
</script>
外部JS
<script src="js/text.js"></script>
注意:外部js里面不可以写js代码
数据类型
js是弱类型语言：赋值时确定类型。 java是强类型语言：赋值时才确定类型
变量的定义使用var关键字:用，局部变量；不用，全局变量
-
原始数据类型
number：数组类型。整数/小数/NaN(一个不是数字的数据类型)
var num = 1; var num2 =2.1; var num = NaN;string：字符串。
var str = "abc"; var str = 'abc';undefinded：未定义。如果一个变量没有给初始值，默认为underfined
var obj = undefined;boolean：true和false。
var flag = true;null：一个对象为空的占位符。
var obj = null; -
应用数据类型(对象)
function对象
js在调用方法的时候，可以传入0-N个参数。传入多小个参数，方法就接收多小个参数，形参没有值的就为null，js按顺序来获得传入值
//创建方法 function f(param){ //。。。 } //方法形参数量 f.length; //每个方法默认内置一个动态形参argument,可以通过它来获取参数Array数组对象
//创建数组的三种方式 var arr = new Array(param,param, ...); var arr2 = new Array(数组长度); var arr3 = [param,param, ...]; //在数组末尾添加数据 arr.push(88); //移除数组末尾1的数据，返回移除值 var del = arr.pop(); //从位置index开始，删除num个 arr.splice(index,num); //遍历数组 var arr = [1,3,4,2]; function f(value) { console.log(value); } arr.forEach(f);typeof:查看 变量类型
var a= 45; console.log(typeof a);//number var name = '张三'; console.log(typeof name);//string var people = {"age":10,"name":"张三"}; console.log(typeof people);//objectjs的this指向
this是哪个对象调用函数，函数里面的this指向哪个对象，直接调用方法默认是window对象调用，window.outter()，如果最外面没有name，outter没有this.name，就会报错因window.name
//定义一个方法 function outter (){ var name = '张三'; //方法中又定义一个方法 function inner(){ console.log(this.name); } innner(); } outter(); //------------------------------------------------------- function Person(name,age,eat){ this.age = age; this.name = name; this.eat = eat; } function eat(){ console.log('xxx在吃饭') } var person2 =new Person(10,'李四',ear); //这里的this是指Person不是Window
正则表达式
1.单个字符表示
[a] : 表示单个字符a
[ab] : 表示a或b
[a-z] : 表示a到z
[a-zA-Z] : 可以是a到z，A到Z
\d : [0-9]
\w : [a-zA-Z0-9]
2.量词符号
* : 出现0次或多次 \w*
? : 表现出现0次或1次 \w?
+ : 出现1次或多次
{m,n} : 表示 m<=数量<=n
如果m缺省:{，n}最多n次
如果n缺省:{m，}最多m次
3.开始结束
^开始
$结束
正则对象：
//创建
var reg = new RegExp("\\w{6,12}");
var reg2 = /^\w{6,12}$/;
//方法test()
var str = "afagfaf";
var flag = reg.test(str);//判断是否符合正则表达式,是返回true,不是返回false
BOM
概念：浏览器对象模型。将浏览器的各个组成部分封装成对象的模型
1.浏览器对象Navigator
2.窗口对象Window
1.历史记录对象History
2.地址栏对象Location
3.DOM对象
3.显示器屏幕对象Screen
Window对象
特点：Window对象不用创建直接使用window使用， window.方法();
或者Window引用可以省略。 方法名();
方法
//1.弹出框相关的方法
//警告框，只有一个确定按钮
alert();
//确认对话框，一个确定按钮，一个取消按钮
confirm();
//显示可提示用户输入的对话框,方法返回值是用户输入的值 prompt("请输入");
var ret = prompt();
//--------------------------------------------------------------------
//2.打开关闭
//打开一个窗口
open();
//关闭当前窗口
close();
//打开百度窗口
var baidu = open("https://www.baidu.com/");
//关闭百度窗口
baidu.close();
//------------------------------------------------------------------
//3.定时器方法
/**
一次性定时器:指定毫秒后调用函数或计算的表达式 参数：1.js代码或方法对象 2.毫秒值
setTimeout(js代码,毫秒值)，一次性的。
*/
function f(){
//代码
}
var time = setTimeout(f,2000);//两秒后执行f方法
clearTimeout(time);//取消定时器
//循环定时器:与一次定时器参数一致，但循环执行
var time2 = setInterval(f,2000)//每两秒循环执行一次
clearInterval(time2);//取消定时器
属性：
1.window可以获取其他BOM对象(history,location,Navigartor ,screen)
//获取history
var h1 = window.history;
var h2 = history;
var s = screen;
var n = Navigator;
var l = location;
2.window可以获取DOM对象
location对象
方法:
location.reload();//当前页面刷新
location.href();//获取当前浏览器路径
button.onclick = function (){
location.href = "https://www.baidu.com/";//设置当前路径
}
history对象
方法：
//返回上一个url
history.back();
//前进下一个url
history.forward();
//前进到那个页面，0为不前进，2为两个forward
history.go();
属性：
//返回当前窗口历史列表的URL的个数，不是整个浏览器的历史记录
var length = history.length
DOM
概念：文档对象模型。将标记语言文档的各个部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD（增删改）的动态操作
核心 DOM ：针对任何标记文档的语言
Document:文档对象（重点）
Element: 元素对象（重点）
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象，其他五个的父对象（重点
XML DOM - 针对 XML文档的标准模型
HTML DOM - 针对 HTML 文档的模型
核心 DOM
Element对象
获取：
document.getElementById("id");//根据id获取对象
document.getElementsByTagName("");//根据元素名称获取对象们，返回值是一个数组
document.getElementsByName("");//根据name属性获取对象
document.getElementsByClassName("");//根据class属性获取对象
Attribute对象
//创建一个tr标签对象
document.createAttribute("tr");
//创建一个span标签对象
document.createAttribute("span");
Node对象
是其他五个的父对象，所有Dom对象都可以被认为是一个节点，Node通常用作节点的增删改
//获得tr对象
var tr = document.getElementById("tr");
//创建tb标签对象
var tb = document.createAttribute("tb");
//把tb添加到tr上
tr.appendChild(tb);
//----------------------------------------------------
var tr = document.getElementById("tr");
var tb = document.getElementById("tb");
//删除tr节点上的tb
tr.removeChile(tb);
//--------------------------------------------------
//获得标签值
var id = document.getElementById("id").value;
//--------------------------------------------------------
//创建一个文本节点，用作存储标签值
var id_text = document.createTextNode(id);
//------------------------------------------------------
//获取夫标签对象
var tr = document.getElementById("tr");
var tab = tr.parentNode;
HTML DOM
1.标签体的设置和获取:innerHTML
2.使用html元素对象的属性
3.控制元素
HTML DOM
1.标签体的设置和获取:innerHTML
2.使用html元素对象的属性
<body>
<div id="div1"> </div>
</body>
<script>
//获取div对象
var div = document.getElementById("div");
//在div标签中添加input标签
div.innerHTML + = "<input type = 'text'>"
//把div标签替换为文本标签
div.innerHTML = "<input type = 'text'>"
</script>
3.控制元素
1.使用元素的style属性改变样式
<body>
<input id="id1" type="submit"/>
</body>
<script>
var id1 = document.getElementById("id1");
id1.onclick = function () {
id1.style.border="5px solid red";
}
</script>
2.提前定义好选择器的样式，元素的className属性来设置样式
<style>
.d1{
border: 5px solid red;
}
.d2{
border: 5px solid black;
}
</style>
</head>
<body>
<input id="id1" class="d1" type="submit"/>
</body>
<script>
var id1 = document.getElementById("id1");
id1.onclick = function () {
id1.classList = "d2";
}
</script>
事件
某些组件被执行了某些操作后，触发某些代码的执行
事件：
某些组件被执行后，触发某些代码
事件:某些操作,如：单击，双击，
事件源：组件 如：按钮
监听器:代码
注册监听:将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则会触发监听代码
常见的事件:
1.点击事件
1.onclick:单击事件
2.ondblclick:双击事件
2.焦点事件
1.onblur:失去焦点:表单校验
<input type = "text" id = "username" />
document.getElementById("username").onblur = function(){
alter("失去焦点");
}
2.onfocus:元素获得焦点
3.加载事件
1.onload:一张页面或一幅图像完整加载
window.onload = function(){
document.getElementById("username").onblur = function(){
alter("失去焦点");
}
}
4.鼠标事件
onmousedown 鼠标被按下
定义方法时，加一个形参event来确定那个按钮被按下
onmouseup 鼠标松开
onmousemove 鼠标移动
onmouseover 鼠标在某元素上
onmouseout 鼠标从某元素移开
5.键盘事件
onkeydown
onkeyup
onkeypress 按下并松开
6.选择和改变
1.onchange 域的内容被改变
2.onselect 文本被选中
7.表单事件
1.onsubmit 确定按钮被点击
2.onreset 重置按钮被点击
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
