javascript入门基础篇重点 第五节
2016-10-24 19:51
274 查看
数字相关方法 （toString()/toFixed()、Math对象、parseInt等解说）
数字相关的方法：
number.toString( x ) //x 进制的字符串
number.toFixed( x ) //保留 x 位小数
Math.random() // [0,1) 的随机数 如何求某个范围内的随机数呢？
Math.abs(number) //绝对值
Math.ceil(number) //向上取整(有小数，小数不是0整数就加1)
Math.floor(number) //向下取整(舍去小数剩整数)
Math.round(number) //四舍五入
Math.min( 多个参数 ) //参数中的最小值
Math.max( 多个参数 ) //参数中的最大值
parseInt(string) //强制取整
parseFloat(string) //强制取数字(包含小数)
Number() //true与false变成1和0 null是0
例如：
Math 数学函数
console.log(Math.random());//[0,1)
如何获取10-30直接的随机数？
console.log(getRandom(20,30));
function getRandom(start,end){
return Math.random()*(end-start)+start;---->取某个范围内随机数公式start为开始数end为范围结束数
}
41
console.log(Math.floor(23.0));//向下取整
console.log(Math.ceil(23.0001));//向上取整
console.log(Math.round(23.53));//四舍五入取整
console.log(Math.abs(-34));//取绝对值
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
JSON对象解说与for in遍历讲解 （更深层次理解 [ ] 的使用）
JSON与for in循环：
var json = {name:”Kery”,age :18}
var json2 = {“name”:”Kery”,”age”:18}
for in 遍历：(可以获取对象里面的所有属性和值)
for(var key in document){
console.log(key+”===”+document[key]);
}
注意：[]里面的内容必须是一个字符串！
什么是json? 是对象(object)中的一种
var json = {
"name":"Kery", 其中name,age,asy为key键而kery,18,function(){};为value值并且键在后台传输数据的时候，就
"age":18, 必须打""，使其变为字符串，可以通过[]拿到它的值
"say":function(){ 例如：console.log(json["say"]());并且在[]号后面添加()号使"say"里面函数执行
alert(1);
},
};
例如：
console.log(JSON.stringify(json)+"-===-"+typeof json);
根据json对象中的键获取值
console.log(json.name+"=="+json.age+"==="+json.say());
能不能够获取对象里面的所有属性值呢？ for in遍历
for(var key in json){//josn为要遍历对象id名
console.log(key+"===="+json.key);x错误
console.log(key+"===="+json[key]);------->结果：打印里面josn里面函数所有的字符
} |
拿到josn里面的value值，不能用josn.key，因为这样拿到是名字为key的键而不是value值，然而josn里面并 没有名字为key的键所以返回undefind
for(var key in document){
document.write(key+"==="+document[key]+"<br/>");
}
封装id和css样式
function $(id){
return document.getElementById(id);
}
使用：$("xxx")
封装css样式 封装为css({},obj)
function css(json,obj){
obj为要的对象的id名
for(var key in obj) {
obj.style[key]=josn[key];
| |
key键(css属性) value(css属性设置的值)
}
};
使用：css({
width:"100px",
height:"100px",
background:"yellow",
},xxx)其中xxx改变css样式id名
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
获取对象节点样式值（主流浏览器与IE6,7,8获取样式的兼容问题）
如何获取元素节点的样式？
.style 只能获取内联样式，其他样式怎样获取？
getComputedStyle(obj).attr; IE9+
obj.currentStyle.attr IE6,7,8做了兼容
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),是只读的。
以前获得某个css样式id时做法：
function $(id){
return document.getElementById(id);
}
例如：
$("xxx").style.width;"100px";--------->此种方法只能拿到内联样式，可读可改！
getComputedStyle(obj).attr;
var boxdom=$("xxx");
getComputedStyle(boxdom).width-------->可以从外联样式里面拿到宽度，但此种方式只能读不能改
getComputedStyle只能在主流浏览器里面使用而在IE678要使用currentStyle
两种方式兼容写法：
function getStyle(obj,attr){其中obj为样式id的名字而attr是样式属性
if( obj.currentStyle){//undefind
return obj.currentStyle[attr];
}else{//主流浏览器
getComputedStyle(obj)[attr];
}
};
第二种兼容写法return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
使用：alert(getStyle(boxdom,"width"));获得宽
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
链式调用实现的原理（如$("#id").html(html).css("background","red")）
例如：
<style type="text/css">
*{padding:0;margin:0;}
#box{width:100px;height:100px;border:1px solid red;}
</style>
</head>
<body>
<div id="box">1111111111</div>
<script type="text/javascript">
//闭包 独立的生命周期体，解决全局变量冲突问题 模块模式
/*var Tab = (function(){
function table(){
alert("你好呀..");
};
return {"t":table};
})();
alert(Tab.t());*/结果：你好呀...........undefined
//闭包获取内部变量
//记住一点：突破作用域，把内部东西暴露出去，就用return
/*
var a = "全局变量";
var f = function(){
var b = "局部变量";
var c = function(){
var d = "内部变量";
return {res:d};
};
return c;
};
var result = f()();
alert(result.res);结果：内部变量
*/
//JQuery中的链式调用 $("#id").html("你好呀").css({"width":"200px","height":"300px"});
/*function $(id){
var dom = document.getElementById(id);
var json = {
html:function(fff){增添一个fff形参
dom.innerHTML = html;用实参xxxx改变dom里面原有参数绑定dom
return this;
},
css:function(key,value){
dom.style[key] = value;
return json；------》当后面执行代码要添加css或html时则要把json里面代码复制多次，不灵活！可以改为return
this;
return this//(this返回指明当前是什么调用css方法对象);
}
};
return json;
};*/
$("box").html("xxxxxx").css("width","200px");html("xxxxxx")替换div里面的文本，并且xxxx是写入实参，要在html:function(fff)里面添加一个名为fff形参，使其与dom元素绑定，从而使形参变为实参里面输入文本，并用该文本改变dom里面原有文本！
/*
兼容写法：
function $(id){
var dom = document.getElementById(id);
var json = {
html:function(html){
dom.innerHTML = html;
return this;
},
css:function(){
var first = arguments[0];//获取第一个参数
if(arguments.length==1){//如果传入进来的是对象
for(var key in first){
dom.style[key] = first[key];
}
}else{
dom.style[first] = arguments[1];
}
return this;
}
};
return json;
}
$("box").html("GFluckysky....").css({"width":"200px","border":"10px solid red","background":"green","font-$keywordIndex{35}":"20px"});
*/
</script>
</body
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
回调函数的作用 （封装插件必用）
为什么会使用回调函数？
因为想在函数调用的时候
a7e0
动态的进行某些操作，而不是在原函数中写死，所以，在调用的时候，就需要传一个函数数据类型作为具体操作的内容
<style type="text/css">
*{padding:0;margin:0;}
div{width:100px;height:100px;background:purple;margin:10px auto;text-align:center;line-height:100px;color:pink;$keywordIndex{2}:pointer;}
</style>
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<script type="text/javascript">
//回调函数的理解？--> 封装插件或者组件开发
window.onload = function(){
function $(id){
return document.getElementById(id);
}
//获取三个dom对象
var box1 = $("box1");
var box2 = $("box2");
var box3 = $("box3");
/*
box1.onclick = function(){
this.style.width = "200px";
};
box2.onclick = function(){
this.style.height = "200px";
};
box3.onclick = function(){
this.style.background = "gray";
};*/
//第二种方法
/*
function clickme(id,value){
var box = document.getElementById(id);
box.onclick = function(){
this.style.background = value;------>此种方法写死只能改某一种参数(例如：旁边只能修改background),非常不方便
} 封装好的插件最大目标是要能使用户随意修改任何一种参数将主动权交给用户
};
clickme("box1","yellow");
clickme("box2","orange");
clickme("box3","pink");
*/
//第三种 函数是一个数据类型
/*
想让第一个盒子改变宽度与高度
第二个盒子改变背景颜色为黑色，字体颜色为白色
第三个盒子边框为“10px solid red”
*/
function clickme(id,callback){callback----》回调函数名
var box = document.getElementById(id);
box.onclick = function(){
//this? ---> dom对象 falsely-->undefined false 0 NaN fase "" '' null
if(callback)callback(this);----》this让回调函数与要改变样式的id挂钩
}
};
使用方法：clickme("id","callback");==clickme("id",function(){});因为clickme回调函数用起来就是回调一个匿名函数
//调用方法 --> 调用
即function(){};
clickme("box2",function(obj){
//alert(getComputedStyle(obj).width);
obj.style.width = "200px";
obj.style.height = "200px";
});
clickme("box1",function(obj){
//alert(getComputedStyle(obj).width);拿到宽度；
obj.style.border = "10px solid yellow";
});
clickme("box3");//返回undefind
};
</script>
</body>
数字相关的方法：
number.toString( x ) //x 进制的字符串
number.toFixed( x ) //保留 x 位小数
Math.random() // [0,1) 的随机数 如何求某个范围内的随机数呢？
Math.abs(number) //绝对值
Math.ceil(number) //向上取整(有小数，小数不是0整数就加1)
Math.floor(number) //向下取整(舍去小数剩整数)
Math.round(number) //四舍五入
Math.min( 多个参数 ) //参数中的最小值
Math.max( 多个参数 ) //参数中的最大值
parseInt(string) //强制取整
parseFloat(string) //强制取数字(包含小数)
Number() //true与false变成1和0 null是0
例如：
Math 数学函数
console.log(Math.random());//[0,1)
如何获取10-30直接的随机数？
console.log(getRandom(20,30));
function getRandom(start,end){
return Math.random()*(end-start)+start;---->取某个范围内随机数公式start为开始数end为范围结束数
}
41
console.log(Math.floor(23.0));//向下取整
console.log(Math.ceil(23.0001));//向上取整
console.log(Math.round(23.53));//四舍五入取整
console.log(Math.abs(-34));//取绝对值
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
JSON对象解说与for in遍历讲解 （更深层次理解 [ ] 的使用）
JSON与for in循环：
var json = {name:”Kery”,age :18}
var json2 = {“name”:”Kery”,”age”:18}
for in 遍历：(可以获取对象里面的所有属性和值)
for(var key in document){
console.log(key+”===”+document[key]);
}
注意：[]里面的内容必须是一个字符串！
什么是json? 是对象(object)中的一种
var json = {
"name":"Kery", 其中name,age,asy为key键而kery,18,function(){};为value值并且键在后台传输数据的时候，就
"age":18, 必须打""，使其变为字符串，可以通过[]拿到它的值
"say":function(){ 例如：console.log(json["say"]());并且在[]号后面添加()号使"say"里面函数执行
alert(1);
},
};
例如：
console.log(JSON.stringify(json)+"-===-"+typeof json);
根据json对象中的键获取值
console.log(json.name+"=="+json.age+"==="+json.say());
能不能够获取对象里面的所有属性值呢？ for in遍历
for(var key in json){//josn为要遍历对象id名
console.log(key+"===="+json.key);x错误
console.log(key+"===="+json[key]);------->结果：打印里面josn里面函数所有的字符
} |
拿到josn里面的value值，不能用josn.key，因为这样拿到是名字为key的键而不是value值，然而josn里面并 没有名字为key的键所以返回undefind
for(var key in document){
document.write(key+"==="+document[key]+"<br/>");
}
封装id和css样式
function $(id){
return document.getElementById(id);
}
使用：$("xxx")
封装css样式 封装为css({},obj)
function css(json,obj){
obj为要的对象的id名
for(var key in obj) {
obj.style[key]=josn[key];
| |
key键(css属性) value(css属性设置的值)
}
};
使用：css({
width:"100px",
height:"100px",
background:"yellow",
},xxx)其中xxx改变css样式id名
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
获取对象节点样式值（主流浏览器与IE6,7,8获取样式的兼容问题）
如何获取元素节点的样式？
.style 只能获取内联样式，其他样式怎样获取？
getComputedStyle(obj).attr; IE9+
obj.currentStyle.attr IE6,7,8做了兼容
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),是只读的。
以前获得某个css样式id时做法：
function $(id){
return document.getElementById(id);
}
例如：
$("xxx").style.width;"100px";--------->此种方法只能拿到内联样式，可读可改！
getComputedStyle(obj).attr;
var boxdom=$("xxx");
getComputedStyle(boxdom).width-------->可以从外联样式里面拿到宽度，但此种方式只能读不能改
getComputedStyle只能在主流浏览器里面使用而在IE678要使用currentStyle
两种方式兼容写法：
function getStyle(obj,attr){其中obj为样式id的名字而attr是样式属性
if( obj.currentStyle){//undefind
return obj.currentStyle[attr];
}else{//主流浏览器
getComputedStyle(obj)[attr];
}
};
第二种兼容写法return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
使用：alert(getStyle(boxdom,"width"));获得宽
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
链式调用实现的原理（如$("#id").html(html).css("background","red")）
例如：
<style type="text/css">
*{padding:0;margin:0;}
#box{width:100px;height:100px;border:1px solid red;}
</style>
</head>
<body>
<div id="box">1111111111</div>
<script type="text/javascript">
//闭包 独立的生命周期体，解决全局变量冲突问题 模块模式
/*var Tab = (function(){
function table(){
alert("你好呀..");
};
return {"t":table};
})();
alert(Tab.t());*/结果：你好呀...........undefined
//闭包获取内部变量
//记住一点：突破作用域，把内部东西暴露出去，就用return
/*
var a = "全局变量";
var f = function(){
var b = "局部变量";
var c = function(){
var d = "内部变量";
return {res:d};
};
return c;
};
var result = f()();
alert(result.res);结果：内部变量
*/
//JQuery中的链式调用 $("#id").html("你好呀").css({"width":"200px","height":"300px"});
/*function $(id){
var dom = document.getElementById(id);
var json = {
html:function(fff){增添一个fff形参
dom.innerHTML = html;用实参xxxx改变dom里面原有参数绑定dom
return this;
},
css:function(key,value){
dom.style[key] = value;
return json；------》当后面执行代码要添加css或html时则要把json里面代码复制多次，不灵活！可以改为return
this;
return this//(this返回指明当前是什么调用css方法对象);
}
};
return json;
};*/
$("box").html("xxxxxx").css("width","200px");html("xxxxxx")替换div里面的文本，并且xxxx是写入实参，要在html:function(fff)里面添加一个名为fff形参，使其与dom元素绑定，从而使形参变为实参里面输入文本，并用该文本改变dom里面原有文本！
/*
兼容写法：
function $(id){
var dom = document.getElementById(id);
var json = {
html:function(html){
dom.innerHTML = html;
return this;
},
css:function(){
var first = arguments[0];//获取第一个参数
if(arguments.length==1){//如果传入进来的是对象
for(var key in first){
dom.style[key] = first[key];
}
}else{
dom.style[first] = arguments[1];
}
return this;
}
};
return json;
}
$("box").html("GFluckysky....").css({"width":"200px","border":"10px solid red","background":"green","font-$keywordIndex{35}":"20px"});
*/
</script>
</body
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
回调函数的作用 （封装插件必用）
为什么会使用回调函数？
因为想在函数调用的时候
a7e0
动态的进行某些操作，而不是在原函数中写死，所以，在调用的时候，就需要传一个函数数据类型作为具体操作的内容
<style type="text/css">
*{padding:0;margin:0;}
div{width:100px;height:100px;background:purple;margin:10px auto;text-align:center;line-height:100px;color:pink;$keywordIndex{2}:pointer;}
</style>
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<script type="text/javascript">
//回调函数的理解？--> 封装插件或者组件开发
window.onload = function(){
function $(id){
return document.getElementById(id);
}
//获取三个dom对象
var box1 = $("box1");
var box2 = $("box2");
var box3 = $("box3");
/*
box1.onclick = function(){
this.style.width = "200px";
};
box2.onclick = function(){
this.style.height = "200px";
};
box3.onclick = function(){
this.style.background = "gray";
};*/
//第二种方法
/*
function clickme(id,value){
var box = document.getElementById(id);
box.onclick = function(){
this.style.background = value;------>此种方法写死只能改某一种参数(例如：旁边只能修改background),非常不方便
} 封装好的插件最大目标是要能使用户随意修改任何一种参数将主动权交给用户
};
clickme("box1","yellow");
clickme("box2","orange");
clickme("box3","pink");
*/
//第三种 函数是一个数据类型
/*
想让第一个盒子改变宽度与高度
第二个盒子改变背景颜色为黑色，字体颜色为白色
第三个盒子边框为“10px solid red”
*/
function clickme(id,callback){callback----》回调函数名
var box = document.getElementById(id);
box.onclick = function(){
//this? ---> dom对象 falsely-->undefined false 0 NaN fase "" '' null
if(callback)callback(this);----》this让回调函数与要改变样式的id挂钩
}
};
使用方法：clickme("id","callback");==clickme("id",function(){});因为clickme回调函数用起来就是回调一个匿名函数
//调用方法 --> 调用
即function(){};
clickme("box2",function(obj){
//alert(getComputedStyle(obj).width);
obj.style.width = "200px";
obj.style.height = "200px";
});
clickme("box1",function(obj){
//alert(getComputedStyle(obj).width);拿到宽度；
obj.style.border = "10px solid yellow";
});
clickme("box3");//返回undefind
};
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript入门基础篇重点 第十节
- javascript入门基础篇重点 第一节
- javascript入门基础篇重点 第三节
- javascript入门基础篇重点 第六节
- javascript入门基础篇重点 第七节
- javascript入门基础篇重点 第二节2.
- javascript入门基础篇重点 第十六节----正则表达式
- JavaScript学习基础篇【第1篇】: JavaScript 入门
- JavaScript极简入门教程（一）：基础篇
- JavaScript极简入门教程（一）：基础篇
- html5基础入门学习教程之javascript基础篇
- AJAX技术入门 第五节 Javascript高级知识
- javascript入门教程基础篇
- python从入门到精通之路-基础篇分享
- JavaScript的RequireJS库入门指南
- javascript 下拉菜单 个人博客入门学习
- SQL Server 2012入门T-SQL基础篇:总览
- 接上一篇javascript入门
- SQL Server 2012入门T-SQL基础篇:(9)Insert语句
- java入门-基础篇1认识java