try{
/*把可能错误的代码放在这里,如果代码全部执行正确,那么后面的catch子语句会被忽略
*如果这里的代码出错,那么会立即终止执行,然后去执行catch后面的语句块
*这里错误指的是逻辑错(变量错误)误不能是语法错误(格式写错)
*/
var a="ROBIN";
alert(a1);
}catch(e){
alert(e.message); /* 给try提供报错提示 message是其中一种属性*/
}finally{
alert("不管try里面的语句是否出错,finally里的语句肯定执行")
}
JavaScript 计时
- 延期执行代码
延期执行代码就是在未来的某个时间执行预定代码,这个用setTimeout( )方法实现
function func1(){
alert('haha');
}
setTimeout(func1,5000); /* 这里单位是毫秒,5000就是延迟5秒*/
/* 取消上面的延时操作办法 */
clearTimeout(set1);
- 定期执行代码
定期执行代码就是每间隔多久即执行预定代码,这个用 setInterval( )方法实现
/* 一般传一个函数进去作为参数 */
function func1(){
console.log("haha");
}
var set1=setInterval(func1,2000);
/* 取消上面的操作 */
clearInterval();
从JS到 jQuery:
jQuery、jQuery UI、jQuery mobile
客户端JS的功能:
对浏览事件做出响应
在数据被提交到服务器之前验证数据
检测访客的浏览信息
控制cookie信息
其实还有服务器端JS
为什么要使用jQuery?
最主要是解决浏览器器兼容问题
jQuery能够做什么?
轻松获取文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、使用Ajax实现无刷新从服务器获取信息、简化常见的JS任务
下载地址:
- 引入jQuery
XXXX.js 文件
<script> </script>标签
jQuery.js: 未经压缩,适合学习用,加载慢
jQuery.min.js: 压缩过,适合项目直接用,加载快
jQuery各大版本都是相同的API,里面函数名字,以及参数等等都是一样的,使用的时候没有区别,但对浏览器兼容有影响
- 引入方法:<script type="text/javascript" src="xxx.js"> </script>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 第一个jQuery程序 */
$(function(){
alert("hello word!");
});
</script>
jQuery中的$函数:
- $在jQuery中是一个函数名
jQuery中有一个非常重要的函数:jQuery,为了使用方便简写成 $
- $函数的参数以及功能
$函数传入的参数类型不同所实现的功能也是不一样的,主要的参数类型有4种:
- 传入一个函数:传入的函数在页面元素加载完毕之后再执行
- 传入选择器:传入字符串形式的选择器
- 传入htmlElement对象:传入htmlElement对象可以转为jQuery对象
- 传入html代码:基于html代码片段生成新元素
<script type="text/javascript">
$(function(){ //有了这个函数现在代码放在哪个位置都是最后才执行了
var div1=document.getElementById("div1");
div1.style.backgroundColor="red";
div1.style.height="100px";
});
</script>
- 自定义jQuery简写符号
除了jQuery库之外,还有别的JavaScript库也使用$符号,如果一个页面加载多个库就会有冲突,
那么我们用 jQuery.noConflict方法让jQuery放弃使用$符号,也可以把它的返回值赋给一个变量实现自定义jQuery简写符号。
- 让jQuery放弃简写符号$: jQuery.noConflict();
- 自定义简写符号:var jq=jQuery.noConflict();
<script type="text/javascript">
jQuery.noConflict(); //让jQuery放弃使用$这个简写符号
jQuery(function(){ //这边就不能使用$这个函数了,必须写全
var div1=document.getElementById("div1");
div1.style.backgroundColor="red";
div1.style.height="100px";
});
</script>
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(function(){
var div1=document.getElementById("div1");
div1.style.backgroundColor="red";
div1.style.height="100px";
});
</script>
等待页面元素加载完毕
为什么要等待页面元素加载完毕才进行操作,因为没加载完毕我们连元素可能都没获取到
保证页面加载完毕的两种方法:
//方法一:
$(document).ready(function(){
.....
//alert("222");
});
//方法二:
$(function(){
.....
});
//一个页面可以有多个上面的代码而不会产生冲突