你的位置:首页 > 软件开发 > Java > 前端开发之JavaScript篇

前端开发之JavaScript篇

发布时间:2017-08-14 22:00:21
一、JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了。很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本,即EcmaScript。事实上ECMAScript只是JavaScript的一 ...

前端开发之JavaScript篇

一、JavaScript介绍 

前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了。很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本,即EcmaScript。

事实上ECMAScript只是JavaScript的一部分,完整的JavaScript是由以下三个部分组成的:

  核心(ECMAScript)

  文档对象模型(DOM)Document object model

  浏览器对象模型(BOM)Broswer object model

 

与html和css相比,js是一门成熟的编程语言,而且是前端唯一的一门编程语言。js的很多代码结构和Java相似,但是在语法上又没有很强制的要求,在使用中你会慢慢发现,这个东西很难会报错。既然是一门编程语言,就要从变量,数据类型,运算符,流程控制语句,函数(并不是所有的语言都有函数的概念),类和对象(js没有“类”)这些方面来入手学习。

二、ECMAScript(核心)

首先,js的注释和Java一样

  //单行注释

  /*多行注释*/

js的代码段是用大括号分割的,语句与语句之间用分号隔开,没有分号的话默认以换行符为分隔符。

1.变量

(1)声明变量时有var关键字,不用var关键字的话是全局变量,除非有需要,否则不建议用全局变量,会拖慢效率;

(2)变量要先声明,再定义,

  var i;

  i=10;

  或者简写成var i=10;(一般都这样处理)

(3)js还支持一行声明多个变量,并且可以是不同类型

  var i=10,j="zhang";

(4)如果声明一个变量x,却不给他赋值,打印的时候竟然也不报错,而是打印undefined

(5)变量的命名规范,这并不是某一种语言特有的,只要是变量,就会涉及这个问题,推荐一个匈牙利类型标记法:在变量名前加一个小写字母说明该变量的类型,后面的名字用驼峰命名法。

(6)变量命名:首字母必须是字母、下划线或者$三个中的一个,其余的可以是下划线、美元符号或者任何字母,数字。要避开关键字:

前端开发之JavaScript篇

2.数据类型

js中没有print,我们可以用alert(弹窗)或者console.log()(在浏览器的控制台打印)打印我们想要的结果

查看数据类型用typeof命令

var x=10;console.log(typeof(x));

(1)js中有的数据类型有:

    基本数据类型:Number(数值),String(字符串),Boolean(布尔值),Null,Undefined

    引用数据类型:object

    js中并没有列表,元组,字典这种数据类型,列表和元组是以数组对象实现的

(2)Number(数字类型)

不区分整型和浮点型;

(3)String(字符串类型)

由unicode字符、数字和标点符号组成的序列,特殊字符要加上反斜杠转义。

(4)Boolean(布尔类型)

布尔类型仅有两个值,true和false,在实际运算中,true=1,false=0

这个用在if判断语句后面,事实上if语句后面可以是任意数据类型,只要有布尔值就行了,这一点js和python一样,但是其他语言中,if后面必须是表达式

(5)null和undefined类型

undefined类型只有一个值,就是undefined,当函数没有明确返回值,或者声明的变量没有初识化的时候,就会产生这个值。

而null常出现在找不到对象的时候。        

3.运算符

js中的运算符和python中基本一样,说一说不一样的几个:

(1)i++和++i

这个学过c++的一定知道,没什么可说的,应该是为了考试才出的这种东西吧

  i++是先赋值再计算

  ++i是先计算再赋值

(2)"==="

首先在python中,如果这样一条语句

print(2=="2")

打印的结果一定是false,这是因为Python是一门强类型语言,不会自动转换变量的类型,但是,js是一种弱类型语言,在js中打印这个语句,结果会是true,因为js自动把数值类型的2转换成字符串类型的“2”,那么问题就来了,如果在js中,就是判断类型是否一样,不要自动转换,就用到了这个运算符“===”

在js的number类型中,还要一种数据类型是NaN类型,这是当遇到字符串转换成数字无效时得到的结果。比如:

var s="hello";var ret2=+s;console.log(ret2)

这样就会得到一个NaN

4.流程控制

(1)if条件语句

与Python不同的是,js中没有elif这种写法,多分支只能用else if

if (表达式){  执行语句}else if(表达式){  执行语句}else{  执行语句}

(2)switch-case语句

switch (表达式){  case 值1:语句1;break;  case 值2:语句2;break;  case 值3:语句3;break;  default:语句4;}

注意:值1,值2。。。。这些是确定的值,default是上述值都不是表达式的值的时候执行的语句;

  这个break是必要的,如果没有break,这些语句将都会执行

(3)while循环和for循环

while循环和Python一样,有三个要素:初始变量,判断条件,变量自加。就不多说了

说一下for循环

for循环方式一:条件循环(最常用)

for(var i=0;i<10;i++){  console.log("i")}

for循环方式二:遍历循环

var arr=["a","b","c"];for (var i in arr){  console.log(i)}

这个结果打印的是索引值0,1,2

想取到数组里的值,可以用arr[i],关于数组对象,一会儿会专门说

这是数组,js中没有字典这种数据类型,但是有一种类似的写法和用法

var info={"a":123,"b":234,"c":345};for (var i in info){  console.log(i)}

这种情况下,拿到的i就是“字典”中的“key”:a,b,c,取值同样是info[i]

5.对象

在我们学习了面向对象之后,应该有这种思想,见到“对象”这两个字,就马上想到对象有属性和方法。

(1)字符串对象

  创建方式有两种:        

        变量=“字符串”;  var str1="hello world"

        字符串对象名称=new String(字符串) var str1=new String("hello world")

  字符串对象就一个属性,length属性

方法:s为字符串对象

s.toLowerCase()    -----转成小写

s.toUpperCase()    -----转成大写

s.trim()         ------去除字符串两边空格

 

s.charAt()       ------获取指定位置字符,括号里为要获取的字符索引

s.indexOf()        -------查询指定字符的索引位置,括号里为要查找的字符

s.lastIndexOf()     -------跟上面这条功能一样,但是是反着找

s.match()        -------返回匹配字符串的数组,没有匹配到返回null

s.seach()        -------返回匹配到的字符串首字符的位置索引,匹配不到返回-1

 

s.substr(start,length)    截取指定长度字符串,start是开始位置的索引值,length表示长度

s.substring(start,end)    截取字符串,start是开始位置索引,end是结束位置索引,取之间的字符串

s.slice(start,end)      切片字符串

s.replace(oldstr,newstr)    替换字符串,(旧的,新的)

s.split()          分割字符串,结果放到一个数组中

s.concat(addstr)       拼接字符串,括号里为要拼接的字符串

演示:

s="hello";  console.log(s.toLowerCase());    //hello  console.log(s.toUpperCase());    //HELLO  console.log(s.charAt(2));      //l  console.log(s.indexOf("o"));    //4  console.log(s.lastIndexOf("o"));  //4  console.log(s.match("lo"));     //[object Array]["lo"]  console.log(s.match("lol"));    //null  console.log(s.search("lo"));    //3  console.log(s.search("lol"));    //-1  console.log(s.substr(1,3));     //ell  console.log(s.substring(1,3));   //el  console.log(s.slice(1,3)) ;     //el  console.log(s.replace("ell","o")) ; //hoo  console.log(s.split("e")) ;     //[object Array]["h", "llo"]  console.log(s.concat("world")) ;  //helloworld

 

(2)数组对象(array对象)

创建数组的三种方式:  

  •   var  arr=[1,2,3];
  •         var arr=new Array[1,2,3];
  •         var arr=new Array(3);

      arr[0]=1;

      arr[1]=2;

      arr[2]=3;

还可以创建二维数组,类似一个列表,arr[ ] [ ],第一个索引为行,第二个索引为列

join方法:

  在Python中的join方法的用法是这样的:    

s1="hello"s2="world"s3="-".join([s1,s2])print(s3)      #hello-world

  在js的数组中正好反过来,

console.log(["hello","world"].join("-"))  //hello-world

reverse方法和sort方法:

  都是对数组进行排序的,reverse是颠倒顺序,sort是按首字母的ascii码表位置排序

slice方法:

  对数组进行切片操作,参数为开始位置和结束位置的索引值

splice方法:

  删除子数组,有几个参数

  arr.splice(start,deleteCount,value)

  start代表开始位置(从开始位置后面开始删),deleteCount 表示删除数组元素的个数,value 表示在删除位置插入的数组元素(可省略)

push和pop方法:

  在数组的最后添加和删除元素

unshift和shift方法:

  在数组开始位置添加和删除元素

(3)时间对象

  创建时间对象:var timer = new Date()

  

前端开发之JavaScript篇前端开发之JavaScript篇
获取日期和时间getDate()         获取日getDay ()         获取星期getMonth ()        获取月(0-11)getFullYear ()      获取完整年份getYear ()        获取年getHours ()        获取小时getMinutes ()       获取分钟getSeconds ()       获取秒getMilliseconds ()    获取毫秒getTime ()        返回累计毫秒数(从1970/1/1午夜)//设置日期和时间//setDate(day_of_month)    设置日//setMonth (month)         设置月//setFullYear (year)        设置年//setHours (hour)     设置小时//setMinutes (minute)   设置分钟//setSeconds (second)   设置秒//setMillliseconds (ms)    设置毫秒(0-999)//setTime (allms)   设置累计毫秒(从1970/1/1午夜)var x=new Date();x.setFullYear (1997);  //设置年1997x.setMonth(7);    //设置月7x.setDate(1);    //设置日1x.setHours(5);    //设置小时5x.setMinutes(12);  //设置分钟12x.setSeconds(54);  //设置秒54x.setMilliseconds(230);    //设置毫秒230document.write(x.toLocaleString( )+"<br>");//返回1997年8月1日5点12分54秒x.setTime(870409430000); //设置累计毫秒数document.write(x.toLocaleString( )+"<br>");//返回1997年8月1日12点23分50秒
时间对象

(4)math对象,就是把内置函数封装到math对象中,使用时需要用Math来调用方法

abs(x)  返回数的绝对值。exp(x)  返回 e 的指数。floor(x)对数进行下舍入。log(x)  返回数的自然对数(底为e)。max(x,y)  返回 x 和 y 中的最高值。min(x,y)  返回 x 和 y 中的最低值。pow(x,y)  返回 x 的 y 次幂。random()  返回 0 ~ 1 之间的随机数。round(x)  把数四舍五入为最接近的整数。sin(x)  返回数的正弦。sqrt(x)  返回数的平方根。tan(x)  返回角的正切。

(5)函数对象(重点)

  //定义一个函数  function 函数名(参数) {    函数体  }    //调用函数  函数名()

注意:js中函数的调用可以在定义之前,这点和Python不同,Python是一行一行的执行,而js是先编译一遍,再去执行

关于函数的参数:

  在函数内部有一个arguments对象,这个对象里包含了函数调用时传的参数

  

  function add() {    console.log(arguments);    var sum=0;    for (var i=0;i<arguments.length;i++){      sum+=arguments[i] ;    }    console.log(sum);  }  add(1,2,3,5,7);  //[object Arguments]{0: 1, 1: 2, 2: 3, 3: 5, 4: 7, length: 5}  //18

js中也有匿名函数,在后面事件绑定的时候会经常用到

三、BOM对象(浏览器对象)

1.windows对象

  在浏览器中,每个打开的网页是一个窗口,有三种方法实现弹出框:

  (1)alert(123)       在窗口中弹出“123”,点击确定消失

  (2)var  ret=confirm('zhang');

      console.log(ret);    在窗口中弹出“zhang“,有确定和取消两个按钮,点击确定,会在后台返回一个true,点击取消,会返回一个false

  (3)var ret=prompt("input a number")  在窗口弹出一个输入框,同样可以通过一个变量来接收用户输入的内容

 

2.setInterval() 和 clearInterval()

setInterval()是按照指定的时间周期(毫秒为单位)来连续调用函数或者计算表达式,第一个参数为函数,第二个参数为时间间隔

clearInterval()是取消由setInterval()设置的操作,这个的参数为setInterval()的返回值

示例:在一个input框右面有两个按钮,点击开始就在框中每隔1秒中打印一次当前时间,点击停止就停止刷新

前端开发之JavaScript篇前端开发之JavaScript篇
<body>  <input type="text">  <button >开始</button>  <button >停止</button><script>  ele_start=document.getElementsByClassName("start")[0];//开始按钮  ele_end=document.getElementsByClassName("end")[0];  //停止按钮  function foo() {    var timer=new Date().toString();    var ele=document.getElementsByTagName("input")[0];    ele.value=timer.slice(4,25);//是框内显示最适合查看代码效果的部分  }  var ID;//定义一个全局变量,用于接收返回值  ele_start.onclick=function () {    if (ID==undefined){       //为了解决第二次点击开始的时候,代码不执行的bug      foo();           //为了实现一点击开始,马上就能出现时间的效果    ID=setInterval(foo,1000);    }  }  ele_end.onclick = function () {    clearInterval(ID);    ID=undefined;  //清除定时器后再给id重新赋值  }</script></body>
View Code

3.setTimeout() 和 clearTimeout()

这个是在指定的时间后调用函数或计算表达式,用法和上面那两个一样。区别是这个只会执行一次。

四、DOM对象    这才是最大的重点

 在DOM中,所有对象都是节点对象,其中

  document对象是:整个html文档

  element对象是指:html中的任何一个标签都是一个element对象

  想要对标签执行操作需要两步:查找标签和操作标签

1.查找标签

  (1)直接查找

  document.getElementsByClassName("classname");//根据class查找标签  document.getElementsByTagName("elementname");//根据标签名查找标签  document.getElementById("idname");      //根据ID名查找标签  document.getElementsByName("name");     //根据name属性查找标签

这四种方法中,只有  document.getElementById("idname")是找到一个标签,其他三种都是找到多个,将结果放到一个数组中,可以通过索引分别取到

  (2)通过节点属性查找

var ele=document.getElementsByClassName("start")[0];  ele.parentElement;//  查找父节点  ele.children;   //  查找所有子标签  ele.firstElementChild; //查找第一个子标签元素  ele.lastElementChild;  //查找最后一个子标签元素  ele.nextElementSibling; //查找下一个兄弟标签  ele.previousElementSibling;//查找上一个兄弟标签

需要注意的是,没有直接的属性可以查找到所有的兄弟标签,如果想在DOM中找到所有子标签,可以通过遍历    操作标签的父标签的所有子标签,然后用if条件判断排除当前操作标签的方法。

2.事件绑定的方式

方式一:

<body>  <div>    <button onclick="foo()">点击</button>  </div><script>  function foo() {    alert(123)  }</script></body>

这种方式,js代码和html代码杂糅在一起,耦合性太强了

方式二:

<body>  <div>    <button>点击</button>  </div><script>  ele_button=document.getElementsByTagName("button")[0];  ele_button.onclick=function () {    alert(123)  }</script></body>

但是这种方**有一个问题:js代码会在页面出现的时候就已经加载完了,如果后面有新添加的标签,就不能绑定这个事件了,因为js代码已经加载过一遍,有几个绑定事件的标签就已经确定了,这个问题在jQuery中可以很方便解决,在DOM对象中,有两种解决办法可供参考:

    1.把标签绑定的事件写到函数中,即第一种绑定事件的方式

    2.在添加标签的代码中,再写一遍事件绑定函数

如果上面这点没看明白的话,可能你对查找到的标签是个数组这件事还不太明白,再写一个例子:

<body>  <div>    <button>添加</button>    <button>删除</button>    <button>编辑</button>  </div><script>  eles_button=document.getElementsByTagName("button");  //此时eles_button并不是一个标签了,而是有三个标签的集合  //给每个标签绑定事件就要通过循环遍历这个数组来拿到每个标签  for(var i=0;i<eles_button.length;i++){    eles_button[i].onclick=function () {    alert(123)    }  }</script></body>

通过这个例子再说明上面的问题,在绑定事件的时候,找标签的过程就已经完成了,只找到了三个标签,但是我们新添加一个button后,代码不会再次重新刷新,所以新添加的这个button并没有绑定事件。

3.对标签操作

  (1)对class操作    

   ele.classList.add("hide")    //为标签添加class  ele.classList.remove("hide")  //为标签移除class

练习:左侧菜单

前端开发之JavaScript篇前端开发之JavaScript篇
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="x-ua-compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Title</title>  <style>    .left{      width: 20%;      height: 800px;      background: grey;      float: left;    }    .right{      width:80%;      height:800px;      background: navajowhite;      float: left;    }    .title{      background: purple;      margin-top: 10px;    }    ul{      background: green;    }    .hide{      display: none;    }  </style></head><body>  <div >      <div >        <div >菜单一</div>          <ul>            <li>111</li>            <li>111</li>            <li>111</li>          </ul>      </div>      <div >      <div >菜单二</div>      <ul >        <li>222</li>        <li>222</li>        <li>222</li>      </ul>      </div>    <div >      <div >菜单三</div>      <ul >        <li>333</li>        <li>333</li>        <li>333</li>      </ul>    </div>  </div>  <div ></div>  <script>//    查找标签    var eles_title=document.getElementsByClassName("title");    for (var i=0;i<eles_title.length;i++){      eles_title[i].onclick=function () {        this.nextElementSibling.classList.remove("hide");  //this就是触发事件的标签        var eles_child=this.parentElement.parentElement.children;        for (var j=0;j<eles_child.length;j++){          if(eles_child[j].firstElementChild!=this) {            eles_child[j].lastElementChild.classList.add("hide")//添加hide属性,就把这个标签隐藏了          }        }      }    }  </script></body></html>
View Code

4.节点操作

  ele.createElement()     //创建一个节点,括号里是标签名  ele.removeChild()      //父标签删除一个子节点,括号里是标签对象  ele.replaceChild()     //替换标签,ele是父标签,括号里依次是旧的标签对象,新的标签对象  ele.appendChild()      //父标签添加子标签

这里单独说一下复制标签:cloneNode

<script>  var ele_copy=document.getElementsByTagName("div")[0].cloneNode();//这种只是拷贝最外层的节点  var ele_copy=document.getElementsByTagName("div")[0].cloneNode(true);//这种才是完整的拷贝  这里有一个bug,如果被拷贝的对象有id属性,仍然可以拷贝,而且拷贝出来的对象也有这个id  还有一个问题,源标签的绑定事件不会被拷贝  </script>

 

5.获取标签中的文本

ele.innerText 和 ele.innerHTML

这是取值,赋值就是

ele.innerText="<a href='#'>click</a>"ele.innerHTML="<a href='#'>click</a>"

innerText就是纯文本,但是innerHTML 会把拿到的元素当时一个标签(如果这个元素是一个标签)

6.属性值操作 attribute

我们平时取属性值的时候就直接用的  标签.属性

    给属性赋值就是直接用的   标签.属性=“  ”

但是事实上,是有个attribute方法的

属性取值:ele.getAttribute(属性名)

属性赋值:ele.setAttribute(属性名)

删除属性:ele.removeAttribute(属性名)

7.DOM事件

  onclick       //点击标签  ondbclick      //双击标签  onfocus       //元素获得焦点  onblur       //元素失去焦点  onchange      //域的内容发生改变,常用于表单元素  onkeydown      //键盘按键被按下  onkeypress     //某个键盘按键被按下并松开。  onkeyup       //某个键盘按键被松开。  onload       //一张页面或一幅图像完成加载。  onmousedown     //鼠标按钮被按下。  onmousemove     //鼠标被移动。  onmouseout     //鼠标从某元素移开。  onmouseover     //鼠标移到某元素之上。  onmouseleave    //鼠标从元素离开  onselect      //文本被选中。  onsubmit      //确认按钮被点击。

(1)onchange事件

通常用于表单标签,一个表格里的内容被改变时(我们选择一个选项时),触发事件

练习:省市二级联动

前端开发之JavaScript篇前端开发之JavaScript篇
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="x-ua-compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Title</title></head><!--需求:两个表单,左边是省份,右边是城市,左边选择省份后,右边内容是对应的城市--><body><select name="" id="province">  <option value="">请选择省份</option>  <option value="">河北</option>  <option value="">山东</option></select><select name="" id="city">  <option value="" id="select_city">请选择城市</option></select></body><script>  var info={    "河北":["北京","衡水"],    "山东":["青岛","潍坊"]  };//  js中虽然没有字典的说法,但是有类似的用法。  var ele_pvn=document.getElementById("province");  var ele_city=document.getElementById("city");  var ele_select; //定义一个全局变量  ele_pvn.onchange=function () {    ele_city.options.length=1;   //保留一项,后面的内容全部清除    for (var i in info){      if (i==(this.children[this.selectedIndex]).innerText){ //判断//        this.selectedIndex是取到选择内容的索引值        for(var j in info[i]){          //思路是每选择一个省份,就把后面城市里的内容全部清空,然后从“字典”中根据选择的省份,重新新建一个后面城市的标签          var city_option=document.createElement("option");            city_option.id="selected";                       ele_select=document.getElementById("selected");          city_option.innerText=info[i][j];          ele_city.appendChild(city_option);             }      }    }  }</script></html>
View Code

(2)onkeydown事件,用于input输入框

这个事件是按键盘上任意按键都会触发,这其实意义不大。如果想要指定按键,该怎么做?

这里用到一个event对象,event对象是保存事件触发状态的对象,由操作系统发送

  ele.onkeydown=function (e) {    e=e||window.event;  //这句代码是为了避免出现某些浏览器的不兼容问题    console.log(e.keyCode);//这样会打印按键的ascii码    console.log(String.fromCharCode(e.keyCode))//这句代码可以把ascii码转换成字符  }

(3)onload事件

script中涉及到查找标签时,js代码必须写在html代码下面,否则会因为找不到标签而报错

但是如果就是想让js代码在上面,就用到onload事件

或者再说一个应用场景:浏览器加载图片实际上是和加载其他文本标签分开的,是新开了一个线程。有事网速不给力的时候,就会出错。这时就可以用到这个事件,让其他标签等待图片加载完才能操作

用法如下:

<script>  window.onload=function () {    var ele=document.getElementsByTagName("div")    ele.style.color="green";      }</script>

(4)onsubmit事件

这个事件是给form表单用到,是在表单提交的时候触发。表单标签里面的那个submit标签,点击之后会刷新页面,同时把数据提交给后台服务器(如果action指定了地址),这是submit自己默认的事件,我们用onsubmit事件的意义就是要阻止submit的默认事件。比如在用户登录输入用户名密码的时候,前端可以先判断一下格式是否正确,如果格式都不正确,就没必要发送给后端了。

onsubmit事件一定是在submit事件之前触发的,否则就没意义了。

阻止submit默认事件的方法有两个:

  1.return false

  2.e.preventDefault()

练习:用户登录验证

前端开发之JavaScript篇前端开发之JavaScript篇
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="x-ua-compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Title</title>  <style>    div{      margin-top: 30px;    }  </style></head><body><form action="" >  <div id="abd" ><input type="text" placeholder="用户名" ></div>  <div><input type="password" placeholder="密码" ></div>  <div id="abc"></div>  <div><input type="submit" value="提交" ></div></form></body><script>   var ele_text=document.getElementsByClassName("text")[0];   var ele_submit=document.getElementsByClassName("form")[0];   var ele_abd=document.getElementById("abd");   ele_submit.onsubmit=function () {     if (ele_text.value.length>5){       var ele_warm=document.createElement("h5");       ele_warm.innerText="用户名超出规定长度!";       ele_warm.style.color="red";       ele_warm.style.display="inline";       ele_abd.appendChild(ele_warm);       return false;//阻止submit默认事件     }   }</script></html>
View Code

(5)onmouseout和onmouseleave事件

这两个事件都是鼠标移开时触发的事件,不同的是:

  •   不论鼠标指针离开被选元素还是任何子元素,都会触发onmouseout事件
  •         只有在鼠标指针离开备选元素时,才会触发onmouseleave事件

可以通过一个左侧菜单的案例来搞清楚这两个的区别

前端开发之JavaScript篇前端开发之JavaScript篇
  <style>    .container{      width: 300px;    }    .title{      background:green;      line-height: 44px;      text-align: center;    }    .list{      display: none;    }    .list div{      line-height: 40px;    }    .item1{      background: purple;    }    .item2{      background: orange;    }    .item3{      background: greenyellow;    }  </style></head><body>  <div >    <div >text</div>    <div >      <div >111</div>      <div >222</div>      <div >333</div>    </div>  </div>  <script>    var ele=document.getElementsByClassName("title")[0];    var ele_list=document.getElementsByClassName("list")[0];    var ele_box=document.getElementsByClassName("container")[0];    ele.onmouseover =function () {      ele_list.style.display="block";    };//    ele.onmouseleave =function () {//      ele_list.style.display="none";//    }这样是有问题的,鼠标往下走也隐藏了,应该给盒子绑定    ele_box.onmouseleave =function () {      ele_list.style.display="none";    };</script>
View Code

 

8.事件传播

父标签绑定事件a,子标签绑定事件b,那么触发事件b的时候,肯定事件a也会触发,这就叫事件绑定

我们需要知道的是怎么解除事件绑定,方法是在子标签中添加e.stopPropagation

<script>  ele_inner.onclick =function (e) {    alert(123);    e.stopPropagation()  }</script>

写一个跑马灯的例子,感觉还挺好玩的,下起了雨,下雨天留客天留我不留

前端开发之JavaScript篇前端开发之JavaScript篇
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="x-ua-compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Title</title></head><body>  <h4>下雨天留客天留我不留</h4></body><script>  function foo() {    var ele=document.getElementsByTagName("h4")[0];    var first_str= ele.innerText.charAt(0);    var second_str=ele.innerText.slice(1,ele.innerText.length);    var new_str=second_str + first_str;    ele.innerText=new_str  }    setInterval(foo,500)</script></html>
留是不留

9.标签与标签之间绑定

考虑一个需求:京东下面的商品详情,评论,售后这些内容,是通过点击“商品详情”,“评论”,“售后”这些按钮,就可以显示对应的内容,这个对应关系是怎么实现的呢,这用到了自定义属性

<body><ul>  <li gname="c1">商品详情</li></ul><div id="c1">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</div></body>

这样就可以实现两个标签的绑定

前面说了,取属性值一般都用点属性的方式,但是在这里取这个自定义属性,就只能用getAttribute方法了。

 

原标题:前端开发之JavaScript篇

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。