【前端学习笔记】JS学习基础
来源:互联网 发布:java中int的取值范围 编辑:程序博客网 时间:2024/05/22 15:51
入门——————————————————————————————————————-
希望把某个元素移除你的视线:
1、display:none; 显示为无
2、visibility:hidden; 隐藏
3、width \ height
4、透明度
5、left \ top
6、拿一个白色DIV盖住它
7、margin负值
JS中如何获取元素:
1、通过ID名称来获取元素:
document get element by id ‘link’
docuemnt.getElementById(‘link’);
2
……
事件:鼠标事件、键盘事件、系统事件、表单事件、自定义事件……
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠标抚摸一样的事件
……
onload 加载完以后执行……
window.onload = 事情
img.onload
body.onload
……
如何添加事件:
元素.onmouseover
函数:可以理解为-命令,做一些事~~
function abc(){// 肯定不会主动执行的!
……
}
1、直接调用:abc();
2、事件调用:元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数
元素.事件 = function (){};
测试:
alert(1); 带一个确定按钮的警告框
alert(‘ok’); ‘ok’ 字符串
alert(“ok”);
变量:
var li = document.getElementById(‘lis’);
var num = 123;
var name = ‘leo’;
a.removeAttribute(‘style’);//去除当前页面的附加样式,恢复初始样式
HTML 的属性操作:读、写———————————————————————
读操作:获取、找到
元素.属性名
写操作:”添加?”、替换、修改
元素.属性名 = 新的值
innerTHML用法—————————
oP.innerHTML //读取p里面所有的html代码oP.innerHTML = 123; //替换p里面所有的html代码
JS 不允许出现”-“—————————
padding-top => paddingTop
margin-left => marginLeft
判断条件—————————
// img/1.jpg
file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg
if( oImg.src == ‘img/1.jpg’ ){
不能做为判断条件:
1、所有的相对路径地址
img src
href
2、颜色值:color: red #f00 rgb() rgba()
修改float值————————————————-
oDiv.style.float = 'right'; //错误写法//正确用法oDiv.style.styleFloat = 'right'; // IE非标准oDiv.style.cssFloat = 'left'; //标准//IE非标准(styleFloat)//标准(cssFloat)//兼容写法if(navigator.userAgent.indexOf('MSIE')==-1 ){ oDiv.style.cssFloat = 'right';//标准}else{ oDiv.style.styleFloat = 'right';//IE}
设置开关——————————-
var onOff=true;
一般可以用来控制按钮的循环点击
cssText—————————
oDiv.style.cssText = ’ width:200px; height:200px; ‘;//会覆盖该字符串已经出现的属性
this——————————
this: 这个
this: 指的是调用 当前 方法(函数)的那个对象
function fn1(){this}// fn1(); this => window// oDiv.onclick = fn1; this => oDiv/*行间调用方法,this的区别:1.oDiv.onclick = function (){ fn1(); };fn1() 里的this => window2.<div onclick="fn1();"></div> fn1() 里的 this 指的是 window*/// window 是 JS “老大”// window.alert( this );function fn1(){alert( this );// window}// fn1();// window.fn1();
总结:this指向包含它的那个区域的老大(谁调用找谁)
HTML 标签属性、自定义属性—————————
var aBtn = document.getElementsByTagName('input');aBtn[0].abc = 123; // 自定义属性aBtn[0].abc = 456;
JS 可以为任何HTML元素添加任意个 自定义属性
JS数据类型—————————————————————
ECMAScript:标准、核心
HTML 标签类型:block、inline、inline-block、table……
JS中的数据类型:数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义
typeof() 判断数据类型
s.charAt(3) 返回字符串某位置的字符
var json = { name:’miaov’, age:5 }
json的定义
Number()方法—————————————————————————————
var a = '100';// alert( a+100 ); // '100100'// alert( Number(a) ); // 100var a1 = ' ';// alert( Number(a1) ); // 0var a2 = true;// alert( Number(a2) ); // true-1 false-0var a3 = [ 1 ];// alert( Number(a3) ); // 1 var a4 = null;// alert( Number(a4) ); // 0////////////////////////////////////////var json = {};// alert( Number(json) ); // NaNvar u;// alert( Number(u) ); // NaNvar a3 = function (){ alert(1); };// alert( Number(a3) ); // NaN
类型转换—————————————————————————————
显式类型转换(强制类型转换):
Number()parseInt()parseFloat()
隐式类型转换:
+: 200 + '3'//变成字符串- * / % : '200' - 3 //变成数字++ -- //变成数字> < //数字的比较 、字符串的比较! //取反,把右边的数据类型转成布尔值== //判断后转化为布尔值 alert( Number('……') );// NaN alert( '……'-9 ); //NaNalert( '2' == 2 ); //truealert( '10000000' > '9' ); //比较从第一位开始不相等的那一位元素 false// 数字的比较与字符串的比较// '1000000' '9'alert( '2' === 2 ); //类型和数值都要相等 false
isNaN()方法———————————————————————————–
JS中的数据类型:数字(NaN)、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义
var a = Number('abc');alert( a ); // NaN
NaN:not a number 不是个 数字 的 数字类型
alert( typeof (a) ); // number
一旦写程序中出现:NaN 肯定进行了非法的运算操作,例如
alert( '200px' - 100 );//NaN
NaN在if判断里 是 false
var a = NaN; if( a ){// alert( '真' );}else{// alert( '假' );}
var abc = []; alert( abc === abc );// true
NaN 与自己都不相等!!
var a = NaN;alert( a === a ); // false
window.isNaN();
返回布尔值
true:不是数字
false:是数字
alert( isNaN( '' ) ); //false alert( isNaN( [] ) ); //false alert( isNaN( [1] ) ); //false alert( isNaN( [1,2] ) ); //true alert( isNaN( ['1'] ) ); //false alert( isNaN( ['1','2'] ) ); //true alert( isNaN( {} ) ); //true alert( isNaN( '1.' ) ); //false alert( isNaN( '1..' ) ); //true alert( isNaN( '.1' ) ); //false alert( isNaN( '..1' ) ); //true alert( isNaN( 1. ) ); //false alert( isNaN( 1.. ) ); //报错 alert( isNaN( .1 ) ); //false alert( isNaN( ..1 ) ); //报错 alert( isNaN(function(){})); //true
函数传递参数———————————————————————————-
参数=JS的数据类型:
数字、字符串、布尔、函数、对象、未定义
重用代码————————————————————————————–
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素
2、把核心主程序实现,用函数包起来
3、把每组里不同的值找出来,通过传参实现
作用域定义————————————————————————————
域:空间、范围、区域……
作用:读、写
script :
全局变量、全局函数
自上而下
函数
由里到外
浏览器解析步骤———————————————————————————–
“JS解析器”两大步骤
1)预解析“找一些东西” :var、function、参数
a = …
所有的变量,在正式运行代码之前,都提前赋了一个值:未定义
fn1 = function fn1(){ alert(2); }
所有的函数,在正式运行代码之前,都是整个函数块
JS 的预解析
遇到重名的:只留一个
变量和函数重名了,就只留下函数
2)逐行解读代码:
表达式:= + - * / % ++ – ! 参数……
表达式可以修改预解析的值!
解析实例——————————————————————————
var a = 1;function fn1(){alert(a); // undefinedvar a = 2;}fn1();alert(a); // 1
var a = 1;function fn1(){alert(a); // 1a = 2;}fn1();alert(a); // 2
var a = 1;function fn1(a){alert(a); // undefineda = 2;}fn1();alert(a); // 1
var a = 1;function fn1(a){alert(a); // 1a = 2;}fn1(a);alert(a); // 1
想要获取函数内的值——————————————————————
1)全局变量
var str = ”;
function fn1(){
var a = ‘大鸡腿~’;
str = a;
}
fn1();
alert( str );
2)函数
function fn2(){
var a = ‘9999999克拉钻石23456789’;
fn3(a);
}
fn2();
function fn3(a){
alert(a);
}
switch控制流程———————————————————————————-
switch( str ){
case ‘js’ :
alert( ‘js’ ); break;
case ‘html’ :
alert( ‘html’ ); break;
default :
alert( str );
}
真假的问题—————————————————————————-
数据类型-数字(NaN)、字符串、布尔、函数、对象(elem、[]、{}、null)、未定义
真:非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假:0、NaN、空字符串”、false、不能找到的元素、null、未定义
return:返回值————————————————————————
1) 函数名+括号:fn1() ==> return 后面的值;
2) 所有函数默认返回值:未定义;
3) return 后面任何代码都不执行了;
arguments => [ 1,2,3 ] —— 实参的集合———————————————-
alert( arguments );
alert( arguments.length );
alert( arguments[arguments.length-1] );
当函数的参数个数无法确定的时候:用 arguments
// alert( sum( 1,2,3 ) ); // 6
// alert( sum( 1,2,3,4 ) ); // 10
获取样式—————————————————————————————
getComputedStyle( oDiv ).width // IE6 7 8 不兼容oDiv.currentStyle.width // 标准浏览器不兼容兼容写法function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; }
获取到的是计算机(浏览器)计算后的样式
background: url() red …… 复合样式(不要获取)
backgroundColor 单一样式(不要用来做判断)
不要有空格
不要获取未设置后的样式:不兼容
定时器:时间概念——————————————————————————–
var timer = setInterval( 函数, 毫秒 );//重复执行(发动机)clearInterval( timer );//清除定时器var timer = setTimeout( 函数, 毫秒 );//执行一次(炸弹)clearTimeout( timer );
系统时间对象————————————————————————————
var myTime=new Date(); // 当前系统的时间对象// myTime typeof objectvar iYear = myTime.getFullYear();var iMonth = myTime.getMonth()+1; //月份要+1var iDate = myTime.getDate();var iWeek = myTime.getDay();var iHours = myTime.getHours();var iMin = myTime.getMinutes();var iSec = myTime.getSeconds();
倒计时———————————————————————————————————–
计算时间戳两种方法
数字形式:new Date( 2013,7,10,12,12,12 );//注意月份的位置上比实际值大1
字符串形式:new Date(‘June 10,2013 12:12:12’);
t=时间长度换算时间方法:天:Math.floor(t/86400)时:Math.floor(t%86400/3600)分:Math.floor(t%86400%3600/60)秒:t%60
字符串常用方法总结————————————————————————
var str = '前端基础-WWW.reven.com';str.charAt(1); // '端'str.charCodeAt(1); // 31471String.fromCharCode(21069,31471); // '前端'str.indexOf('e',11); // 12str.lastIndexOf('o'); // 16'1000' < '2' // true'1000' > 2 // truestr.substring(0, 4); // '前端基础' 参数先全变成正数,小的放前面,大的放后面, 取[|a|,|b|)的字符返回 a=b返回空str.slice(-3); // 'com' 取[a,b)的字符返回 a=b返回空str.toUpperCase(); // '前端基础-WWW.REVEN.COM'str.toLowerCase(); // '前端基础-www.reven.com'str.split('.', 3); // [ '前端基础-WWW','reven','com' ]var arr = [ 'www', 'reven', 'com' ];arr.join('.'); // 'www.reven.com'
-数组方法————————————————————————————
var arr=[1,2,3,4,5];//创建数组的一般方法var arr1=new Array(6);//创建长度为6的数组arr.push(6);//将参数插入arr数组的尾部,返回数组长度arr.unshift(0);//将参数插入arr数组的头部,返回数组长度arr.pop(6);//将最后一位元素弹出数组,返回弹出的元素arr.shift(0);//将第一位元素弹出数组,返回弹出的元素arr.push(arr.shift());//去头放尾arr.unshift(arr.pop());//去尾放头arr.slice(0,4) //取下标范围[a,b)的元素返回 a=b返回空arr.splice(0,2,'b');//从0位开始去掉2个元素,第三个参数是替换被去掉的元素,返回的是替换的元素和去掉的元素个数//利用splice()方法进行数组去重function unique(arr){ for(var i=0;i<arr.length;i++) { for(var j=i+1;j<arr.length;j++) { if(arr[i]===arr[j]) { arr.splice(j,1); j--; } } }return arr;}
arr2.sort(function(a,b){return a-b});//sort()是对数组做出字符串顺序排列,加入function(a,b){return a-b}是把数组元素1、2顺序当做a、b,a-b<0就小大顺序,反之大小顺序arr3.sort(function(a,b){return parseInt(a)-parseInt(b);});//当有其他字符时的排序方法arr2.sort(function(a,b){return Math.random()-0.5;});//将数组随机排序arr.concat(arr1,arr2);//数组拼接arr.reverse();//顺序翻转str.split('').reverse().join();//字符串的顺序翻转
————随机数公式————-
//在0~10内随机alert(Math.round(Math.random()*10));//Math.round()是四舍五入函数//在5~10内随机alert(Math.round(Math.round(Math.random()*5+5)));//从x~y之间随机var x=20;var y=40;var outPut=Math.round(Math.round(Math.random()*(y-x)+x));//随机数组公式function createRandomArr(begin,num)//begin是数组最小数,num是数组长度{ var arr = []; for(var i = 0; i < num ;i++) { arr[i] = begin+i; } var resultArr = []; for(var i = 0; i < num ;i++) { var arrLen = arr.length; resultArr.push(arr.splice(Math.floor(Math.random()*arrLen),1)[0]); } return resultArr;}
- 【前端学习笔记】JS基础
- 【前端学习笔记】JS学习基础
- 前端学习笔记3-js
- js基础学习笔记
- JS基础学习笔记
- JS基础学习笔记
- 前端基础学习-css基础笔记
- 前端学习笔记--css基础的基础
- 前端学习 HTML、CSS、JS基础
- 从零开始,学习web前端之js基础
- 前端学习: JS学习
- [前端JS学习笔记]JavaScript 数组
- [前端JS学习笔记]JavaScript CallBack
- [前端JS学习笔记]JavaScript function
- [前端JS学习笔记]JavaScript prototype 对象
- [前端JS学习笔记]JavaScript 数组
- [前端JS学习笔记]JavaScript CallBack
- [前端JS学习笔记]JavaScript function
- Java SE入门 Lesson 01
- Leetcode 222: Count Complete Tree Nodes
- Long CLick 和Long Press区别
- 图像处理之霍夫变换(直线检测算法)
- Android主题切换—夜间/白天模式探究
- 【前端学习笔记】JS学习基础
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- 飞思卡尔智能车准备篇
- STM32之定时器prescaler
- c++ char[] 与 string 转换
- c++ 进程注入代码
- C++中使用cin之后再使用getline出问题的解决办法!
- js的replaceAll() (转)
- [机器学习实战]--朴素贝叶斯过滤垃圾邮件