javascript函数
在JavaScript基础之上提供了部分函数,同时也可以自定义函数,JavaScript基础详见之前的文章javascript基础知识
自定义函数
//关键字 函数名 参数列表 函数体
function test(a,b,c){
alert(a+":"+b+":"+c)
}
function test1(a,b){
return a;//不需要定义返回值类型，因为无论返回什么都能存储在var定义的变量中
}
调用函数
function test(a,b,c);
test(10,"abc",new Date());
系统中的全局函数
alert();
弹窗显示括号内的内容
parseInt();
把括号内的内容转换为整数的值.如果括号内是字符串,则字符串开头的数字部分转换为整数,如果以字母开头,则返回NaN
var a = 10.5;
alert(parseInt(a));//输出为10,将10.5转换为整数类型
var b = "10abc";
alert(parseInt(b));//输出为10
var c = "a10";
alert(parseInt(c));//输出NaN,字母不能作为开头进行转换
parseFloat();
把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回NaN,与parseInt用法类似
typeof();
返回括号内值的数据类型,
var a = 10;
var b = "abc";
typeof(a);//number
typeof(b);//string
eval();
var a = 10;
var s = "2+3*2";
alert(eval(s));//把传入进来的字符串可以当做js脚本执行 输出值为8
var t = "alert(a)";
eval(t);把传入的t作为js脚本执行,所以执行alert(a),弹窗输出10;
事件
常用事件
onclick();鼠标单次点击事件(左键)
<script>
function test(){
console.log("事件被触发了");
}
</script>
<!--左键点击按钮一次触发事件-->
<input type = "button" value="单击事件" onclick = "test()">
<div onclick="test()"></div>
onblur()标签失去焦点
<input type="text" onblur="alert('请输入')"/>
onfocus()标签获得焦点
<input type="text" onfocus="alert('聚焦后弹出内容')"/>
onmouseover()鼠标移动到某标签上
onmouseout()鼠标从某标签上移开
onload()网页加载完毕后触发相应的事件处理程序
onchange()指当前标签失去焦点并标签内容发生改变时触发事件处理程序
Html DOM
查找元素
要想通过JavaScript操作Html标签就必须先找到该标签
有四种方法可以找到Html标签
通过id查找Html标签
document.getElementById(“id");
通过标签名查找Html标签
document.getElementsByTagName("p");
通过类名查找Html标签
document.getElementsByClassName("p");
通过name查找Html标签
document.getElementsByName(“name");
标签体属性操作
可以通过html事件触发JavaScript函数
需要在JavaScript函数对网页的标签进行操作
如何在JavaScript中操作网页标签
JavaScript认为网页中的每个标签都是一个对象
在js中把这一类标签对象称为html_dom对象(指的就是网页中的标签)
如何在JavaScript中获得网页中标签对象?
在网页加载完毕后,在js中生成一个document对象(表示整个html文档)
里面提供了一个方法getElementById();来获得网页中的标签对象
function test(){
var obj1 = document.getElementById("txt1")
var obj2 = document.getElementById("txt2")
//操作标签对象的属性
obj2.value = obj1.value;
obj1.value = "";
obj1.type = "radio";
}
function test(){
var obj1 = document.getElementById("txt1")
var obj2 = document.getElementById("txt2")
//操作标签对象的属性
obj2.value = obj1.value;
obj1.value = "";
obj1.type = "radio";
}
左边是txt1,右边是txt2,左边输入内容后点测试,左边的值赋值给右边的框,然后将坐标的框的格式设置为radio
在这里插入图片描述
标签体内容操作
<div id = "box1">html dom对象</div>
<div id = "box2"></div>
<div id = "box3">
<b> dom对象</b>
</div>
<input type="button" onclick="test()" value="测试"/>
function test(){
var divobj1 = document.getElementById("box1")
var divobj2 = document.getElementById("box2")
var divobj3 = document.getElementById("box3")
//操作标签体中的内容
divobj2.innerText = divobj1.innerText;//innerText获得标签体内的文本内容
divobj1.innerHTML = divobj3.innerHTML;//innerHtml可以获得标签内的所有内容(包括标签和文本)
}
标签体CSS操作
<body>
<div id = "box1" style="background-color: aqua;"></div>
<input type="button" onclick="test()" value="测试"/>
</body>
<script>
function tesst(){
var divobj1 = document.getElementById("box1");
//通过dom对象操作标签的css属性
divobj1.style.backgroundColor = 'green';
divobj1.style.width = '200px';
divobj1.style.height = '200px';
}
</script>
计时
通过JavaScript可以做到在一个设定的时间间隔之后执行代码,而不是在函数被调用后立即执行.称之为计时事件
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
