JS自学大全
JS是从上往下执行的
console.log();输出语句
console.warn();错误提示语句 黄色三角形感叹号
console.error();错误提示 红色圆X
alert();弹窗
document.write();文件打印输出 比如网页有时间倒计时 下一秒需打印
document.getElmentById();指定某个id对其进行更改样式 JS里要用ID时用这个语句
decument.getElementsByTagNanme();返回一个数组对象 标签
decument.getElementsByTagName();返回一个数组对象 名称
decument.getElementsByClassName();是新出的方法它和decument.getElementsTagName();有什么区别呢?
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV元素,用getElementsByName("docname")[0]访问第一个DIV,用getElementsByName("docname")[1]访问第二个DIV。
(3)getElementsByTagName()
getElementsByTagName()是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。
-------
JS里无- 比如background-color JS里是backgroundColor
变量名可以是汉字但是IE浏览器不支持
JS里除了嵌套 "" ''双引号和单引号无区别
JS里的全局变量就是
var num=10;
function fn(){
num =20;这个是全部变量
}
var a=b=c=9; bc属于全局变量
在外部就是全局变量都能用
比如在函数里 没有定义var也是全局变量
局部变量就是在函数内部声明了变量
事件三要素:语法格式
事件源.事件=function(){ 事件处理函数 }
事件三要素 鼠标事件总汇
一般事件 事件 浏览器支持 描述
onclick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
ondblclick IE4|N4|O 鼠标双击事件
onmousedown IE4|N4|O 鼠标上的按钮被按下了
onmouseup IE4|N4|O 鼠标按下后,松开时激发的事件
onmouseover IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件
onmousemove IE4|N4|O 鼠标移动时触发的事件
onmouseout IE4|N3|O3 当鼠标离开某对象范围时触发的事件
onkeypress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onkeydown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onkeyup IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
隐藏盒子:
display:none;隐藏 占了位置
visibility:hidden;隐藏占位置
overflow:hidden;隐藏 超出的位置
比如:事件源.style.display:none;
入口函数:放在script标签上部就是body里下面 比如轮播图放在里面因为页面先加载结构再加载样式 一般页面加载中结构和链接可以点 轮播图加载完后点击才会动
window.onload=function(){
这里放JS
}
JS里 typeof检测数据类型
var txt="啊";
console.log(typeof txt); string
转字符型:String();
var num=10;
console.log(String(num));
数据类型转boolean
1.!!
2.Boolean();
"0"+1=01 字符型加整数型的规律
020 0开头为八进制 0乘于8乘于的0次方 2乘于8的一次方 所以020为16
0x开头为16进制
转换数值:
1.Number();
2.- * /
var a="20";
var b=a-10;
console.log(b);
parseInt(值,进制);
console.log(parseInt(10,2));//10的二进制 4 10*2的0次方 1*2的1次方
console.log(paeseInt(10.11))//取整为10
console.log(parseInt("20"));//20
<script type="text/javascript">
parseFloat() 函数可解析一个字符串,并返回一个浮点数
document.write(parseFloat("10"))
document.write(parseFloat("10.00"))
document.write(parseFloat("10.33"))
document.write(parseFloat("34 45 66"))
document.write(parseFloat(" 60 "))
document.write(parseFloat("40 years"))
document.write(parseFloat("He was 40"))
JS特点 变量提升:如果在函数内部,声明函数,会把该声明提升带函数顶端,只提升变量,不赋值。
function fun(){
console.log(num);
var num=10;
}
等同于:
funion fun(){
var num;
console.log(num);
Num=20;
}
function fn(a,b);
console.log(fn.length);形参数量 就是ab
console.log(arguments.length);实参数量 就是调用的数量
空类型:
null:变量不可能是null 需要手动设置 要解除对象的占用或引用时
undefined:定义之后未赋值 如var obj;console.log(obj);
全等===
等于==
区别:全等比较值和类型 等于比较值
in关键字最常用的是for in
var obj={
name:"我我我",
age:18
};
for(var k in obj){
console.log(typeof k);
}//输出为String类型
for in判断变量的对象的键
in方法2:
判断属性是否存在于对象
var obj={
name:"我我我",
age:18
};
var a="name" in obj;//name什么类型就怎么学比如String的要加双引号或者单引号
console.log(a);
注意:当in关键字操作数组时判断的是索引是否存在
所以var arr=[1,2,3,4];
console.log("0" in arr);输出的也是true
索引就是数组从0角标(自我理解)就是 1234 对应的索引是0123
数组也有固定的办法找到指定的数的 如果没有返回-1
var arr=[1,2,3,4];
console.log(arr.indexOf(3));返回2
创建一个时间对象
var a=new Date();//Date类型是专门用于将时间格式转为字符串的方法 有各种小方法可以看JS那么红皮书或者在我博客园将那些小方法整理
console.log(a);//输出的是时间 不是纯数字有英文告诉北京时间
对象的动态是指:在对象创建出来后为对象添加新的属性或者方法
var obj={
name:"刘德华",
age:50
};
obj.gender="male";
obj.sayHello=function(){
console.log("我想死你了");
}
obj.sayHello();
obj.sayHello=function(){方法}
obj.XXX=XXX ---
----1.如果XXX存在就是修改
----2.如果XXX不存在就是添加属性
获取对象的属性值:对象名[属性名]
隐式转换:转字符串类型
比如obj[0]=function(){console.log("我添加成功了")}
[]里的值会被转换成字符串
delete运算
delete关键字可以删除对象属性还有未使用var的变量
delete.变量名或者对象属性
如果删除的对象不存在返回true 删除是否成功false/true 如果删除的属性在原型中返回true
表达式1||表达式2
如果1是真返回1
如果1是假返回2
只有真真为真其他都为假
表达式1&&表达式2
如果表达式1为假,直接返回表达式1的值
如果表达式1为真,判断2是否是真,如果真返回表达式2如果假
只有假假都是假其他都是真
函数声明:
function a(){
//函数体
}
函数表达式:
var a=function b(){//b为函数名
函数名可以不写 但是写了只在函数内调用
}
创建新的函数:
var a=new function(){
}
DOM操作:增删改查
增:1.decument.createElment
2.oppendChild
删:1.removeChild
改:1.style
2.id
3.className
4.innerHTML
查:
1.getElementById
2.getElementsByTogName
3.getElementsByClassName
异常捕获语句:特征-一旦出现异常后面的代码就不会执行 想要执行就要进行异常处理
try catch finally
try{ 可能出现异常的代码,
throw"你的代码有毛病";//收到抛出异常信息
errMsg:"这里写错误信息";
errCode:-1;//这里写错误代码的返回值
}
catch X(参数){ 出现异常后的处理代码 }
X(){}
finally{不管出不出现错误都会执行
node.js里释放资源
}
语法异常无法捕获比如a++++++++;
面向对象自己的理解就是:解决问题时所需要的针对性性对象,比如洗衣服 找个女朋友洗 洗衣机洗
什么是对象?万物皆对象
什么是对象特征?用来描述对象的相关信息比如一个人的name age
什么是对象的行为?描述对象的行为比如一个人的行走吃喝
在JS种什么是对象?键值对的组合就是对象
如上例子的现实生活的特征就是JS里的属性
行为就是方法
prompt();//出现谈话框里面有可以输入的输入框
alert();//就谈话框不能点取消 取消掉它
confirm();//出现谈话框 可以取消掉它
true:除0数字 “something” Object(任何对象) 为true
false:0 "" undefined null为false
if判断时会把()内的值强行转换成boolean类型
var a="hello\"aaa\"";打印输出hello "aaa"
转成字符串类型:
变量+"" 变量+"任何一个字符串" toString
以下都可以转字符串:
var num=1111;
var bool=true;
console.log(typeof(String(boolean)));
console.log(typeof(num.toString));
Number转换:
var a=Number("222");
var b=Number(18.33);
boolean转换:
var a=boolean("222");
var b=boolean(18.33);
parseInt(变量);取整
var a=aaa3.14ss;取出来是3.14
parseFloat(变量);取浮点
for循环里 外循环控制行内循环控制列
break立刻停止本次循环 不在执行
continue跳出本次循环 进入下一个循环
值是固定的用while 语句
对具体值进行判断用switch case
其他用if if else if else else ....
do while 至少执行一次
var arr=[1,2,3];
console.log(arr[1]);
//给索引赋值
arr=["张飞"];
arr=["张飞1"];
function 函数名(){
载体;return;
return后面的值就是返回值
}
如果函数名相同 后面的函数会覆盖前面的函数
函数就是递归 就是自己调用自己
fn();
function fn(){
alert(111);
fn()
}
递归注意:递归必要要有跳出条件 不然是死循环
var i=1;
fn();
function fn(){
alert(111);
i++;
if(i>10){
return;
}
fn();
}
用递归写1-100的和
alert(a(100));
function a(n){
if(n<1){
return 0;
}
return n+a(n-1);
}
回调函数:将函数作为参数一样调用和使用 数调用其他函数叫回调函数
fn(test);
function fn(demo){
demo();
}
function test(){
console.log("我是被测试的函数");
}
什么时候用回调函数:
一般是定义一个规则来使用的 规则的传递只能用函数或回调函数来实现
console.log(fn(10,5,test1));
function fn(num1,num2,demo){
reurm demo(num1,num2);
}
function test1(a,b){
returm a+b;
}
function test1(a,b){
returm a-b;
}
对象的字面量:
var aaaa={ 东西 };
创建一个div并且设置一个样式 然后加到body标签中
Json的使用:
JS里的特点描述JS的数据 用来存东西
var json={
a:12,b:5,c=3
}
alert(json.a);//也可以写成alert(json['a']);JS里[]可以代替一切 .
json的角标不是数字是字母
json没有length的方法 没有长度那么循坏怎么用
用for in
for(var i in json){
alert(‘第’+i+'个东西:'+json[i]);
}
也可以像变量一样操作
兼容普遍用if else来处理
行间样式就是CSS代码写在HTML标签中 style只能操作行间样式
currentStyle获取非行间样式 只兼容IE
那么用if else
其他浏览器兼容用getComputedStyle