前端---JS介绍一
JavaScript:页面行为,部分动画效果,页面与用户的交互,页面功能.
JS嵌入页面的方式
1:行间事件(主要用于事件)
<input type="button" name="" onclick="alert('ok!');">
2:页面script标签嵌入
<script type ="text/javascript">
alert("ok!")
</script>
3:外部引入
<script type="text/javascript" src="js文件"></script>
js变量,数据类型及基本语法规范
javascript是一种弱语言,其变量类型由它的值来决定
var iNum=123;
var sTr = 'sad';
//同时定义多个变量,用","隔开,公用一个'var'
var iNum=45, sTr='qwe', sCount=58;
变量的命名名规范:
1:区分大小写
2:第一个字符必须是字母,下划线(_)或者'$'
3:其他字符可以是字母,下划线,美元符或数字
变量与函数预解析:
javascript解析过程分为两个阶段,先是编译阶段,然后是执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明,将它赋值为undenfined.
<script type="text/script">
fnAlert(); //弹出hello
alert(iNum); //弹出undefined
function fnAlert(){
alert('hello world')
}
var iNum = 123;
</script>
函数传参JavaScript的函数中可以传递参数
<script type="text/jacript">
function fnAlert(a){
alert(a)
}
fnAlert(123456)
</script>
函数'return'关键字的作用
1:返回函数中的值或对象
2:j结束函数的运行
z-index:2; 数值越大,则距离我们越近;
<style>
.div1{
width: 500px;
height: 500px;
position:absolute;
background: pink;
left: 0;
top: 0;
/* 数值越大,则距离我们更近 */
z-index: 2;
}
</style>
条件语句
条件运算符
==, ===, >, >=, <, <=, !=, &&(而且), || (或者), !(否)
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01 > iNum02){
sTr = "大于";
}
else{
sTr = "小于";
}
alert(sTr);
多重if else语句
var iNow = 1;
if(iNow == 1){
........
}
else if(iNow == 2){
.....;
}
else{
............;
}
获取元素的方法:
可以通过内置对象document上的getElementById方法来获取页面上设置的id属性元素,获取到的是一个html对象,然后将它赋值给一个变量,如:
<script type="text/javascript">
var oDiv = docuemnt.getElementById("div1")
</script>
.......
<div id="div">这是一个div元素</div>
注意:因为javascript是从上往下运行的,javascript写在元素的上面会出错.
解决办法:
第一种方法:将javascript放到页面最下边
第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完成后才会执行
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
................
<div id="div1"> 这是一个div元素</div>
操作元素属性:
var 变量 = 元素.属性名(读取属性)
元素.属性名 = 新属性值(改写属性)
属性名在js中的写法
1:html属性和js里面的属性写法一样
2:"class"属性写成"classNmae"
3:"style"属性里面的属性,
<script type = "text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById("link1);
// 读取属性
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = "red";
oA.style.fontSize = sValue;
}
</script>
innerHtml:可以读取或写入标签包裹的内容
<script type="text/javascript">
window.onload=function(){
var = oDiv = document.getElementById('div1')
// 读取
var sTxt = oDiv.innerHTML;
//写入
oDiv.innerTHML = '写入内容';
}
</script>
事件属性及匿名函数
<script type="text/javascript">
window.onload = function(){
var oBtn = focument.getElementById("btn1")
oBtn.onclick = myalert;
function myalert(){
alerty("ok!")
}
}
</script>
匿名函数:
<script type ="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1");
oBtn.onclick = function(){
alert("ok!")
}
}
</script>
console调试:console.log()
for循环:
<script type = "text/javascript">
for(var i =0;i<99; i++){
console.log(i)
}
</script>
定时器:
//开启单次定时器
dan = null
setTimeout(function(){
dan =alert("XXX")
},2000)
// 关闭单次定时器
clearTimeout(dan)
//开启多次定时器
duo =null
duo = setInterval(function(){
alert("XXX")
},2000)
// 关闭多次定时器
clearInterval(duo)
数组的操作方法:
获取数组的长度:alist.length
使用下标操作数组的某个数据: alist[0]
join()将数组成员通过一个分隔符合并成字串: alist.join("-")
push():从数组最后增加成员
pop():删除数组最后一个成员
reverse():将数组反转
indexOf()返回数组中元素第一次出现的索引值
splice()在数组中增加或删除成员,
splice("从第几个元素开始", "删除几个元素", "要增加的内容")
<script>
var arr=[1,2,3,'haha']
var arr2=[1,2,3,1,2,3]
var arrs=[
[1,2,3],
[4,5,6]
]
// alert(arrs[0][2])
//splice(从第几个元素开始,删除多少个,添加的内容) 作用:能够在数组的某个位置添加或者删除
arr.splice(3,0,4)
// alert(arr)
// alert(arr.reverse())
//.push()往数组最后追加成员
arr.push(4)
// alert(arr)
//indexOf()查找该数据,出现的索引值只会找一次,找不到就找不到了,如果没有返回-1
// alert(arr.indexOf(4))
//.pop()删除数组最后一个成员;返回值:被删除的数据
// alert(arr.pop())
//.join("-")把数组转为字符串
// alert(arr.join("*"))
//.length获取长度,从1开始数
//alert(arr.length)
</script>
数组去重:
var aList =[1,2,3,12,3]
var list1=[]
for(var i=0; i<aList.length;i+=){
if(aList.indexOf(alist[i]) == i){
list1.push(aList[i])
}
}
alert(list1)
字符串处理方法:
字符串合并操作:"+",
parseInt():将数字字符串转化为整数
parseFload(): 将数字字符串转换为小数
split()把一个字符串分割成字符穿组成的数组
indexOf()查找字符串是否含有某字符,并返回索引值
substring() 截取字符串用法
