JS相关知识点计算,JavaScript学习计算

By admin in 4858美高梅 on 2019年4月1日

JavaScript嵌入页面包车型客车办法

① 、行间事件(主要用以事件)

<input type="button" name="" onclick="alert('ok!');">

 

二 、页面script标签嵌入

<script type="text/javascript">        
    var a = '你好!';
    alert(a);
</script>

 

叁 、外部引入

<script type="text/javascript" src="js/index.js"></script>

javasript(简写:JS)属于轻量型的脚本语言,常使用于网页源码上。
本人刚开端接触JS的时候,以为JS正是异步(ajax)。后来查询资料才知晓,ajax指的是遵照JS语言,首要构成JS、CSS、XML二种技术的新技巧,是用以成立交互式网页应用的网页开发技术。

壹 、获取成分方法

一 、JS流程控制语句

  (1)、if
判断

  if 语句是依照条件建立时才实施相应的代码。

  if…else  语句是在钦定的尺度建立即进行if后的代码,在原则不树马上执行else后的代码。

  if…else  嵌套语句是在各种标准化下抉择相应的代码快之一来执行。

  if
语句适用于自由档次的多寡,可处理千丝万缕的逻辑关系。

  (2)、switch语句

  当有很八种挑选的时候,switch 比 if…else
使用更便于,结构简单,专为多重选拔设计,不过仅能处理八个枚举型逻辑关系。**
该语句使用 if
也足以成功,**那个看个人喜好。

  switch
语句的行事规律:首先创制三个表明式,平常为变量,之后表明式的值与 switch
语句中各种 case 的值做相比较,假若**
十一分,则实行该 case 后的语句,若与富有 case
值都不匹配,则执行 default 后的口舌。在利用 switch 语句时,各种 case 语句后务必使用
break 跳出循环,阻止运营下三个 case。**

 1 var d = new Date().getDay();
 2 //如果今天不是周末,则提示默认消息
 3 switch (d){
 4     case 6:
 5         alert("今天是星期六");
 6         break;
 7     case 0:
 8         alert("今天是星期天");
 9         break;
10     default:
11         alert("同志尚未努力,革命仍需成功。");
12 }

 

  switch
语句在做相比时,使用的是全等,而不是相等,所以在字符串与数字匹配时,须求特别注意。

 1 //使用switch语句将字符串与数字做比较
 2 //返回:不等于,执行default语句
 3 var n = '5';
 4 switch(n){
 5     case 5:
 6         alert('等于,执行case语句');
 7         break;
 8     default:
 9         alert('不等于,执行default语句');
10 }
11 
12 //使用if语句将字符串与数字做比较
13 //返回:等于
14 var n = '2';
15 if(n == 2){
16     alert('等于');
17 }else{
18     alert('不等于');
19 }
20 
21 //将case的值改为字符串再做比较
22 //返回:等于,执行case语句
23 var n = '2';
24 switch(n){
25     case '2':
26         alert('等于,执行case语句');
27         break;
28     default:
29         alert('不等于,执行default语句');
30 }
31 
32 
33 //使用全等再做比较
34 //返回:不等于
35 var n = '2';
36 if(n===2){
37     alert('等于');
38 }else{
39     alert('不等于');
40 }

 

  (3)、for
循环

  众多事情不只是做二遍,供给重新做。比如打字与印刷 10
份文件,每一回打字与印刷 1 份,重复这几个动作,直到打字与印刷完结。这样的工作就用 for
循环来成功,循环正是重新执行一段代码,每一遍的值分化。

  上边是多少个for 循环的小应用,借使有 1.2.3. … 10
差别面值的 奥迪Q3MB,计算一共有微微 大切诺基MB。

1 var sum = 0;
2 for(var rmb=1; rmb<=10; rmb++){ 
3     sum += rmb;
4 }
5 alert('一共有: ' + sum + '元');    //返回:一共有:55元

 

  (4)、while
循环

  while 循环和 for
循环具有同样的意义,只要钦命条件为
ture,循环就可以直接执行,直到条件不再满意。

1 //使用while循环输出5个数字
2 var i = 0;      //第一部分:初始化,给一个初始的值,让i从0循环
3 while(i < 5){    //第二部分:条件。成立继续循环,不成立退出
4     alert(i);    //第三部分:语句
5     i++;     //第四部分:自增
6 }
7 //while循环使用比较复杂,使用for循环更简洁。
8 //for(初始化;条件;自增){语句}

 

  (5)、do…while
循环

  do…while 循环与 while
循环的法则结构是基本相同的,然而该循环会在检查标准是还是不是为 ture
在此之前实施二遍代码块,假若条件为 ture,则再一次循环。**
该循环有一点小意思,因为他是先进行代码,后度量准则,即使基准不当,则跻身死循环,导致浏览器崩溃。**

 1 /*
 2 语法:
 3 do{
 4   执行语句
 5 }
 6 while(条件);
 7 */
 8 
 9 //操作有风险,尝试需谨慎
10 //若将循环条件改为:num <= 6 会导致浏览器崩溃  
11 var num = 6;
12 do{
13     document.write("数字:" + num + "<br>");
14     num -= 1;
15 }
16 while(num > 0);

 

  (6)、JS
错误处理语句

  try…catch 语句用于开始展览丰富处理。try
语句用于检测代码块的错误,指明必要处理的代码段,catch 语句用于拍卖 try
语句中抛出的失实。try 语句首先被实践,如果运营中发出了不当,try
语句中的代码将被跳过执行 catch 中的语句。假诺没有产生错误,则不履行
catch 中的语句。一般针对可预感性的一无可取,可使用 try…catch
语句实行拍卖。

 1 try{
 2     document.write("开始执行try语句" + '<br>');
 3     document.write("还没抛出错误" + '<br>');
 4     alert(x);        //抛出错误
 5     alert('123');    //没被执行
 6 }
 7 catch(e){
 8     document.write("捕捉到错误,开始执行catch语句" + '<br>');
 9     document.write("错误类型: " + e.name + '<br>');
10     document.write("错误信息: " + e.message);
11     alert('x');
12 }

 

  throw
语句可用来成立自定义错误。官方术语为:创设或抛出相当(exception)。语法:throw
‘卓殊对象’。  

  throw 语句能够匹配 try…catch
语句一起利用,以完结控制造进度序流,生成精确的荒唐音信。

 1 //输入0到10之间的数字,如果输入错误,会抛出一个错误,catch会捕捉到错误,并显示自定义的错误消息。
 2 <body>
 3 <input id="txt" type="text"/>
 4 <br>
 5 <input type="button" value="检测输入" onclick="error()">
 6 <script>
 7 function error(){
 8     try{
 9         var x = document.getElementById("txt").value;
10         var y = document.getElementById("demo");
11         y.style.color = 'red';
12         if(x == '') throw '输入不能为空';
13         if(isNaN(x)) throw '请输入数字';
14         var num = [7,8,9];
15         for(var i=0; i<num.length; i++){
16             if(x == num[i]){
17                 throw '该数字已经存在';
18             }
19         }
20         if(x == 0){
21             throw '输入不能为0';
22         }
23         else if(x > 10){
24             throw '数字太大了';
25         }
26         else if(x <= 3){
27             throw '数字太小了';
28         }
29         else{
30             y.style.color = 'green';
31             y.innerHTML = 'OK';
32         }
33     }
34     catch(e){
35         y.innerHTML = '错误提示:' + e + '!';
36     }
37 }
38 </script>
39 </body>

 

  (7)、跳出循环

  break
语句用于跳出当前巡回,直接退出循环执行前面包车型客车代码,即停止整个循环,不再进行判定。continue
语句仅仅是跳出此次巡回,继续执行前边的大循环,即截止这次巡回,接着去看清是还是不是履行下次轮回。return
能够告一段落函数体的运维,并回到叁个值。

1 for(var i=0; i<6; i++){
2     if(i == 3) break;    //当i=3时跳出整个循环,不再执行循环
3     alert(i);    //返回:0,1,2
4 }
5 
6 for(var i=0; i<6; i++){
7     if(i == 3) continue;    //当i=3时跳出本次循环,继续执行后面循环
8     alert(i);    返回:0,1,2,4,5
9 }

 

javascript语句与注释

一 、一条javascript语句应该以“;”结尾

<script type="text/javascript">    
var a = 123;
var b = 'str';
function fn(){
    alert(a);
};
fn();
</script>

2、javascript注释

<script type="text/javascript">    

// 单行注释
var a = 123;
/*  
    多行注释
    1、...
    2、...
*/
var b = 'str';
</script>

前端三大块:

  • HTML:页面结构
  • CSS:页面表现:成分大小、颜色、地方、隐藏或出示、部分动画片效果
  • JavaScript:页面行为:部分动画片效果、页面与用户的互相、页面效果

1、document.getElementById(“元素id号”);

能够运用内置对象document上的getElementById方法来取得页面上安装了id属性的成分,获取到的是一个html对象,然后将它赋值给三个变量。如下:

4858美高梅 1

地点的口舌,假设把javascript写在要素的地方,就会出错,因为页面是从上往下加载执行的,javascript去页面上获取成分div1的时候,成分div1还一向不加载,消除格局有二种

4858美高梅 2

2、JSON

  JSON(JavaScript Object Notation):JS
对象表示法。JSON 主要用于存储和置换数据新闻,类似于 XML,**
可是相比较 XML,JSON
易于阅读和编写制定,也不难解析。**

   JSON 语法是 JS
对象表示语法的子集:数据在键值对中,并由逗号分隔,花括号保存对象,方括号保存数组。

  JSON
语法的书写格式:”名称” : “值”, “名称” : “值”

  名称和值包括在双引号中,并用冒号分隔,每条数据用逗号分隔。那很简单领会,相对于
JS 中 名称 = “值”。

  JSON
的值可以是:数字(包罗整数和小数),字符串(包括在双引号中),布尔值(true 或
false),对象(包罗在花括号中),数组(包蕴在方括号中),大概为
null。

  JSON
是纯文本,平常用于服务端向网页传递数据,从服务器上赢得 JSON
数据,然后在网页中利用该多少。

  (1)、JSON对象

1 var json = {"a": 12, "b": "abc", "c":[1,2,3]};
2 //返回第一项的值:
3 alert(json.a);
4 
5 //修改第二项的值
6 alert(json.b = "xyz");
7 
8 //返回第三项数组中第一项的值
9 alert(json.c[0]);

 

  (2)、JSON
和数组

  相同点:

  都足以透过下标再次回到某项的值。都足以采用循环。固然JSON 没有 length 属性,不可能应用 for 循环,可是能够使用 for…in
循环,完毕与 for 循环相同的动作。

  数组也能够行使
for…in 循环,但最棒大概采取 for 循环。for…in
循环遍历的是目的的习性,而不是数组成分。

  不同点:

  JSON 的下标是字符串,数组的下标为数字。JSON
没有 length 属性,数组有该属性。

 1 var arr = [12,5,7];
 2 var json = {"a":12,"b":5,"c":7};
 3 
 4 alert(arr[0]);      //返回:12
 5 alert(json["a"]);    //返回:12
 6 
 7 alert(arr.length);    //返回:3
 8 alert(json.length);   //返回:undefined
 9 
10 //数组for循环
11 for(var i=0; i<arr.length; i++){
12     alert('第' + (i+1) + '个数据是:' + arr[i]);
13 }
14 alert(typeof i);    //返回:number
15 
16 //数组使用for...in循环
17 for(var i in arr){
18     alert('第' + (i+1) + '个数据是:' + arr[i]);
19 }
20 alert(typeof i);    //返回:string
21 
22 //JSON使用for...in循环
23 for(var i in json){
24     alert('第' + i + '个数据是:' + json[i]);
25 }

 

  (3)、JSON
数组对象

 1 <body>
 2 <p>
 3 姓 名: <br> 
 4 性 别: <br>
 5 员工号: <br> 
 6 修改姓名: <br> 
 7 </p> 
 8 <script>
 9 var staff = [
10     {"name" : "小明", "sex" : "男", "id" : 1}, 
11     {"name" : "小白", "sex" : "男", "id" : 2}, 
12     {"name" : "小红", "sex" : "女", "id" : 3}
13 ];
14 var x = document.getElementById("fname");
15 var y = document.getElementById("gender");
16 var z = document.getElementById("num");
17 var n = document.getElementById("lname");
18 //访问对象数组中第一项的值:
19 x.innerHTML = staff[0].name;
20 y.innerHTML = staff[0].sex;
21 z.innerHTML = staff[0].id;
22 
23 //修改数据:
24 n.innerHTML = staff[1].name = '大白';
25 </script>
26 </body>

 

   (4)、JSON
字符串对象

var str = '{"name":"小明", "sex":"男", "age":21}';
var toObj = JSON.parse(str);  //JSON字符串转换为JSON对象
alert(toObj.name);
alert(typeof toObj);    //返回:object

var json = {"name":"小红", "sex":"女", "age":18};
var toStr = JSON.stringify(json);  //JSON对象转换为JSON字符串
alert(toStr);    //返回字符串
alert(json.age);
alert(typeof toStr);    //返回:string

 

  (5)、JSON
应用

  当需求代表一组数据时,JSON
不但能够进步可读性,而且还可以够减去复杂性。JSON
能够代表多少个值,各样值又可含蓄多少个值,例如要表示1个用户列表音讯,就足以将富有新闻存款和储蓄在贰个变量中,分成多项,每项中又可分为四个条目,各个条目中著录二个用户的新闻。

 1 var userName = {
 2     "first": [{
 3         "name": "路飞",
 4         "sex": "男",
 5         "tel": "aaa"
 6     }, {
 7         "name": "索罗",
 8         "sex": "男",
 9         "tel": "bbb"
10     }, {
11         "name": "娜美",
12         "sex": "女",
13         "tel": "ccc"
14     }],
15 
16     "second": [{
17         "name": "卡卡西",
18         "sex": "男",
19         "tel": "ddd"
20     }, {
21         "name": "鸣人",
22         "sex": "男",
23         "tel": "fff"
24     }, {
25         "name": "佐助",
26         "sex": "男",
27         "tel": "eee"
28     }, {
29         "name": "皱田",
30         "sex": "女",
31         "tel": "sss"
32     }],
33 
34     "third": [{
35         "name": "小明",
36         "sex": "男",
37         "tel": "xxx"
38     },{
39         "name": "小红",
40         "sex": "女",
41         "tel": "zzz"
42     }]
43 };
44 
45 //获取用户的信息:
46 alert(userName.first[1].name + ' \n ' + userName.first[1].sex + '\n '+ userName.first[1].tel);
47 alert(userName.second[3].name + ' \n ' + userName.second[3].sex +' \n '+ userName.second[3].tel);
48 alert(userName.third[0].name + ' \n ' + userName.third[0].sex + ' \n '+ userName.third[0].tel);

 

  **说到 JSON,就不得不提一下
JSONP。JSONP (JSON with Padding) 是
JSON 的一种
“使用方式”,能够让网页从其他域名(网站)那获取资料,即跨域读取数据。可用以消除主流浏览器的跨域数据访问的题材。
缘何从分化的域(网站)访问数据要求2个特有的技术
(JSONP) 呢?那是因为同源策略。同源策略,它是由 Netscape
建议的2个盛名的安全策略,未来具备扶助 JavaScript
的浏览器都会利用那几个策略。由于该方针,一般的话位于 server1 的 demo.com
的网页不能够与不是 server1 的 demo.com 的网页的服务器交流,而 HTML 的
<script> 成分是七个两样。
利用 <script>
成分的那几个盛开药方针,网页能够赢得从其余来源动态发生的 JSON
资料,而那种利用方式就是所谓的 JSONP。**用 JSONP 抓到的资料并不是 JSON,而是专擅的
JavaScript,用 JavaScript 直译器执行而不是用 JSON
解析器解析。

 

变量

JavaScript 是一种弱类型语言,javascript的变量类型由它的值来支配。
定义变量必要用关键字 ‘var’

 var a = 123;
 var b = 'asd';

 //同时定义多个变量可以用","隔开,公用一个‘var’关键字

 var c = 45,d='qwe',f='68';

变量类型

5种为主数据类型:
number、string、boolean、undefined、null

1种复合类型:
object

JavaScript嵌入页面包车型大巴办法

行间事件(重要用来事件)
<input type="button" name="" onclick="alert('ok!');">
页面script标签嵌入
<script type="text/javascript">alert('ok!');</script>
外表引入
<script type="text/javascript" src="js/index.js"></script>

4858美高梅 3

和本人学的python很像

贰 、document.getElementsByTagName()获取的是2个选拔集,不是数组,然则能够用下标的主意操作选拔集里面包车型大巴dom成分

3、JS 定时器

  定时器可以在钦赐的年月间隔之后再实践代码,而不是在函数被调用后立刻施行。**定时器在网页中采取尤其常见,最广泛的正是动态时钟,还有诸如购物网站的倒计时抢购。定时器的连串可分为两类:一类是间隔型,即
setInterval,在履行时,从页面加载后每隔一段时间执行二回,可Infiniti执行。另一类是延迟型,即
setTimeout,
在页面加载后推移钦命的时日,去履行三遍,而且只有只进行3遍。该办法属于
window 对象的五个方法。**

  (1)、setInterval

  setInterval(function,
time)  方法可间隔钦点的纳秒数,不停的推行内定的代码。
该办法有四个参数,第三个参数是函数,钦点定时器要调用的函数或要推行的代码串,第②个参数是时间,用阿秒计,1000皮秒是 1 秒,钦命执行的间隔时间。

  (2)、setTimeout

  setTimeout(function,
time)  方法可延缓钦赐的微秒数后,再履行二遍钦赐的代码。
该方法也有多个参数,第四个参数为函数,内定要调用的函数或代码串,第二个参数内定在推行代码前必要等待多少纳秒。

1 function show(){
2     alert(1);
3 }
4 //当页面加载后,每隔1秒弹出一个1,无限次执行
5 setInterval(show,1000);
6 
7 //当页面加载后,在1秒后弹出一个1,只执行一次
8 setTimeout(show,1000);

 

  setInterval **动态时钟**效果:

 1 //动态显示时钟
 2 <p id="demo"></p>
 3 <script>
 4 function clock(){
 5     var d = new Date();   
 6     var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() ;
 7     var oP = document.getElementById("demo").innerHTML = time;
 8 }
 9 setInterval(clock,1000);
10 </script>

 

  setTimeout 统计效果:

 1 //setTimeout可实现统计:
 2 <input type="text" id="demo" >
 3 <script>
 4 var num = 0;
 5 function start() {
 6     document.getElementById('demo').value = num;
 7     num += 1;
 8     setTimeout(start,1000);
 9 }
10 setTimeout(start,1000);
11 </script>

 

  能够打开定时器,也就能够关闭定时器。二种档次对应着三种办法。

  (1)、clearInterval

  clearInterval()  方法可关闭由 setInterval()
方法执行的函数代码。使用该措施关闭定时器时,在创制间隔定时器时必须利用全局变量。

  初始、停止动态时钟效果:

 1 //开始、停止动态时钟
 2 <input type="text" id="txt1" >
 3 <input type="button" value="停止" onclick="stop()" >
 4 <input type="button" value="开始" onclick="start()" >
 5 <script>
 6 var time = null;
 7 function start(){
 8     time = setInterval(function (){
 9         var d = new Date();   
10         var t = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
11         var oTxT = document.getElementById("txt1").value = t;
12     },1000);
13 };
14 start();
15 function stop(){
16     clearInterval(time);
17 }
18 </script>

 

  (2)、clearTimeout

  clearTimeout()  方法用于结束执行由
setTimeout()
方法执行的函数代码。使用该措施时关闭定时器时,在创设延迟定时器时必须采纳全局变量。

  开始、截至总结效果:

 1 //开始、停止统计:
 2 <input type="text" id="txt1" >
 3 <input type="button" value="停止" onclick="stop()" >
 4 <input type="button" value="开始" onclick="start()" >
 5 <script>
 6 var num = 0;
 7 var time = null;
 8 function start(){
 9     var oTxt = document.getElementById('txt1').value = num;
10     num += 1;
11     time = setTimeout('start()',1000);
12 }
13 start();
14 function stop(){
15     clearTimeout(time);
16 }
17 </script>

 

变量、函数、属性、函数参数命名规范

一 、区分轻重缓急写
贰 、第七个字符必须是字母、下划线(_)恐怕新币符号($)
③ 、其余字符能够是字母、下划线、新币符或数字

变量

JavaScript 是一种弱类型语言,javascript的变量类型由它的值来支配。
定义变量必要用关键字 ‘var’,个人感觉很像python

var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开,公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';

4858美高梅 4 

4、Event 对象

  e**vent
对象表示事件的景观,用于获取事件的详细音信,如鼠标按钮、鼠标位置、键盘按键。事件家常便饭与函数一起利用,函数不会在事变时有产生前被实践。**

  (1)、获取鼠标坐标

  screenX 和 screenY
再次回到鼠标相对于显示屏的水准坐标和垂直坐标。参照点为显示器的左上角。

  clientX 和
clientY
再次来到鼠标相对于当下窗口可视区的水平坐标和垂直坐标。参照点为浏览器页面包车型大巴左上角。

1 document.onclick = function (){
2     //可视区坐标
3     alert(event.clientX + ',' + event.clientY);
4     //屏幕坐标
5     alert(event.screenX + ',' + event.screenY);
6 }

 

  JS相关知识点计算,JavaScript学习计算。(2)、获取鼠标**钮按**

  button
事件性质用于获取鼠标哪个按钮被点击了。重临多个整数,0 代表左键,1
代表中键,2 代表右键。

1 //鼠标左右按键
2 document.onmousedown = function (){
3     alert(event.button);
4 }

 

  (3)、获取键盘按键

  keyCode
事件性质用于获取按下了键盘的哪些键,再次回到键码,表示键盘上真实键的数字。

1 //键盘按键
2 document.onkeydown=function (){
3     alert(event.keyCode);
4 };

 

  键盘按键的 ctrlKey、shiftKey 和 altKey
火速属性,可判断是不是按下了该键,重回一个布尔值,提示在事变时有产生时,改键是或不是被按下。1
表示被按下,0 表示并未按下。

 1 document.onkeydown = function (){
 2     if(event.ctrlKey == 1){
 3         alert('Ctrl键被按了');
 4     }
 5     else if(event.shiftKey == 1){
 6         alert('Shift键被按了');
 7     }
 8     else if(event.altKey == true){
 9         alert('Alt键被按了');
10     }
11     else{
12         alert('都没被按下');
13     }
14 };

 

    实例:**按键提交新闻**

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>JavaScript示例</title>
 6 <script>
 7 window.onload=function (){
 8     var oTxt1 = document.getElementById('txt1');
 9     var oTxt2 = document.getElementById('txt2');
10     var oBtn = document.getElementById('btn1');
11 
12     //点击按钮提交
13     oBtn.onclick = function (){
14         //输入框的值等于文本框的值。
15         oTxt2.value += oTxt1.value + '\n';
16         //清空输入框的值,以便再次输入
17         oTxt1.value = '';
18     };
19 
20 
21     //按Enter或Ctrl+Enter提交
22     oTxt1.onkeydown = function (){
23         //回车键的键码为13
24         if(event.keyCode == 13 || event.keyCode == 13 && event.ctrlKey){
25             oTxt2.value += oTxt1.value + '\n';
26             oTxt1.value = '';
27         }
28     };
29 }
30 </script>
31 </head>
32 <body>
33 <input id="txt1" type="text" >
34 <input id="btn1" type="button" value="提交"><br>
35 <textarea id="txt2" rows="10" cols="50" ></textarea>
36 </body>
37 </html>

 

  (4)、事件流

  事件的传递有三种艺术:冒泡与捕获。事件传递定义了成分触发事件的相继。

  **事件冒泡:当一个要素发闯事件后,事件会顺着层级(父级

  • 父级的父级 –)关系依次向上传递直到 document。**

  事件捕获:事件捕获与事件冒泡正好相反,外部因素的事件会先被触发,然后才会触发内部因素的风浪,即从祖先到后代。

  事件流同时协理三种事件措施,冒泡型事件和捕获型事件,但是捕获型事件先产生。

  二种事件流会触发
DOM 中的全数目的,从 document 对象开端,也在 document
对象截至。

  语法:add伊夫ntListener(‘事件名称’,函数,冒泡/捕获)

  addEventListener()  方法用于向内定成分添加事件,该方法不会覆盖已存在的风云,可同时向3个要素添加多少个事件。该方法有三个参数,首个参数定义事件的项目,

  第一个参数规定事件触发后调用的函数,第多个参数是布尔值,用于定义该事件是冒泡仍然捕获,若为
false,则代表冒泡事件,假诺 ture,则意味着捕获事件。

  那里需求专注是的该措施的事件类型,不必要加”on“,比如平常写点击事件:“onclick”,该方法中则运用“click”即可。

 1 <!DOCTYPE html>
 2 <html id="htm">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>JavaScript示例</title>
 6 <style>
 7 div{padding:50px;}
 8 </style>
 9 <script>
10 window.onload = function (){
11     var x = document.getElementById("div1");
12     var y = document.getElementById("div2");
13     var z = document.getElementById("div3");
14 
15     var o = document.getElementById("bod");
16     var n = document.getElementById("htm");
17 
18     x.addEventListener("click", function() {
19         alert("1冒泡");
20     }, false);
21 
22     y.addEventListener("click", function() {
23         alert("2冒泡");
24     }, false);
25 
26     z.addEventListener("click", function() {
27         alert("3冒泡");
28     }, false);
29 
30     o.addEventListener("click", function() {
31         alert("body捕获");
32     }, true);
33 
34     n.addEventListener("click", function() {
35         alert("html冒泡");
36     }, false);
37 };
38 </script>
39 </head>
40 <body id="bod">
41 <div style="background:lightgreen;margin-bottom:10px;">我是body元素,我捕获。祖先html也会冒泡。</div>
42 <div id="div3" style="background:#ccc;">我是div3,我冒泡
43     <div id="div2" style="background:green;">我是div2,我冒泡
44         <div id="div1" style="background:red;">我是div1,我冒泡</div>
45     </div>
46 </div>
47 </body>
48 </html>

 

  remove伊芙ntListener()  方法用于移除由
add伊夫ntListener() 方法添加的事件监听。
此间需求注意**在绑定函数时不能够动用匿名函数,不然不或然删除。**

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript示例</title>
 6 <style>
 7 #div1{
 8     background:green;
 9     padding:50px;
10     color:white;
11 }
12 </style>
13 </head>
14 <body>
15 <div id="div1">
16 div元素添加了onmousemove事件监听,鼠标在绿色区域内移动时会显示随机数。
17 <p>点击按钮可移除div的事件监听。</p>
18     <button id="btn1">点击移除</button>
19 </div>
20 <p id="p1"></p>
21 
22 <script>
23 var oDiv = document.getElementById("div1");
24 var oP = document.getElementById("p1");
25 var oBtn = document.getElementById("btn1");
26 
27 oDiv.addEventListener("mousemove", block, false);
28 function block(){
29     oP.innerHTML = Math.random()*10;
30 }
31 oBtn.onclick = function (){
32     oDiv.removeEventListener("mousemove", block, false);
33 };
34 </script>
35 </body>
36 </html>

 

  cancelBubble  方法可取**消事件冒泡,不会往父级传递。实例:仿百度翻译效果,点击呈现按钮显示div,随便点击页面其余职位隐藏 div。**

  如若不废除事件冒泡,则在点击按钮的还要
div
先是显示了,然后又立即被埋伏了,能够注释掉废除事件冒泡代码,用弹窗查看效果。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript示例</title>
 6 <style>
 7 #div1{
 8     width:500px;
 9     height:300px;
10     background:lightgreen;
11     display:none;
12 }
13 </style>
14 <script>
15 window.onload = function (){
16     var oBtn = document.getElementById("btn1");
17     var oDiv = document.getElementById("div1");
18 
19     //点击按钮显示div
20     oBtn.onclick = function (){
21         oDiv.style.display = 'block';
22         //alert('显示');
23     
24         //取消事件冒泡,不会往父级传递。
25         event.cancelBubble = true;
26     };
27 
28     //点击document隐藏div
29     document.onclick = function (){
30         oDiv.style.display = 'none';
31     };
32 };
33 </script>
34 </head>
35 <body>
36 <input id="btn1" type="button" value="显示">
37 <div id="div1"></div>
38 </body>
39 </html>

 

  (5)、暗许事件

  所谓的暗中同意事件,正是浏览器自带的风浪。比如按下键盘按键,浏览器会自行将按键值写入输入框。再比如说新建八个空荡荡页面在浏览器打开,点击右键出现菜单项。咱俩并不曾用
JS 写相关判断,若是点击右键触发什么风云。那就是浏览器的暗许事件,也叫暗中同意行为。**一旦我们想弹出自定义的右键菜单项,那时候就须要阻止掉浏览器的暗中认可行为,阻止默许事件最简便的写法就是 return false;
。**

  实例:只好输入数字键的输入框,不考虑小键盘区。

  贯彻思路:键盘区数字键
0 的键码是 48,1 是 49,9 是 57,那么就能够做出判断,假设按键小于 48
或超出
57,则阻止掉,那注明按下的不是数字键,考虑到写错了急需删除,恐怕少写了,须求光标移动到少写的岗位补上,再移回两次三番输入,那么就再添加衡量规范,就算按键不是退格键只怕不是反正方向键,则阻止掉。删除键(退格键)的键码是
8,左方向键是 37,右方向键为 39。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript示例</title>
 6 <script>
 7 window.onload = function (){
 8     var oTxt = document.getElementById('txt1');
 9     oTxt.onkeydown = function (){
10 
11         //如果按下的不是删除键8,并且不是左方向键37,并且不是右方向键39,并且按键键码小于48或大于57,则阻止掉
12         if(event.keyCode !=8 && event.keyCode != 37 && event.keyCode != 39 && event.keyCode < 48 || event.keyCode > 57){
13             return false;
14         }
15     };
16 };
17 </script>
18 </head>
19 <body>
20 <input id="txt1" type="text" placeholder="请输入数字">
21 </body>
22 </html>

 

收获成分方法一

可以运用内置对象document上的getElementById方法来取得页面上设置了id属性的要素,获取到的是三个html对象,然后将它赋值给一个变量,比如:

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

地点的口舌,假设把javascript写在要素的下边,就会出错,因为页面上从上往下加载执行的,javascript去页面上取得成分div1的时候,成分div1还尚无加载,化解格局有两种:

率先种艺术:将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

其次种办法:将javascript语句放到window.onload触发的函数里面,获取成分的语句会在页面加载完后才实施,就不会出错了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

变量类型

  • number 数字类型
  • string 字符串类型
  • boolean 布尔品种 true 或 false
  • undefined类型,变量证明未起头化,它的值正是undefined
  • null类型,表示空对象,尽管定义的变量未来备选保存对象,能够将变量开端化为null在页面上取得不到对象,重返的值便是null

② 、操作成分属性

5、JS 知识点

  (1)、JS
引擎的预解析机制

  JS
引擎的辨析进度可分为五个阶段:预解析阶段和实践等级。

  JS
预解析是在程序进入三个新条件时,把该条件中的变量和函数预解析到她们能调用的环境中,即每三次的预解析单位是3个实践环境。当文书档案流中有多个JS 代码段,每一个代码段用 script 标签分隔,包罗外部引入的 JS 文件,JS
引擎并非是逐行的剖析程序,而是分段进行的,即叁个履行环境。预解析不能够跨代码段执行,简单说正是不能够在一个代码段注明,在另二个代码段调用。

  变量和函数的预解析正是升级,所谓进步(hoisting),正是JS
引擎在实践时,暗中认可将有着的变量注脚和函数申明都升高到最近效能域的最前边去的作为。**
由此函数能够在宣称从前调用。供给留意的是在应用说明式定义函数时不知所可晋升。**

 1 <script>
 2 alert(a(2));    //返回:4
 3 function a(x){
 4     return x * x;
 5 }
 6 
 7 alert(b);    //返回:undefined
 8 var b = 'hello'; 
 9 
10 alert(c(2));    //报错
11 //实际上是以变量声明提升
12 //相当于:c(); var c = undefined; c = function (){}
13 var c = function (y){
14     return y * y;
15 }
16 
17 function d(){
18     var n = 'hello';
19 }
20 alert(n);    //报错
21 </script>

 

  通过地点的代码能够见到,function
定义的函数注解 (a)
在代码起首履行之前(预解析阶段)对其促成了函数注明提升,先将其放入内部存款和储蓄器中,所以在函数注明在此之前能够调用该函数。和函数声Bellamy样,变量注脚(b)
也会在一从头被放入内部存款和储蓄器中,可是并没有赋值,所以在他赋值在此之前,他的值正是 undefined。但是函数表达式
(c) 分歧,函数表明式用 var
评释,也便是说解析器会对其变量升高,并对其赋值为
undefined,然后在推行期间,等到执行到该 var 变量的时候再将其变量指向三个function 函数,所以在函数表达式在此以前实施该函数就会报错。函数 (d)
是在函数内申明的变量,那么那些变量是属于该函数的私有变量,所以在表面调用时会报错。

  上边实例实例证实了**每1遍 JS
预解析的单位是一个推行环境,不会跨一个代码段去实施,间接会报错。**

1 <script>
2     alert(a);//报错:a is not defined
3 </script>
4 
5 <script>
6     var a = 'hello';
7 </script>

 

  若定义了八个同名的函数
(b),则在预解析时背后的三个会覆盖掉前边的叁个。若变量 (a) 和函数重名
(a),则函数的事先级高于变量的优先级。

 1 <script>
 2 alert(a); //返回:function a(){alert('hi');} 
 3 var a = 'hello'; 
 4 
 5 function a(){
 6     alert('hi');
 7 }
 8 alert(a); //返回:hello
 9 
10 b();    //返回:2
11 function b(){
12     alert(1);
13 }
14 b();    //返回:2
15 function b(){
16     alert(2);
17 }
18 </script>

 

  (2)、回调函数

  简单精晓,所谓回调,正是回头调用,那么回调函数正是一个函数调用的进度。譬如函数
a 有3个参数,那一个参数是三个函数 b,当函数 a 执行完之后再实施函数
b,那么那正是3个回调的经过。用法定术语解释正是:回调是2个函数作为参数字传送递给另2个函数,其母函数实现后举办。那么函数
a 正是母函数。那里必要留意:函数 b 是以参数的款式传递给函数 a
的,那么那么些函数 b
就被称为回调函数。回调函数不是由母函数直接调用的,而是在一定的风云还是规格发出时由其它的一方调用,用于对该事件开始展览响应。回调函数必须利用首要字
callback,并且回调函数自个儿必须是大局函数。

  JS
回调的法则是贰个异步的流程,在异步调用的图景下使用质量很好,
举个差不多的例证更能具体的辨证,比如情侣要来找你,等到门口了给您通话。”来找你”
正是函数 a 最先推行,而那时”你”能够去做其余工作,”到门口”便是函数 a
执行完成,”给你打电话”这就属于回调函数
b,然后你们就足以共同热情洋溢的游戏了。

  上面是一个简练的回调函数实例,点击按钮,当函数
a 执行到位后,分别调用回调函数 b、c、d。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript示例</title>
 6 <script>
 7 function a(callback){
 8     alert("我是母函数a");
 9     alert("现在要开始调用回调函数");
10     callback();
11 }
12 function b(){
13     alert("我是回调函数b");
14 }
15 function c(){
16     alert("我是回调函数c");
17 }
18 function d(){
19     alert("我是回调函数d");
20 }
21 function back(){
22     a(b);
23     a(c);
24     a(d);
25 }
26 </script>
27 </head>
28 <body>
29 <button onclick="back()">点击按钮</button>
30 </body>
31 </html>

 

  (3)、自调用函数

  自调用函数也叫即刻实施函数。使用首要字
function
定义1个函数,在给那几个函数指定三个函数名,这叫函数评释。使用首要字
function
定义3个函数,未给函数命名,在将以此匿名函数赋值个七个变量,那称之为函数表明式,那也是最常见的函数表达式语法。匿名函数正是运用主要字
function 定义三个函数,可是不给函数命名,匿名函数属于函数表明式。匿名函数有为数不少效果,可授予变量成立函数,赋予3个轩然大波则名为事件处理程序。

  函数证明和函数表明式的界别:**JS
引擎在条分缕析 JS 代码时当前推行环境中的函数声明会进步,而函数表明式只可以等到
JS
引擎执行到他所在的意义域时,才会逐行的剖析函数表明式。函数声明不能够运用自调用,而函数表明式能够采纳自调用。**

  函数的自调用就是在函数体后加括号,再用括号全副包起来。那样表达该函数是1个函数表明式。

1 (function (a, b) {
2     alert(a * b);
3 }(2, 3));    //返回:6

 

  (4)、构造函数

  函数通过重点字 function 定义,也足以选拔重要字
new
定义。函数即对象,对象拥有属性和办法,构造函数正是将概念的函数作为有个别对象的质量,函数定义作为靶子的质量,则名为对象方法。函数假使用于创建新的指标,就叫做对象的构造函数。

  (5)、闭包

  不难了然便是:子函数能够运用父函数中的局地变量。从前好多少个例证中都用到了闭包,即是 window.onload
函数下定义的点击事件函数。

  JS
的变量能够是全局变量或一些变量,在函数之外证明的变量正是全局变量,函数之内证明的变量便是一对变量,私有变量能够用到闭包。函数能够访问全局的变量,也足以访问片段的变量。成效域正是变量和函数的可访问范围,即效用域控制着变量和函数的可知性与生命周期,忽略块级功效域,功用域可分为全局功能域和一部分成效域。全局变量是大局对象的质量,局地变量是调用对象的性质。全局变量属于
window
对象,全局变量在别的地点都足以访问,局地变量只可以用来定义他的函数内部,这就是JS
的效应域链,即内层函数能够访问外层函数的片段变量,外层函数不能够访问内层函数的一部分变量。全局变量和部分变量即使名称相同,他们也是多个不等的变量。修改个中2个,不会修改另三个的值。
此地要求专注:在函数内注脚的量,假若不应用首要字 var
,那么她正是多个全局变量。

  怀有函数都能访问全局变量,也便是装有的函数都得以访问他上一层的功效域。JS
帮衬函数嵌套,嵌套函数能够访问上一层的函数变量。闭包正是能够访问上一层函数作用域中的变量函数,即使上一层函数已经关门。

  闭包实例分析:

  假设想达成点击按钮计数,能够声爱他美(Aptamil)个变量,并赋开端值为
0,函数设置值加
1。不过那些全局变量在另各地点都足以利用,纵然没有调用这些函数,计数也会改变。

 1 <body>
 2 <input type="button" value="全局变量计数" onclick="show()">
 3 <input type="button" value="调用一次变量" onclick="change()">
 4 <p id="p1">0</p>
 5 <script>
 6 var num = 0;
 7 function count() {
 8     return num += 1;
 9 }
10 var oP = document.getElementById("p1");
11 function show(){
12     oP.innerHTML = count();
13 }
14 function change(){
15     alert(num = 10);
16 }
17 </script>
18 </body>

 

  上边例子,每一趟点击按钮计数不奇怪,但只要调用一遍变量,给变量赋值为
10,再点按钮将从 11
初阶计数。那么能够将那个变量注明在函数内,若是没有调用这么些函数,计数将不会改变。

 1 <body>
 2 <input type="button" value="点击计数" onclick="show()">
 3 <p id="p1">0</p>
 4 <script>
 5 function count() {
 6     var num = 0;
 7     return num += 1;
 8 }
 9 var oP = document.getElementById("p1");
10 function show(){
11     oP.innerHTML = count();
12 }
13 </script>
14 </body>

 

  点击按钮能够看看不快心满志,就算这么无法在函数外部使用变量,也就不可能修改计数,可是每一回点击按钮值都为
1。因为变量是在函数内注明的,唯有该函数能够动用,每点击按钮3回,调用三次该函数,每一遍调用变量的初叶值都为
0,再加 1 正是 1。那么使用 JS
的嵌套函数能够成功这一题目,内嵌函数能够访问父函数的变量。

 1 <body>
 2 <input type="button" value="计数" onclick="show()">
 3 <p id="p1">0</p>
 4 <script>
 5 function count(){
 6     var num = 0;
 7     function add(){
 8         num += 1;
 9     }
10     add();
11     return num;
12 }
13 add();    //报错:未定义
14 function show(){
15     document.getElementById("p1").innerHTML = count();
16 }
17 </script>
18 </body>

 

  即便这么能够缓解变量的难题,可是只要得以在表面调用
add()
函数的话,那么点击按钮计数就全面了,梦想总是美好的,现实却是残暴的,内嵌函数无法在表面被调用。那时候大家的闭包就来了,我们须求闭包,有了闭包那个难题就真正完美了。

 1 <body>
 2 <input type="button" value="计数" onclick="show()">
 3 <p id="p1">0</p>
 4 <script>
 5 var count = (function (){
 6     var num = 0;
 7     return function (){
 8         return num += 1;
 9     };
10 }());
11 var oP = document.getElementById('p1');
12 function show(){
13     oP.innerHTML = count();
14 }
15 </script>
16 </body>

 

  变量 count
钦定了函数自作者调用再次来到值,自小编调用函数只举办三回,计数早先值为
0,并回到函数表明式,计数受匿名函数成效域的保卫安全,只好通过 count()
方法修改。

  变量 count
可以当作贰个函数使用,他能够访问函数上一层功用域的计数,那就称为 JS
闭包,函数拥有和谐的个体变量。

 

 

  

 

操作成分属性

获得的页面成分,就足以对页面成分的品质进行操作,属性的操作包罗属性的读和写。

javascript语句与注释

  • 一条javascript语句应该以“;”结尾

<script type="text/javascript">
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
alert(sTr);
};
fnAlert();
</script>
  • javascript注释

<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>

壹 、获取页面包车型地铁成分,就能够对页面成分的属性实行操作,属性的操作包罗属性的读和写。

操作属性的措施 

1、“.” 操作
2、“[ ]”操作

变量、函数、属性、函数参数命名规范

差距轻重缓急写
先是个字符必须是字母、下划线(_)或然新币符号($)
其他字符能够是字母、下划线、美金符或数字匈牙利(Hungary)取名风格

对象o Object 比如:oDiv 数组a Array 比如:aItems 字符串s String
比如:sUserName 整数i Integer 比如:iItemCount 布尔值b Boolean 比如:
bIsComplete 浮点数f Float 比如:fPrice 函数fn Function 比如:fnHandler
正则表明式re RegExp 比如:reEmailCheck

操作属性的点子:a、”.”操作   b、”[ ]”操作

质量的写法如下:

a、html的质量和js里面包车型地铁质量写法一样

b、class属性写成”className”

c、”style”属性之中的质量,有横杠的写成驼峰式。比如:”font-size”改成”style.fontSize”

举例表明:通过”.”操作属性

4858美高梅 5

b、class属性写成”className”

4858美高梅 6

c、”style”属性之中的属性,有横杠的写成驼峰式。比如:”font-size”改成”style.fontSize”

4858美高梅 7

 举例表达:通过”[ ]”操作属性

4858美高梅 8

属性写法

① 、html的性质和js里面属性写法一样
② 、“class” 属性写成 “className”
③ 、“style”
属性里面包车型大巴习性,有横杠的改变驼峰式,比如:“font-size”,改成”style.fontSize”

透过“.”操作属性:

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = val;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.com" id="link1">baidu</a>

通过“[ ]”操作属性:

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 没反应
        oA.style[val1] = val2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://baidu.com" id="link1">百度</a>

取得成分方法:

首先种方法:将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>

其次种方式:将javascript语句放到window.onload触发的函数里面,获取成分的语句会在页面加载完后才实施

<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>

innerHTML 可以读取或许写入标签包裹的情节

4858美高梅 9

innerHTML 

innerHTML可以读取或然写入标签包裹的剧情

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var txt = oDiv.innerHTML;
        alert(txt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

操作成分属性

  • 属性写法 一 、“.” 操作 二 、“[ ]”操作

html的性子和js里面属性写法一样 ② 、“class” 属性写成 “className”
③ 、“style” 属性里面包车型大巴性能,有横杠的改动驼峰式,比如:“font-size”,改
成”style.fontSize”

三、JS函数

函数便是重复执行的代码片

函数

函数正是重复执行的代码片。

函数

  • 函数定义与实践
    在定义JS函数前须求加上function关键字

<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
  • 变量与函数预解析
    JavaScript解析进度分成五个阶段,先是编写翻译阶段,然后实施等级,在编写翻译阶段会将function定义的函数提前,并且将var定义的
    变量表明提前,将它赋值为undefined。

<script type="text/javascript">
fnAlert(); // 弹出 hello!
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
  • 领取行间事件
    在html行间调用的风云能够领到到javascript中调用,从而形成协会与行为分开

<!--行间事件调用函数 -->
<script type="text/javascript">
function fnAlert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = fnAlert;
function fnAlert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">

一 、函数定义与执行

4858美高梅 10

函数定义与实践

<script type="text/javascript">
    // 函数定义
    function aa(){
        alert('hello!');
    }
    // 函数执行
    aa();
</script>

匿名函数

  • 概念的函数能够不给名称,这几个号称匿名函数,能够将匿名函数直接赋值给成分绑定的事件来成功匿名函数的调用

<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>

② 、变量与函数预解析

JavaScript解析进程分成四个级次,先是编写翻译阶段,然后是履行等级,在编写翻译阶段会将function定义的函数提前,并且将var定义的变量注解提前,将它赋值为undefined.

4858美高梅 11

变量与函数预解析 

JavaScript解析进度分成七个级次,先是编译阶段,然后实施阶段,在编写翻译阶段会将function定义的函数提前,并且将var定义的变量证明提前,将它赋值为undefined。

<script type="text/javascript">    
    aa();       // 弹出 hello!
    alert(bb);  // 弹出 undefined
    function aa(){
        alert('hello!');
    }
    var bb = 123;
</script>

函数字传送参

<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
  • 函数’return’关键字 函数中’return’关键字的职能:
    一 、返回函数执行的结果 贰 、截至函数的运维 三 、阻止暗中认可行为

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>

三 、提取行间事件

在html行间调用的风云能够提取到javascript中调用,从而完毕组织与表现分别。

4858美高梅 12

领取行间事件 

在html行间调用的风浪能够提取到javascript中调用,从而成就组织与表现分别。

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function myalert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

封闭函数

  • 封闭函数是javascript中匿名函数的此外一种写法,成立叁个一从头就实施而不用命名的函数

(function myalert(){
alert('hello!');
})();
  • 还是能够在函数定义前增进“~”和“!”等标志来定义匿名函数

!function myalert(){
alert('hello!');
}()
  • 封闭函数的好处
    封闭函数能够创制1个独门的半空中,在封闭函数钦定义的变量和函数不会潜移默化外部同名的函数和变量,可以幸免命名争论,在页面
    上引入五个js文件时,用那种方法添加js文件相比较安全,比如:

var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();

好了,就写那样多了。好好消化把,学过Python的同室应该相比好明白。
最终老规矩,福利图一张 ,嘻嘻

4858美高梅 13

4858美高梅 14

 肆 、匿名函数

概念的函数不给名称,那个叫匿名函数,能够将匿名函数直接赋值给成分绑定的事件来完成匿名函数的调用。

4858美高梅 15

匿名函数

概念的函数能够不给名称,那么些名为匿名函数,可以将匿名函数直接赋值给成分绑定的风云来成功匿名函数的调用。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

⑤ 、函数字传送参

4858美高梅 164858美高梅 17

函数传参

<script type="text/javascript">
    function myalert(a){
        alert(a);
    }
    myalert(12345);
</script>

6、函数’return’关键字

函数中’return’关键字的效率:

a、再次回到函数执行的结果

b、停止函数的运转

c、阻止暗中同意行为

4858美高梅 18

函数’return’关键字 

函数中’return’关键字的效果:
① 、重返函数执行的结果
② 、甘休函数的运维
③ 、阻止暗中同意行为

<script type="text/javascript">
function add(a,b){
    var c = a + b;
    return c;
    alert('here!');
}

var d = add(3,4);
alert(d);  //弹出7
</script>

七:条件语句

透过规范语句来决定程序的走向,就需求用到标准语句

标准化语句

通过标准来支配程序的走向,就须求用到基准语句。

运算符:

一 、算术运算符:+(加)、-(减)、*(乘)、/(除)、%(求余)

贰 、赋值运算符:=、+=、-=、*=、/=、%=

叁 、条件运算符:==、===、>、>=、<、<=、!=、||(或)、!(否)、&&(而且)

运算符 

一 、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
② 、赋值运算符:=、 +=、 -=、 *=、 /=、 %=
叁 、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

4858美高梅 19

if else

var a = 6;
if(a==1)
{
    alert('语文');
}
else if(a==2)
{
    alert('数学');
}
else if(a==3)
{
    alert('英语');
}
else if(a==4)
{
    alert('美术');
}
else if(a==5)
{
    alert('舞蹈');
}
else
{
    alert('不补习');
}

switch(对于多重原则的话,使用switch,因为switch质量更高)

4858美高梅 20

switch

var a = 6;

switch (a){
    case 1:
        alert('语文');
        break;
    case 2:
        alert('数学');
        break;
    case 3:
        alert('英语');
        break;
    case 4:
        alert('美术');
        break;
    case 5:
        alert('舞蹈');
        break;
    default:
        alert('不补习');
}

八 、数组及操作方法

数组就是一组数据的集合,javascript中,数组里面包车型大巴数码能够是见仁见智品类的。

数组及操作方法

数组便是一组数据的集结,javascript中,数组里面包车型地铁数量能够是见仁见智类别的。

概念数组的不二法门

一 、对象的实例化创制:var  aList = new Array(1,2,3);

二 、直接量创制:var aList2 = [1,2,3,’abc’];

概念数组的法门

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中的数据的措施

4858美高梅,壹 、获取数组的长度:aList.length;

4858美高梅 21

② 、用下标操作数组的有个别数据:aList[0];

4858美高梅 22

③ 、join()将数组成员通过2个相间符合并成字符串

4858美高梅 23

四 、push()和pop()从数组最终扩充成员或删除成员

4858美高梅 24

4858美高梅 25

伍 、unshift()和shift()从数组前边扩张成员或删除成员

4858美高梅 26

4858美高梅 27

陆 、reverse()将数组反转

4858美高梅 28

⑦ 、indexOf()再次回到数组相月素第三回面世的索引值(查找数组中首先次出现该值所在的索引号)

4858美高梅 29

八 、splice()数组中加进或删除成员
splice(m,n,a,b,c,d)从第m个因素起先,删除n个成分,然后在此任务扩大’a,b,c,d’多个元素

4858美高梅 30

操作数组中数据的章程 

一 、获取数组的尺寸:aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

二 、用下标操作数组的某部数据:aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

叁 、join() 将数组成员通过二个相间符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

④ 、push() 和 pop() 从数组最终扩张成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

五 、unshift()和 shift() 从数组前边扩展成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

六 、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

⑦ 、indexOf() 重临数组夷则素第一回面世的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

⑧ 、splice() 在数组中追加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

多维数组

 多维数组指的是数组的分子也是数组的数组

4858美高梅 31

多维数组 

多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

数组去重

4858美高梅 32

赢得成分的第两种方法 

document.getElementsByTagName(”),获取的是多少个抉择集,不是数组,然而能够用下标的法子操作选拔集里面包车型大巴dom成分。

 

 九 、循环语句

程序中开展有规律的重复性操作,须求选拔循环语句。

循环语句

先后中进行有规律的重复性操作,须要使用循环语句。

for循环

4858美高梅 33

for循环

for(var i=0;i<len;i++)
{
    ......
}

while循环(不常用)

4858美高梅 34

while循环

var i=0;

while(i<8){

    ......

    i++;

}

 十、Javascript组成

壹 、ECMAscript javascript的语法(变量、函数、循环语句等语法)。

② 、DOM文书档案对象模型,操作html和css的措施。

③ 、BOM浏览器对象模型,操作浏览器的部分艺术。

数组去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

十壹 、字符串处理形式

壹 、字符串合并操作:”+”

4858美高梅 35

贰 、parseInt()将数字字符串转换为整数

叁 、parseFloat()将数字字符串转换为小数

4858美高梅 364858美高梅 37

四 、split()把一个字符串分隔成里面包车型大巴某部字符串组成的数组

4858美高梅 384858美高梅 39

⑤ 、charAt(索引值)获取字符串中的某3个字符

能够用来验证是还是不是为id采纳器

 4858美高梅 40

六 、indexOf()查找字符串中是还是不是含有某字符,找到就输出字符串出现的义务,找不到输出-1

 4858美高梅 414858美高梅 42

柒 、substring()截取字符串用法:substring(start,end)(不包括end)

4858美高梅 43

如:获取地址栏中的id号

4858美高梅 444858美高梅 45

⑧ 、toUpperCase()字符串转大写

4858美高梅 46

⑨ 、toLowerCase()字符串转小写

4858美高梅 47

Javascript组成

壹 、ECMAscript javascript的语法(变量、函数、循环语句等语法)
② 、DOM 文书档案对象模型 操作html和css的法门
叁 、BOM 浏览器对象模型 操作浏览器的有的艺术

用最快的格局把三个字符串反转

先是把该字符串转换为数组,然后对数组实行反转,最终把数组通过分隔符连接起来

4858美高梅 48

字符串处理形式

① 、字符串合并操作:“ + ”
二 、parseInt() 将数字字符串转化为整数
叁 、parseFloat() 将数字字符串转化为小数
④ 、split() 把三个字符串分隔成字符串组成的数组
⑤ 、charAt() 获取字符串中的某七个字符
⑥ 、indexOf() 查找字符串是还是不是带有某字符
⑦ 、substring() 截取字符串 用法: substring(start,end)(不包蕴end)
捌 、toUpperCase() 字符串转大写
九 、toLowerCase() 字符串转小写

十② 、 调节和测试程序的不二法门

1、alert

2、console.log();

3、document.title

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

十三 、类型转换

调节和测试程序的办法

1、alert

2、console.log

3、document.title

1、parseInt和parseFloat

4858美高梅 494858美高梅 504858美高梅 51

4858美高梅 524858美高梅 53 

4858美高梅 544858美高梅 55

定时器

定时器在javascript中的成效
一 、制作动画
二 、异步操作
叁 、函数缓冲与节流

② 、隐式转换”==”和”-“

4858美高梅 564858美高梅 57

定时器类型及语法

/*
    定时器:
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

3、NaN和isNaN

定时器制作时钟

<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }

    function toweek(n){
        if(n==0)
        {
            return '星期日';
        }
        else if(n==1)
        {
            return '星期一';
        }
        else if(n==2)
        {
            return '星期二';
        }
        else if(n==3)
        {
            return '星期三';
        }
        else if(n==4)
        {
            return '星期四';
        }
        else if(n==5)
        {
            return '星期五';
        }
        else
        {
            return '星期六';
        }
    }


    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
......
<div id="div1"></div>

4858美高梅 584858美高梅 594858美高梅 60

 

定时器制作倒计时

4858美高梅 614858美高梅 62

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2018,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '距离2018年9月10日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

View Code

类型转换

壹 、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

② 、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 弹出'相等'
alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

变量效能域

变量成效域指的是变量的效果范围,javascript中的变量分为全局变量和局地变量。

① 、全局变量:在函数之外定义的变量,为总体页面公用,函数内部外部都能够访问。
② 、局地变量:在函数内部定义的变量,只幸亏概念该变量的函数内部访问,外部不能访问。

<script type="text/javascript">
    //全局变量
    var a = 12;
    function myalert()
    {
        //局部变量
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); //弹出12和23
    alert(a);  //弹出12    
    alert(b);  //出错
</script>

封闭函数

封闭函数是javascript中匿名函数的其它一种写法,创制一个一起初就进行而不用命名的函数。

诚如定义的函数和执行函数:

function changecolor(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}
changecolor();

封闭函数:

(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
})();

还足以在函数定义前拉长“~”和“!”等标志来定义匿名函数

!function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}()

闭包

什么是闭包 

函数嵌套函数,内部函数能够引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回

function aaa(a){      
      var b = 5;      
      function bbb(){
           a++;
           b++;
         alert(a);
         alert(b);
      }
      return bbb;
  }

 var ccc = aaa(2);

 ccc();
 ccc();

改写成封闭函数的款型:

var ccc = (function(a){

  var b = 5;
  function bbb(){
       a++;
       b++;
     alert(a);
     alert(b);
  }
  return bbb;

})(2);

ccc();
ccc();

用处 

壹 、将3个变量长时间驻扎在内部存储器个中,可用来循环中存索引值

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++)
        {
            (function(i){
                aLi[i].onclick = function(){
                    alert(i);
                }
            })(i);
        }
    }
</script>
......
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

② 、私有变量计数器,外部不能访问,防止全局变量的污染

<script type="text/javascript">

var count = (function(){
    var a = 0;
    function add(){
        a++;
        return a;
    }

    return add;

})()

count();
count();

var nowcount = count();

alert(nowcount);

</script>

松手对象

1、document

document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

2、location

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
window.location.assign("http://www.baidu.com"); //跳转 可以后退
window.location.reload(); //刷新页面
window.location.replace(newUrl) //跟assign有点像 不过没有后退  替代掉

3、Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

 Jquery

jquery加载

将赢得成分的言辞写到页面底部,会因为元素还一向不加载而失误,jquery提供了ready方法消除那些题材,它的速度比原生的
window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

能够简写为:

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery选择器

jquery用法思想一

挑选有个别网页元素,然后对它进行某种操作

jquery选择器 

jquery选取器能够火速地挑选成分,选拔规则和css样式相同,使用length属性判断是不是采取成功。

$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选取集实行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素

对选用集进行函数过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

挑选集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

jquery样式操作

jquery用法思想二 
同3个函数达成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

越发注意 

采取器获取的三个因素,获取音讯获取的是首先个,比如:$(“div”).css(“width”),获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

jquery属性操作

一 、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('添加文字');

贰 、text() 取出或安装text内容

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('添加文字');

三 、attr() 取出或安装有些属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

肆 、prop()取出或设置有个别属性的值 对原始属性的

绑定click事件

给成分绑定click事件,能够用如下方法:

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

jquery特殊效果

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

jquery链式调用

jquery对象的方法会在进行完后重回这些jquery对象,全体jquery对象的艺术能够连起来写

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素,也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

jquery动画

透过animate方法可以设置成分某属性值上的卡通片,能够安装一个或七个属性值,动画执行到位后会执行1个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

参数能够写成数字表明式:

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

尺寸相关、滚动事件

① 、获取和装置成分的尺码

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

二 、获取成分相对页面包车型客车相对地方

offse()

叁 、获取可视区中度

$(window).height();

④ 、获取页面中度

$(document).height();

伍 、获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

陆 、页面滚动事件

$(window).scroll(function(){  
    ......  
})

jquery事件

事件函数列表:

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数,依次运行多个函数
unload() 用户离开页面

绑定事件的别样模式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

裁撤绑定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

积极触发与自定义事件

继续努力触发 

可应用jquery对象上的trigger方法来触发对象上绑定的轩然大波。

自定义事件 

而外系统事件外,能够透过bind方法自定义事件,然后用tiggle方法触发那个事件。

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//触发hello事件
element.trigger("hello");

事件冒泡

怎么着是事件冒泡 

在3个目的上接触某类事件(比如单击onclick事件),假设此目的定义了此事件的处理程序,那么此事件就会调用这一个处理程序,借使没有定义此事件处理程序依然事件再次来到true,那么这些事件会向那几个目的的父级对象传播,从里到外,直至它被拍卖(父级对象具备同类事件都将被激活),大概它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

事件冒泡的效益 

事件冒泡允许四个操作被集中处理(把事件处理器添加到三个父级成分上,防止把事件处理器添加到四个子级元素上),它还是能够让你在对象层的两样级别捕获事件。

阻止事件冒泡 

事件冒泡机制有时候是不须要的,须要阻止掉,通过 event.stopPropagation()
来阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻挡默许行为 

掣肘右键菜单

$(document).contextmenu(function(event) {
    event.preventDefault();
});

集合阻止操作 

// event.stopPropagation();
// event.preventDefault();

// 合并写法:
return false;

事件委托

事件委托正是接纳冒泡的原理,把事件加到父级上,通过判断事件源于的子集,执行相应的操作,事件委托首先能够窄幅减弱事件绑定次数,升高品质;其次能够让新进入的子成分也可以享有同样的操作。

诚如绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

// on 方法绑定
$('.list').on('click', 'li', function() {
    alert($(this).html());

});        

打消事件委托

// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

jquery成分节点操作

创办节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

安排节点 

① 、append()和appendTo():在现存成分的里边,在此在此之前边插入成分

var $span = $('这是一个span元素');
$('#div1').append($span);
......
<div id="div1"></div>

贰 、prepend()和prependTo():在现存成分的里边,从前边插入成分

叁 、after()和insertAfter():在现存成分的外表,从后边插入成分

四 、before()和insertBefore():在现存元素的外表,从近日插入成分

删去节点

$('#div1').remove();

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有