javascript简单介绍
ECMAScript
1.语法
2.变量:只能使用var定义,如果在函数的内容使用var定义,那么他是一个局部变量,如果没有使用var定义他是一个全局变量,弱类型
3.数据类型:原是数据类型(undefined/null/string/number/boolean)
4.语句
5.运算符:==与===的区别
6.函数:两种写法(有名称的,匿名的)
BOM对象:
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数),back(),forward()
location:href属性
事件:
onsubmit()此事件写在form标签中,必须有返回值,οnsubmit=return checkForm()
onload()此事件只能写一次并且放到Body标签中,页面加载事件,所有的其他操作(匿名方式)都可以放到这个绑定的函数里面
其他事件放到需要操作的元素位置(onclick,onfocus,onblur)
onfocus,onblur:聚焦离焦事件,用于表单校验是的时候比较合适
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多
onmouseover/onmouseout/onmousemove:购物网站详情页
onchange:当用户改变输入内容的时候使用这个事件(二级联动)
获取元素:
document.getElementById("id")
获取元素的值:
document.getElementById("id").value;
向页面输出
弹窗:alert()
向浏览器中写入内容:document.write("内容")
2.书写页面加载函数
3.在页面加载函数中,获取显示广告图片的元素
4.设置定时操作(显示广告图片的函数)
5.在显示广告图片的函数中,使用JQ的方法让广告图片显示(show());
6.清除显示广告图片的定时操作
7.设置定时操作(隐藏广告图片的函数)
8.在隐藏广告图片的函数中,使用JQ的方法让广告图片隐藏(hide());
9.清除隐藏广告图片的定时操作
ECMAScript
1.语法
2.变量:只能使用var定义,如果在函数的内容使用var定义,那么他是一个局部变量,如果没有使用var定义他是一个全局变量,弱类型
3.数据类型:原是数据类型(undefined/null/string/number/boolean)
4.语句
5.运算符:==与===的区别
6.函数:两种写法(有名称的,匿名的)
BOM对象:
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数),back(),forward()
location:href属性
事件:
onsubmit()此事件写在form标签中,必须有返回值,οnsubmit=return checkForm()
onload()此事件只能写一次并且放到Body标签中,页面加载事件,所有的其他操作(匿名方式)都可以放到这个绑定的函数里面
其他事件放到需要操作的元素位置(onclick,onfocus,onblur)
onfocus,onblur:聚焦离焦事件,用于表单校验是的时候比较合适
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多
onmouseover/onmouseout/onmousemove:购物网站详情页
onchange:当用户改变输入内容的时候使用这个事件(二级联动)
获取元素:
document.getElementById("id")
获取元素的值:
document.getElementById("id").value;
向页面输出
弹窗:alert()
向浏览器中写入内容:document.write("内容")
向页面指定位置写入内容innerHTML
js与jq加载
<!DOCTYPE html>
<html>
<head>
<title>获取元素</title>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
window.οnlοad=function(){
alert("张三");
}
//传统的方式页面加载会存在覆盖问题,加载比jq慢(整个页面加载完毕<包括里面的其他内容>)
window.οnlοad=function(){
alert("李四");
}
//jQuery的加载比js加载快(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("老王");
});
//jq不存在覆盖问题,加载时顺序执行
$(document).ready(function(){
alert("王五");
});
$(function(){
alert("汾酒");
});
</script>
</head>
<body>
</body>
</html>
JQ的获取
<!DOCTYPE html>
<html>
<head>
<title>获取元素</title>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
//传统方式获取
document.getElementById("btn").οnclick=function(){
location.href="a.html";
}
//jq方式的获取
$("#btn").click(function(){
location.href="b.html";
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜" id="btn"/>
</body>
</html>
DOM与jQ对象之间的转换关系
<!DOCTYPE html>
<html>
<head>
<title>Dom与JQ对象之间的转换</title>
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
function write1(){
//js的DOM操作
document.getElementById("span1").innerHTML="萌萌哒";
var spanEle=document.getElementById("span1");
//将DOM对象转换为JQ对象
$(spanEle).html("思密达");
}
$(function(){
$("#btn").click(function(){
//jq对象无法操作js里面的属性和方法!!!
//$("#span1").innerHTML="呵呵哒";
$("#span1").html("呵呵哒");
//JQ对象想DOM对象转换
$("#span1").get(0).innerHTML="美美哒";
$("#span1")[0].innerHTML="棒棒哒";
});
});
</script>
</head>
<body>
<input type="button" value="js写入" οnclick="write1()"/>
<input type="button" value="jq写入"id="btn"/><br/>
班长:<span id="span1">你好帅</span>
</body>
</html>
1.引入JQ相关文件
2.书写页面加载函数
3.在页面加载函数中,获取显示广告图片的元素
4.设置定时操作(显示广告图片的函数)
5.在显示广告图片的函数中,使用JQ的方法让广告图片显示(show());
6.清除显示广告图片的定时操作
7.设置定时操作(隐藏广告图片的函数)
8.在隐藏广告图片的函数中,使用JQ的方法让广告图片隐藏(hide());
9.清除隐藏广告图片的定时操作
<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
<script>
$(function(){
//书写显示广告图片的定时操作
time=setInterval("showAd()",3000);
});
//书写显示广告图片的函数
function showAd(){
//获取广告图片,并让其显示
//$("#img2").show(1000);
//$("#img2").slideDown(5000);
$("#img2").fadeIn(4000);
//清除显示图片定时操作
clearInterval(time);
//设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//$("#img2").hide();
//$("#img2").slideUp(5000);
$("#img2").fadeOut(4000);
//清除隐藏图片的定时操作
clearInterval(time);
}
</script>
toggle元素