js学习总结
js
JavaScript⼀种直译式脚本语⾔，是⼀种动态类型、弱类型、基于原型的语⾔，⽅法基于对象事件驱动函数，它的解释器被称为JavaScript 引擎，为浏览器的⼀部分，⼴泛⽤于客户端的脚本语⾔
js的组成:
ECMAScript:js基础语法(规定关键字运算符语句函数等等...)
BOM：浏览器对象模型
DOM:⽂档对象模型
作⽤:
修改html页⾯的内容
修改html的样式
完成表单的验证
html和js的整合
⽅式1：内部编写js
<script type="text/javascript">js代码</script>
⽅式2:
外部有⼀个独⽴的js⽂件后缀名:.js
在html中通过script的src属性导⼊
<script src="js的路径"></script>
注意:
⼀旦使⽤了src属性，那么script标签体中的js代码将不再执⾏了.
js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略建议不要省略
⼀⾏要以分号结尾，最后⼀个分号可以省略，建议不要省略
数据类型:
原始类型(5种)
Undefined
Null
String ⽤引号引起来的内容
Number
Boolean
通过 typeof运算符可以判断⼀个值或者变量是否属于原始类型，若属于原始类型，他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null，使⽤typeof弹出的值 object
使⽤typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是⼀种引⽤类型或 Null 类型的
引⽤类型
运算符:
关系运算符:> 、>=  、<  、<=
两边值都是字符串,⽐较ascii码
两边都是数字，和java⼀样
⼀边是数字,⼀遍是字符串形式的数字, 可以⽐较如3>"2"
⼀边是数字,⼀遍是普通字符串可以⽐较值永远是false
等性运算符 == ===
== ：只判断值是否相同
===：不仅判断是否相同，还要判断类型是否相同
js的语句
if while for 和java⼀样
获取元素:
var ElementById("id值");
获取元素的value属性
var ElementById("id值").value;
设置元素的value属性
获取元素的标签体
var ElementById("id值").innerHTML;
设置元素的标签体
定义函数:
⽅式1:
function 函数名(参数){
函数体;
}
⽅式2:
var 函数名=function(参数){
函数体;
}
注意:
函数声明的时候不⽤声明返回值类型
参数列表上不要写参数类型
通过return结束⽅法和将值返回
js中的事件:
常见的事件:
单击: onclick
表单提交: onsubmit 加在form表单上的 onsubmit="return 函数名()" 注意函数返回值为boolean类型
页⾯加载: onload
js：事件驱动函数
事件和函数绑定
⽅式1：通过元素的事件属性
通过标签的事件属性 <xxx onclick="函数名(参数)"></xxx>
⽅式2：派发事件
定时器(BOM-window对象)
setInterVal(code，毫秒数)：每隔指定的毫秒数执⾏⼀次函数周期函数
setTimeout(code，毫秒数)：延迟指定的毫秒数之后只执⾏⼀次函数清除定时器
clearInterval(id):
clearTimeout(id):
操作元素:
操作css属性
属性：就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除，后⾯第⼀个字母变⼤写即可
注意:
只要是window对象的属性和⽅法，可以把window省略
window.setInterval() 等价于 setInterval()
////////////////////
bom(浏览器对象模型)总结
所有的浏览器都有5个对象
window：窗⼝
location：定位信息 (地址栏)
history：历史
window对象详解:
如果⽂档包含框架（frame 或 iframe 标签），浏览器会为 HTML ⽂档创建⼀个 window 对象，并为每个框架创建⼀个额外的 window 对象。
常⽤的属性:
通过window可以获取其他的四个对象
window.location 等价域 location
window.history 等价于 history
...
常⽤的⽅法
消息框
alert("....")：警告框
confirm("你确定要删除吗?")：确定框返回值:boolean
prompt("请输⼊您的姓名")：输⼊框返回值：你输⼊的内容
定时器
setInterval(code，毫秒数)：周期执⾏
setTimeout(code，毫秒数)：延迟多长事件后只执⾏⼀次.
清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url)：打开
close()：关闭
/
////////////////////////
location：定位信息
常⽤属性:
href：获取或者设置当前页⾯的url(定位信息)
location.href; 获取url
location.href="..."；设置url 相当于 a标签
//////////////////////
history：历史
back()；后退
forward()：向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()
注意:
在⽅法中(function()) this指代的是当前的元素(当前dom对象)
例如:
<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
⽅法:
function loseFocus(obj){
alert(obj);
}
/////////////////////////////
事件总结:
常见的事件:
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变
页⾯加载事件:★
onload
⿏标事件(掌握)
onclick
⿏标事件(了解)
ondblclick：双击
onmousedown：按下
onmouserup：弹起
onmousemove：移动
onmouserover：悬停
onmouserout：移出
键盘事件(理解)
onkeydown：按下
onkeyup：弹起
onkeypress：按住
了解
阻⽌默认事件的发⽣
阻⽌事件传播
获取元素:
常⽤属性:
length：数组的长度
/////////////////
案例3-隔⾏换⾊
/
/页⾯加载成功
onload=function(){
//1.获取所有的tr
var ElementsByTagName("tr");
//alert(arr);
//alert(arr.length);
//2.判断奇偶数添加不同的样式遍历数组
for(var i=1;i<arr.length;i++){
if(i%2==0){
arr[i].style.backgroundColor="#FFFFCC";
}else{
arr[i].style.backgroundColor="#BCD68D";
}
}
}
//////////////////////////////////
dom(⽂档对象模型)
当浏览器接受到html代码的时候，浏览器会将所有的代码装载到内存中，形成⼀棵树(document树)节点(Node)
⽂档节点 document
元素节点 element
属性节点 attribute
⽂本节点 text
获取节点:
通过document可以获取其他节点:
常⽤⽅法:
设置获取获取节点的value属性
dom对象.value；获取
dom对象.value=""；设置
设置或者获取节点的标签体
dom对象.innerHTML；获取
dom对象.innerHTML=""；设置
获取或者设置style属性
dom对象.style.属性；获取
dom对象.style.属性=""；设置
获取或者设置属性
dom对象.属性
/////////////////////////
对于htmldom的操作若在js或者htmldom 查不到去查xml dom
关于⽂档的操作在 xml dom 的document中
关于元素的操作在 xml dom 的element中
appendChild(dom对象)：在⼀个元素下添加孩⼦
数组:
语法:
new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
⾮官⽅
var arr4=["aa","bb"];
常⽤属性:
length
注意:
数组是可变的
数组可以存放任意值
常⽤⽅法:(了解)
存放值：对内容的操作
pop()：弹最后⼀个
push()：插⼊到最后
shift()：删除第⼀个
unshift()：插⼊到⾸位
打印数组:
join(分隔符)：将数组⾥的元素按照指定的分隔符打印
拼接数组:
concat()：连接两个或更多的数组，并返回结果。
对结构的操作:
sort()；排序
reverse()；反转
引⽤类型总结:
原始类型中的String Number Boolean都是伪对象，可以调⽤相应的⽅法    Array：数组
String:
语法:
new String(值|变量);//返回⼀个对象
String(值|变量);//返回原始类型
常⽤⽅法:
substring(start,end):[start,end)
substr(start,size)：从索引为指定的值开始向后截取⼏个
charAt(index)：返回在指定位置的字符。
indexOf("")：返回字符串所在索引
replace()：替换
split()：切割
常⽤属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
⾮0数字⾮空字符串⾮空对象转成true
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:
null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
new Date();
常⽤⽅法:
toLocalString()
RegExp：正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/
new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:
i：忽略⼤⼩写
g：全局
常⽤⽅法:
test() ：返回值为boolean
Math:
Math.常量|⽅法
Math.PI
Math.random() [0,1)
全局:
学javascript前要学什么
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。
Number()：强制转换成数字
String()：转成字符串

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。