js引入方式:
1、嵌入js的方式:直接在页内的script标签内书写js功能代码。
<script type="text/javascript">alert('hello')</script>
2、外联式引入js:以相对路径的方式引入本地js文件,实现H5、CSS、JS分离。
<script type="text/javascript" src="hello.js"></script>
js基本语法:
定义变量:使用var关键字,区分大小写。
var a = 123;
使用js操作属性:
1 <script type="text/javascript"> 2 window.onload = function(){ 3 //通过获取一个标签的id来联系标签 4 var oDiv = document.getElementById('div1');
var oInput01 = document.getElementById('input01');
var aLi = documentsgetElementsByTagName('li');//获取一组标签,使用时可通过下标确定具体使用哪一个 5 //对目标标签进行style属性重写 6 oDiv.style.color = 'red';
aLi[2].style.backgroundColor = 'blue'; 7 var val01 = oInput01.value; //获取输入框内的值
9 oDiv.className = 'box02'; //操作类属性,注意class写法要写成className
10 oDiv.href = '1.css'; //为其引入新的样式文件
11 }
12</script>
还可以使用方括号来操作属性:oDiv.style[attr] = 'red';
以上function(){ } 就是js的函数书写形式。
自定义函数时写为:function change02(){ oDiv.className = 'sty02'; }
函数中可以使用return返回函数结果,也可以只使用一个单纯的return结束函数运行。
window.onload会使页面加载完后再加载其中的内容,注意写代码时的顺序。
匿名函数:
1 oDiv.onclick = myalert; 2 function myalert(){ 3 alert('hello!'); 4 } 5 6 /*匿名函数简化代码,优化步骤 7 将上述代码改写成匿名函数的形式。*/ 8 9 oDiv.onclick = function (){ 10 alert('hello!'); 11 }
函数传参:
1 changestyle('fontSize','50px'); 2 3 function changestyle(styl,val){//会被预解析哦 4 oDiv.style[styl] = val; 5 }
这样会将函数中的fontsize传给styl,将50px传给val。
JS中的函数预解析:
1 alert(a); //不会报错但是会弹出undefined,相当于已声明未赋值。 2 //alert(c);开发工具里会报错(c没有声明) 3 var a = 123; 4 5 myalert();//在定义函数前使用函数不会弹出undefine,因为js会将函数预解析。 6 7 function myalert(){ 8 alert('hello!'); 9 }
js加载时遇到函数,会将函数的声明和定义全部提前,因此可以在函数定义的前面调用函数。
函数中的条件语句格式:if{ },多重条件语句:if{ } else if { }或switch(true){ case:true:*****;break;default:****;}
函数中的for循环语句:for(初始值;条件;变化值){ *** };
var aRr = [1,2,3,4,3,4,5,7,4,5,7,3,9,5,6]; var aRr2 = []; for (var i=0;i<aRr.length;i++) //以整个数组为范围进行循环,实现利用循环达到去重效果 { if (aRr.indexOf(aRr[i])==i) //通过indexOf返回元素第一次出现的位置来去重 { aRr2.push(aRr[i]);//将不重复元素放到新的空数组 } }
JS中的数组操作:
创建数组:var aRr1 = new Array(1,2,3,'abc')或 var aRr2=[1,2,3,'abc']多维数组使用嵌套[ [数组1],[数组2],[数组3] ];
求数组长度:aRr.length
获取数组下标元素:aRr.[n] aRr1.[n][n]
拼接字符串:sTr = aRr.join("-") 使用-隔开元素,拼接结果为数组类型。
从末尾追加元素:aRr.push(val)
删除末尾元素:aRr.pop()
从头部插入元素:aRr.unshift(0)
删除头部元素:aRr.shift()
反转元素:aRr.reverse()
返回元素第一次出现的位置:aRr.indexOf(val)
从第n个元素开始删除m个元素,含n:aRr.splice(n,m)
删除完后从删除位置再补充进去几个元素:aRr.splice(n,m,'val1','val2',.........)
JS中的数值和字符串操作:
执行+运算时,若两个变量都为数值,按正常数学运算执行,若有一个变量的数字是字符串类型,运算时按拼接字符串运算执行。
数值运算可将字符型数字转换成数值行:parseInt(sTr) parseFloat(sTr),
字符串的第n个字符:sTr.charAt(0)
获取字符串中某个字符的下标位置:sTr.indexOf( 'str' ),没有时返回-1;
截取字符串中位置为n到m的元素:sTr.substring(n,m),前包后不包,后不写默认到尾;
转大写:sTr.toUpperCase();
转小写:sTr.toLowerCase();
数值运算返回的NaN:
NaN即Not a Number,
数字字符混合的情况下转换为数值时,开头就是字符的转换结果为NaN,开头是数字的只转换出数字部分,字符之后去除。
使用isNaN判断字符型数字时,返回false,不严谨。
简易计算器案例:
window.onload = function(){ var oInput01 = document.getElementById('input01'); var oInput02 = document.getElementById('input02'); var oBtn = document.getElementById('btn'); var oFuhao = document.getElementById('fuhao'); oBtn.onclick = function(){ var num01 = oInput01.value; var num02 = oInput02.value; var fuhao = oFuhao.value; if (num01=="" || num02=="") { alert('输入框不能为空1'); return; } if (isNaN(num01) || isNaN(num02)) { alert('请输入一个数字!'); return; } switch(fuhao){ case 'add': //这里没有隐式转换,若有数字用‘数字’的字符串方式。 alert((parseFloat(num01)*100+parseFloat(num02)*100)/100); break; case 'subtract': alert((parseFloat(num01)*100-parseFloat(num02)*100)/100); break; case 'multiply': alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000); break; case 'divide': alert(((parseFloat(num01)*100)/(parseFloat(num02)*100))/10000); break; } } }
<h1>计算器</h1> <input type="text" name="" id="input01"> <select id="fuhao"> <option value="add">+</option> <option value="subtract">-</option> <option value="multiply">*</option> <option value="divide">/</option> </select> <input type="text" name="" id="input02"> <input type="button" name="" value="点击计算" id="btn">