JavaScript笔记

时间：2025-03-29 08:00:37

day06

JavaScript

网页所有的交互都要使用JavaScript

Javascript的发展

网景找到ECMA(欧洲计算机联盟协会)统一了Javascript标准

我们要学习的就是这一套统一的标准

JavaScript的特点

  1. 可以使用任何文本编译工具编写
  2. 由浏览器内置的JavaScript引擎执行代码
  3. 解释执行:事先不编译,逐行执行
  4. 基于对象:内置了大量写好的对象

学习javascript

1. 学习如何找到标签对象

2. 学习对标签对象的属性内容,进行增删改查.

JavaScript的使用

  1. 事件定义式,在事件定义时直接写js代码

  2. 嵌入式,在<script>标签内,写js代码

    /* 把js代码写到script标签内部 /
    /     script标签可以放到html的任何位置 */
    /*但通常放到head标签中 */

    /* function是关键字,用来声明函数 /
    /     fn1是函数名,小括号内可以声明参数 /
    /     js中函数都是公有的,不需要修饰符 /
    /     函数不需要声明返回值类型 /
    /     函数体中没写retrun,函数调用时默认返回值为undefined */
    function fn1(){
    alert(“我是嵌入式js的使用”);
    }
    function fn2(){
    alert(“我是验证返回值”);
    return 123;
    }

  3. 文件调用式

    文件中

    function fn3(){
    (“我是文件调用式”);
    }

    在标签内部写

总结:

文件调用式,在单独的.js文件写js代码

需要引用到网页才能使用

引用时:script标签必须是双标签,哪怕没有内容

这个script作用就是导入外部的js文件,

不允许同时引用文件,又写js代码

  1. js注释:<script>标签中,是js地盘,要使用js的注释.

    // /* js不区分单引号和双引号 */

课堂练习

  1. 事件定义式
  2. 嵌入式
  3. 文件调用式
  4. 注释

js数据类型

1.变量的声明和定义

<script type="text/javascript">
  //声明变量
  var x;
  //给变量赋值
  //x=9;
  //x="abc";
  (x);
  var y=123;
</script>

总结:在<script>标签中写js代码一般有两种形式

1. 封装成函数,该函数在页面加载完成之后,用户激活事件时,被调用.

2. 直接在标签中写js代码,这段js代码是在页面加载过程中被直接调用,其调用时机甚至比body渲染还早.

number 类型

不区分整型和浮点型

所有的数字,都采用64位浮点格式存储

js中没有double的概念

String类型

由Unicode字符.数字.符号组成字符序列

由首尾一对单引号或者一对双引号括起.

单引号和双引号,嵌套的时候,无需转义

其他特殊字符需要转义,\n

js中没有char的概念,字符就是一个长度的string

boolean

true和false

做数学运算的时候,自动转型为数值参与计算

  var s="hello";
  var n=9;
  var b=true;
  
  (s+n);//hello9
  (s+b);//hellotrue
  (n+b);//true--1  false--0
  (b+b);//

在参与纯数学运算时,true—1 false—0

js引擎对boolean类型的解释规则

  1. 非空字符串解释为true,""字符串解释为false
  2. 非0数字,解释为true.0为false
  3. null undefined都为false

强制类型转换

//var n=3.14;
//var s="3.14";
//(()+1);
//(parseInt(s)+1);
//(parseFloat(s)+1);
//(parseFloat("abc")+1);//not a number
//(parseInt(""));//NaN

typeof

function fn1(){
    var num=100;
    (typeof(num)=="number");
    var str="abc";
    (typeof(str)=="string");
    (typeof(null));
    (typeof(undefined));
}

isNaN

function fn2(){
    //is 是什么
    //NaN not a number  不是一个数
    //isNaN 是不是 不是一个数
    (isNaN(56));//f  不是 NaN
    (isNaN("32"));//f
    (isNaN("abc"));//t 是 NaN
    (isNaN(""));//f
    (parseInt(""));//此处是个bug
}

课堂练习

[外链图片转存失败(img-HLySXJWT-1565451396209)()]

    <body>
        <input type="text" >
        <input type="button" value="平方" onclick="cal();">
        = <span >计算的结果</span>
    </body>

    <script type="text/javascript">
    function cal(){
        //1.获取文本框内的数 value
        var input=("num");
        var num=;
        var span=("result");
        (span);
        //2.判断这个数是不是数字
        if(num!=""){
            if(isNaN(num)){
                //4.不是数字,span中提示用户输入错误
                ="输入错误";
            }else{
                //3.是数字,计算,并把结果放入span显示
                =num*num;
            }
        }else{
            ="请输入数字";
        }
    }
    </script>

数学运算符 + - * / % ++

总结:

1.纯数字的字符串,除了+会变成字符串连接,其他的运算都会自动转成数字

中的除法,如果除不尽会得到浮点数100/3

关系运算符 > < >= <= != ==

<script type="text/javascript">
    function doClick(){
        var s1="123";
        var s2=123;
        var s3=123;
        
        (s1==s2);//t
        (s1==s3);//t
        //全等:
        //类型相同
        //数据值相同
        (s1===s2);
        (s2===s3);
    }
    doClick();
</script>

课堂练习:网页版猜数字

[外链图片转存失败(img-pDBLei9x-1565451396210)()]

逻辑运算符 ! && ||

要注意短路问题

条件表达式

js可以使用任何数据做条件

    if("afsda"){
        (1111);
    }

当使用非boolean值做条件时

true 非空字符串 非0数字

false null undefined “” 0 NaN

if(NaN){

}else{
    (11111);
}

作业:

今天所有的理论和demo重新过一遍

1.猜数字和平方

2.提高题:选作

426029026218 2
求出前12位奇数位数字之和.462061=19
求出前12位偶数位数字之和.209228=23
把 前12位奇数位数字之和 与 偶数位数字之和的3倍相加.19+69=88
取结果的个位数. 8
用10减去这个个位数. 2
再取结果的个位数. 2

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

#day 07

复习

js的历史

js的使用方式

变量的声明与定义 var x=123; x=“abc”

数据类型 number string boolean null undefined

NaN isNaN() typeof() parseInt()

! && ||

< > <= >= == != ===

if else if(可以放任何值当做boolean表达式)

循环 for while do-while

输入1-100,计算该数的阶乘

- n(正整数)的阶乘 1*2*3...*n
- 0的阶乘,固定为1
- 负数,小数没有阶乘

[外链图片转存失败(img-6VNrMuWP-1565451396211)()]

    <p>n(正整数)的阶乘 1*2*3...*n</p>
    <p>0的阶乘,固定为1</p>
    <p>负数,小数没有阶乘</p>
    <input type="text" >
    <input type="button" value="阶乘"   
    onclick="cal();">
    <span ></span>

    <script type="text/javascript">
    function cal(){
        //1.获取文本框中的值
        var input=("num");
        var num=;
        //2.获取span对象
        var span=("result");
        //3.判断num是不是数字
        if(isNaN(num)){
            //不是数字,span中提示
            ="请输入数字";
        }else{
            //是数字,先去除小数点
            num=parseInt(num);
            //把去除完小数点的整数,放回到文本框中去
            =num;
            if(num<0){
                ="负数没有阶乘";
            }else if(num==0){
                ="0的阶乘固定为1";
            }else{
                //计算正整数的阶乘
                var res=1;
                for(var i=num;i;i--){
                    res*=i;
                }
                =res;
            }
        }
    }
    </script>

javascript常用API

string

1.创建string对象的2种方式

var str1="hello world";
var str2=new String("hello world");

2.大小写的转换

();
();

3.获取指定的字符(串)

(index);

var str="javascript网页教程";
var str1=(12);

4.查询指定的字符串

("");
("");

var str="javascript网页教程";
var index=("a");
var index=("a");

5.获取子字符串

    (star,[end]);
    var str="abcdefghi";
    //包头不包尾
    var str1=(2,4);

6. 替换子字符串

    (str1,str2);
    str1--要找到的字符串
    str2--新的字符串
    返回值是替换后的字符串

    var str="abcde";
    var str1=("cd","aaaa");

7.拆分子字符串

    (str1,[length]);
    str1--分割用的子字符串
    length,指定返回数组的最大长度,可省略
    返回值为,分割之后的字符串数组

    var str="一,二,三,四,五,六,日";
    var strArray=(",",5);

课堂练习

[外链图片转存失败(img-HyFAAsHJ-1565451396212)()]

<ul >

</ul>

<script type="text/javascript">
     var oUl=("ul");
    //假设从服务器获取了一组数据
    var contents=["天气预报","奇人异事","法制社会","寻人启事","明星趣事"];
    //制作一个string的模板,使用[content]占位
    var str="<li><span><a>[content]</a></span></li>";
    for(var i=0;i<;i++){
        //替换模板中的[content]
        +=("[content]",contents[i]);
    }
    
    
    //(); 
</script>

Number对象的常用方法

    toFixed(length):把number转换为字符串,保留小数点后一定的位数.如果必要,该数字会被四舍五入,也可以用0补足位数

数组

js中的数组特点

var arr=["打一顿","不多于",12.3,true]
var arr1=new Array();
arr1[0]="123";
(23);

  1. Array在js中都是obj的数组

  2. js中数组可以同时存放不同数据类型的值

  3. js中的长度可变

  4. 两种创建方式,不管哪一种,创建出来,都是object类型

  5. 数组常用api

     () // 反转输出

();//排序

sort方法,是按照数组中,每一个元素的unicode编码进行排序的,比完第一位比第二位

string就是这样排序,但是这种排序不适用于number

[外链图片转存失败(img-EeCOMdiX-1565451396213)()]

    var arr=[5,12,3,14,26,1];
    //var arr=["a","ab","b","c","bd","d"];
    //(());//1,3,5,12,14,26
    
    //修改比较规则,按照数字大小比较
/*     function x(a,b){
        return b-a;
    } */

//该方法不需要复用，所以写成匿名函数
(function(a,b){
return a-b;
});

math

用于数学计算
1.取整
((4.56));
2.
(4.5);

date

  1. 创建客户机当前时间

    var d1=new Date();

  2. 创建指定时间的date对象(指定时间一般源于服务器)

    var d2=new Date(“2016/12/12 12:12:12”);

  3. 读写时间的毫秒数

     getTime()读  setTime()写

###　date的API

从服务器拿到时间对象,在页面根据不同的需求显示

    ();//获取年
    ();//获取月,需要+1，月份从0开始
    ();//月的天
    ();//周的天

    ();//获得小时
    ();//分钟
    ();//秒

date转化成本地时间格式

();
();
();

正则

.  任意字符
\w 任意字母,数字,下划线
\s 任意空白字符
\d 任意数字
^    字符串开头
$    字符串结束

1.如何创建正则对象

- 直接创建

    var reg=/正则表达式/[模式]
    var reg=/no/g;

- 创建对象

    var reg=new RegExp(正则表达式,[模式]);
    var reg=new RegExp('\s\d');//此句有坑

- 全局模式,设定当前匹配为全局,g
- 设置当前匹配模式忽略大小写,i

2.正则对象的方法 (str);

(str);
//从str中找到匹配正则的子串
//普通模式下,返回第一个符合要求的子串
//全局模式下,第n次执行,返回符合要求的第n个子串

var str="you can you up,no can no bi bi";
var reg=/no/g;
//(str);
//从str中找到匹配正则的子串
//普通模式下,返回第一个符合要求的子串
//全局模式下,第n次执行,返回符合要求的第n个子串
((str));
((str));
((str));
((str));

//(str);
//判断str中是否 包含与reg匹配的子串
((str));

3.字符串匹配正则的方法 (reg);

    1. (reg,"");
    
    将str中的与reg匹配的所有子串都替换成目标子串

    var str="you can you up,no can no bi bi";
    var reg=/no/g;
    var str1=(reg,"bu");
    (str1);

    2. (reg);

       从str中找出和reg匹配的子串,返回值是数组

    var str="you can you up,no can no bi bi";
    var reg=/no/g;
    //var str1=(reg,"bu");
    //(str1);
    ((reg));


    3. (reg);

        从str中找出和reg匹配的第一个子串的索引

        ((reg));

作业

全天笔记要求过一遍

();原理,可以表述清晰

背表单验证的代码

day08

js中的常用API

完善form表单的验证

[外链图片转存失败(img-dj71rmog-1565451396214)()]

    <body>
        <form action=""   
        onsubmit="return checkUser()*checkPwd()==1;">
            <div>
                账号:<input type="text"  
                onblur="checkUser();">
                <span >5-10位数字,字母,下划线</span>
            </div>
            <div>
                密码:<input type="password"  
                onblur="checkPwd();">
                <span >5-10位数字,字母,下划线</span>
            </div>
            <div>
                <input type="submit" value="登录">
            </div>
        </form>
    </body>

    <style type="text/css">
    .ok{
        color: #0f0;
    }
    .error{
        color: #f00;
    }
    </style>

    <script type="text/javascript">
        function checkUser(){
            //获取有户名的字符串
            var code=document
            .getElementById("username").value;
            //获得span对象
            var span=("msg_user");
            //获得正则对象
            //5-10位数字,字母,下划线
            var reg=/^\w{5,10}$/;
            //开始验证
            if((code)){
                //格式正确,span字体变绿
                ="ok";
                return true;
            }else{
                ="error";
                return false;
            }
        }
        function checkPwd(){
            var code=document
            .getElementById("pwd").value;
            var span=("msg_pwd");
            var reg=/^\w{5,10}$/;
            if((code)){
                ="ok";
                return true;
            }else{
                ="error";
                return false;
            }
        }
    </script>

学子商城登陆页表单验证

[外链图片转存失败(img-KllK4y7W-1565451396214)()]

function对象

中函数就是function对象

2.函数名就是指向function对象的引用

var fn1=function(){alert(1111);}
function fn2(){
    alert(1111);
}

3.使用函数名可以访问函数对象

4.函数名后面跟上(),是调用函数

5.函数的返回值

- 不定义返回值的类型
- 默认返回值是undefined
- 可以使用return返回具体的值

6.函数的参数 var

    function x(){
        alert(arguments[0]);
    }

    x();

    x(1,2);//不报错,问题是1和2究竟哪去了

[外链图片转存失败(img-hhUVvSSZ-1565451396215)()]

JS的函数没有重载

函数被调用时,只要函数名一样,无论传入多少个参数,调用的都是同一个函数对象,所以js没重载

但是可以实现和重载一样的调用方式,使用arguments

代码演示

定义一个函数,参数连续相加,返回累加和

    function add(){
      var sum=0;
      for(var i=0;i<;i++){
         sum+=arguments[i];
      }
      return sum;
    }

js在调用函数的过程中,只检测函数名,不检测参数列表

如果参数名称匹配,则直接调用

可以使用arguments访问传递过来的参数列表

js中没有重载,如果出现相同函数名的两个函数,后一个有效

匿名函数

就是不给函数起名字

如果一个函数在别的地方不再被调用了,就可以使用匿名函数

全局函数

全局函数可用于所有的javaScript对象

不需要对象调用

常用全局函数

    typeof()
    isNaN();
    parseInt();
    parseFloat();

eval()

eval函数用于 计算 表达式 字符串

    var str="2+3";     
    eval(str);

eval函数用于 执行 字符串中的js代码

    var str="function aa(){alert(1111);}aa();";
    eval(str);

eval最重要的作用,是动态执行服务器传过来的javascript代码

    <body>
        <input type="text" >
        <input type="button" value="计算" 
        onclick="cal();">
    </body>

    <script type="text/javascript">
    function cal(){
        var input=("num");
        var num=;
        //开始计算
        try{
            =eval("("+num+")");
        }catch(e){
            ="Error";
        }
    }
    </script>

外部对象概述

BOM与DOM

[外链图片转存失败(img-cz60qse8-1565451396216)()]

BOM Browser Object Model 浏览器对象模型

DOM Document Object Model 文档对象模型

总结:通过BOM,可以移动窗口,更改状态栏文本

执行其他不与页面内容发生直接联系的操作(不操作标签)

BOM是没有标准,却被浏览器厂商广泛支持

总结:DOM定义了访问和操作HTML的标准方法

通过对DOM树的操作,来实现对html文档数据的操作

JS相关BOM操作

window 表示整个浏览器窗口

所有js的全局对象,全局函数以及全局变量,都自动成为window对象的成员(window可以点出来)

window的常用属性

    document  窗口中显示的HTML文档对象
    history   浏览过的历史记录对象
    location  窗口文件地址对象
    screen    屏幕对象
    navigator 浏览器相关信息对象

window对象常用的函数

  1. 弹出框

     <body>
     <input type="button" value="按钮1"  
     onclick="fn1();">
     <input type="button" value="按钮2"  
     onclick="fn2();">
     <input type="button" value="按钮3"  
     onclick="fn3();">
 </body>

 <script type="text/javascript">
     //1.弹出框
     function fn1(){
         ("你好");
     }
     //2.确认框
     function fn2(){
         var flag=("how are you!!");
         (flag);
     }
     //3.输入框
     function fn3(){
         var str=("中午吃的什么?");
         (str);
     }
 </script>

定时器

主要用于网页动态时钟,倒计时,轮播图,无缝滚动,跑马灯效果

1.周期性定时器

以一定的时间间隔执行代码,循环往复

setInterval(exp,time);
exp:要执行的js语句,一般为匿名函数
time:时间周期,毫秒 
返回值:返回已经启动的定时器ID
clearInterval(ID);停止定时器

//周期性定时器
function fn4(){//每一秒打印一个数 5,4,3,2,1
    var num=5;
    var id=setInterval(function(){
        (num--);
        if(!num){// num==0
            clearInterval(id);
        }
    },1000);
    ("蹦蹦");
}

总结:启动定时器就相当于启动了一个子线程

当前方法fn4相当于主线程

2个线程之间并发执行,相互不等待

课堂练习,电子时钟

[外链图片转存失败(img-WoscuH7n-1565451396217)()]

<div>
    <input type="button" value="开始" onclick="start();">
    <input type="button" value="停止" onclick="stop();">
    <p ></p>
</div>

    <style type="text/css">
        #clock{
            width: 200px;
            height: 30px;
            border: 2px solid #f00;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
        }
    </style>

[外链图片转存失败(img-h6OrkW51-1565451396218)()]

    <script type="text/javascript">
    var id;
    function start(){
        if(id){//id在undefined和null的情况才会启动定时器
            return;
        }
        var oP=("clock");
        id=setInterval(function(){
            var d=new Date();
            var now=();
            =now;
        },1000);
    }
    function stop(){
        //id非空时,定时器处于启动状态,这样可以停止
        if(id){
            clearInterval(id);
            //如果此时不给ID赋值null
            //下次点击启动时,会进入if块直接返回.
            id=null;
        }
    }
    </script>

2.一次性定时器(延迟执行)

在一个设定好的时间 间隔之后来执行代码

    setTimeout(exp,time);
    exp:执行的代码
    time:延迟时间
    返回值为id
    clearTimeout(id);

发送撤销的案例

[外链图片转存失败(img-Dl06tggb-1565451396219)()]

    <script type="text/javascript">
       var id;
        function send(){
            var oP=("msg");
            ="发送中...";
            //推迟三秒发送
            id=setTimeout(function(){
                ="ok";
                ="发送成功";
            },3000);
        }
        function cancel(){
            var oP=("msg");
            ="error";
            ="已撤销";
            clearTimeout(id);
        }
    </script>
    <style type="text/css">
    .ok{
        color: #0f0;
    }
    .error{
        color: #f00;
    }
    </style>
    </head>
    <body>
        <div>
            <input type="button" value="发送" 
            onclick="send();">
            <input type="button" value="撤销" 
            onclick="cancel();">
        </div>
        <p ></p>
    </body>

作业

  1. 今天笔记过一遍
  2. 学子商城登陆页面表单验证,敲一遍
  3. 两个定时代码(第二个调BUG)
  4. 预习DOM

day09

复习

function对象

1. 返回值
2. 参数

外部对象

BOM和DOM的关系

window

定时器

window 常用属性

1. location对象

location对象包含当前页面的URL的信息

常用于获取和改变当前浏览器的网址

属性,href =url

reload();重新载入当前网页,等同于刷新按钮

<input type="button" value="location" 
onclick="fn1();">


function fn1(){
    //跳转到目标url
    //="/web/index_new.html?tedu";
    //刷新
    //();
    var flag=confirm("你确定要离开本宝宝吗?");
    if(flag){
        ="/web/index_new.html?tedu";
    }
}

包含有关各户端显示屏幕的信息

常用于获取屏幕的分辨率和色彩

1. width/height
2. availWidth/availHeight

总结,可用高,除了window的任务栏之外的高度

包含用户在浏览器窗口中访问过的URL

length属性,浏览器历史列表中的url数量

方法:

    1. back()
    2. forward();
    3. go();//0是当前页,-1上一页 1下一页

包含浏览器的相关信息

userAgent属性,当前浏览器的版本;

DOM的操作

DOM提供哪些操作

1. 查找节点

<p >1. <b>读写</b>节点</p>
<p >2. <b>查询</b>节点</p>
<p >3. <b>增删</b>节点</p>

//var p1=("p1");
//var p2=("p")[1];
//(p2);
//(p1);
//();
//();

总结:nodeType返回值,对应了节点的类型
    
    1 --- 元素节点
    2 --- 属性节点
    3 --- 文本节点
    8 --- 注释节点
    9 --- 文档节点

    nodeName和nodeType,在写js框架时用的非常多
    正常开发,很少使用

2. 读取节点信息
    
    双标签叫内容,
    所有的双标签都有内容,
    一般表单中的控件,数据称之为值
    input select textarea都有value

    <div>今天天气不错</div>
    <input type="button" value="适合睡觉"> 

    2.1 innerHTML
    2.2 innerText


<p >1. <b>读写</b>节点</p>
<p >2. <b>查询</b>节点</p>
<p >3. <b>增删</b>节点</p>

var p1=("p1");
();
();
//="1. <u>读写</u>节点";
="1. <u>读写</u>节点";

总结:innerHTML,认识标签
     innerText,不认识标签,会把标签当成字符串

    2.3 读写值

        ;

2.4读写节点的属性

1. 通过方法读写属性**

//1.通过方法读写属性
var oImg=document
.getElementsByTagName("img")[0];
("src","../img/");
(("src"));

2. 通过标准属性名读写属性**

//2.通过标准的属性名读写属性
//className,id,style
var oP=("p")[0];
();
="30px";

3. 通过不标准属性名读写属性,只有高版本浏览器才支持

//3.通过不标准属性名读写,不推荐
//  
//使用方法去解决,不建议用
();

总结:

1.不标准的属性建议使用方法处理

2.标准属性中的style,是内联样式.除了学习和测试不建议使用

3. 修改节点信息
4. 创建新节点
5. 删除节点

提高题,完全不要求.而且不建议做

只要会一个方框,从上挪到下,就可以了

最多两个方框

鼠标悬停和鼠标离开事件

onmouseover鼠标悬停
onmouseout鼠标离开

    <div onmouseover="stop();" onmouseout="go();">
        <img src="../img/" class="hide">
        <img src="../img/" class="hide">
        <img src="../img/" class="hide">
        <img src="../img/" class="hide">
        <img src="../img/" class="hide">
        <img src="../img/" class="hide">
        <img src="../img/" class="hide">
    </div>
    
    div{
        width: 256px;
        height: 256px;
        margin: 50px auto;
        border: 2px solid #f00;
    }
    .show{
        display: block;
    }
    .hide{
        display: none;
    }

    <script type="text/javascript">
    var n=1;//轮播总次数
    var id;//定时器的ID
    var imgs;
    =function(){
        imgs=("img");
        //先把第一张显示
        imgs[0].className="show";
        //定时启动轮播
        go();
    }
    function go(){
        id=setInterval(function(){
            //计算要显示图片的下标
            //轮播总次数%数组长度
            var index=n%;
            //隐藏全部图片
            for(var i=0;i<;i++){
                //imgs[i].className="hide";
                imgs[i].setAttribute("class","hide");
            }
            //显示对的index图片
            imgs[index].className="show";
            //轮播总次数+1
            n++;
        },500);
    }
    function stop(){
        clearInterval(id);
    }
    </script>

1. 查询节点

  1. 如果想要操作HTML元素,必须先要找到该元素

  2. 查询节点方式方法

    2.1 通过id查询
    2.2 通过层次(节点关系)查询
    2.3 通过标签名称查询
    2.4 通过name属性查询

     <body>
     <ul>
         <li>北京</li>
         <li>上海</li>
         <li >广州</li>
         <li>深圳</li>
         <li>佳木斯儿</li>
         <li>葫芦岛</li>
     </ul>
     <div>
         <input type="radio" name="gender">男
         <input type="radio" name="gender">女
     </div>
 </body>


 <script type="text/javascript">
 =function(){
     //1.根据id查询
     //var gz=("gz");
     //2.根据标签层次查询(节点关系)
     //2.1查询父节点
     //();
     //2.2查询孩子,子节点
     //var oUl=("ul")[0];
     //();
     //把查询节点的方位缩小到ul内部(重点掌握)
     //var oLis=("li");
     //(oLis);
     //2.3查询兄弟节点
     //某节点.父亲.孩子们[index]
     //var gz=("gz");
     //var jms=
     //.getElementsByTagName("li")[4];
     //(jms);
     //2.4根据name属性查询节点
     //一般用于查询一组单选/多选
     var radios=("gender");
     (radios);
 }
 </script>

创建新节点

    (TagName);
    TagName:要创建的元素的标签名称
    返回值,就是这个标签的对象

    把这个新标签对象,挂到dom树上

追加

    <body>
        <div></div>
    </body>

    <script type="text/javascript">
    =function(){
        //创建新节点
        var newNode=("input");
        //设置节点信息
        ("type","text");
        ="mary";
        ="red";
        //挂到DOM树上,必须使用父级元素添加新节点
        //获取父级元素对象
        var oDiv=("div")[0];
        (oDiv);
        //通过父对象,把新节点挂在父对象下面
        (newNode);
    }
    
    </script>

插入

删除

    <body>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li >广州</li>
            <li>深圳</li>
            <li>佳木斯儿</li>
        </ul>
        <div>
            <input type="button" value="追加"   
            onclick="fn1();">
            <input type="button" value="插入"   
            onclick="fn2();">
            <input type="button" value="删除"   
            onclick="fn3();">
        </div>
    </body>

    function fn1(){
        var oLi=("li");
        ="重庆";
        var oUl=("ul")[0];
        (oLi);
    }
    function fn2(){
        var oLi=("li");
        ="铁岭";
        //插入需要父级对象,和弟弟对象
        var oUl=("ul")[0];
        var gz=("gz");
        //把新节点插入到父亲下级,弟弟之前
        (oLi,gz);
    }
    function fn3(){
        //需要父级元素对象和要删除的元素对象
        var oUl=("ul")[0];
        var gz=("gz");
        //通过父级对象删除孩子
        (gz);
    }

总结,我们需要父级去删除子元素

作业:

  1. 7个demo都敲一遍
  2. 必须把新建元素,挂到dom树上的代码,敲熟悉
  3. 删除元素必须熟悉
  4. 了解window的4个属性

#day10

复习

DOM节点的操作

读写
    1. nodeName/nodeType
    2. innerHTML/innerText
    3. value
    4. getAttribute/setAttribute
       .className .id .style
查询
    1. ById
    2. ByTagName
    3. parentNode/ByTagName()
    4. ByName
增删节点
    1. createElement(TagName)
    2. (newNode)
    3. (newNode,弟弟对象)
    4. (节点对象)

课堂练习:二级联动菜单

[外链图片转存失败(img-IDpWvOeB-1565451396220)()]

    <body>
        省:
        <select onchange="chg();" >
            <option value="-1">请选择</option>
            <option value="0">河北省</option>
            <option value="1">山东省</option>
            <option value="2">江苏省</option>
        </select>
        市:
        <select >
            <option>请选择</option>
        </select>
    </body>

        <script type="text/javascript">
        var cities=[
        ["石家庄","保定","张家口"],
        ["济南","德州","青岛","蓬莱"],
        ["南京","常州","无锡","张家港"]
     ];
        function chg(){
            //1.获得省的下拉选对象
            var sel1=("province");
            //2.获取value,value就是二维数组的index
            var index=;
            //3.创建pcities保存正确二级城市的数据
            var pcities=cities[index];
            //4.删除旧的城市(sel2中的option)
            var sel2=("city");
            var options=("option");
            /*for(var i=1;i<;i++){
                (options[i]);
            } //上面这个循环算法有问题*/
            
            /*                 for(var i=-1;i>0;i--){
                (options[i]);
            } */
            
            ="<option>请选择</option>";
            
            
            //添加新城市,追加一批option
            if(pcities){
                for(var i=0;i<;i++){
                    //创建一个新option对象
                    var option=("option");
                    //给新option添加内容
                    =pcities[i];
                    //挂到sel2上
                    (option);
                }
            }
        }
    </script>

javascript事件处理

事件:指页面元素状态的改变,用户在操作鼠标或者键盘时触发的动作

1.鼠标事件

    - onclick
    - ondblclick
    - onmouseover//鼠标悬停
    - onmouseout//鼠标离开
    - onmousedown//鼠标按下事件
    - onmouseup//鼠标抬起事件

2.键盘事件

    - onkeydown
    - onkeyup

3.状态改变事件

    - onload
    - onchange
    - onfocus//焦点获取
    - onblur//失去焦点
    - onsubmit

事件绑定

  1. 在标签属性中,直接处理事件

  2. js代码中动态定义,可以把html代码和js代码分离,好维护

     =function(){
     var input=document
     .getElementsByTagName("input")[0];
     
     =fn2;
 }
 function fn2(){
     ("动态定义事件绑定");
 }

  3. 取消事件 onXXX=“return false”;

事件处理机制–事件冒泡

<div style="border: 2px solid black;height: 100px;" 
onclick="alert('DIV');">
    <p style="border: 2px solid #f00;height: 50px;" 
    onclick="alert('P');">
    div--p--btn
        <input type="button" value="事件冒泡的演示" 
        onclick="alert('input');">
    </p>
</div>

如果点击input,将会依次触发input/p/div的onclick事件,这种现象称为事件冒泡

发生事件冒泡的要求,1.嵌套关系.2.内层和外层标签必须是同一个事件

取消事件的冒泡,由于浏览器厂商使用的内核不同,有两种方法取消

    1. ();

总结:以前只支持firefox chrome.现在高版本的ie已经支持了.ie8.0及其以下的版本不支持

    2. =true;

总结:以前只支持IE,现在在高版本的FF和chrome中已经支持了

对象,事件对象(*****)

- 事件触发后,会自动产生一个event

[外链图片转存失败(img-ATYRqK6g-1565451396221)()]

1.获取event对象
任何事件触发后都会产生一个event对象
event对象记录事件发生时的鼠标位置,键盘按键状态和触发对象(事件源)等信息

  1. 在html属性中直接使用event对象

虽然支持ie ff chrome但是这种写法,是没有意义的.

我们希望html代码和js代码,分离.松耦合

  1. 在js代码块中,直接使用event对象

IE浏览器和chrome…chrome对ie做了兼容.

  1. 在函数中使用event对象,必须以传参的方式

    function fn2(event){
    alert(+’:’+);
    }

这种方式,ff ie chrome都支持,所以开发要求这种写法

通过event对象获取事件源

和chrome,chrome对IE做了兼容

<!-- 获取事件源 -->
<input type="button" value="事件源_IE-chrome" 
onclick="fn3(event);">

function fn3(event){
    var obj=;
    (obj);
}

和chrome,高版本IE也支持

IE8.0及以下不支持

计算器案例

[外链图片转存失败(img-isHmNJRZ-1565451396222)()]

关于this的使用
<div>
    <input type="button" value="X" onclick="fn(this);">
    <input type="button" value="X" onclick="fn(this);">
    <input type="button" value="X" onclick="fn(this);">
    <input type="button" value="X" onclick="fn(this);">
</div>

<script type="text/javascript">
function fn(btn){
    var oDiv=;
    (btn);
}
</script>

作业

1.事件冒泡,取消冒泡

2.获取event对象

3.通过event对象,获取事件源

4.计算器能在不看资料的情况下,正确完成

5.完成一遍二级联动

day11

jQuery

function bigger(){
    //1.获取p的字号
    var size=$("p").css("font-size");
    //把"16px"变成可以计算的数字,去掉单位
    size=("px","");
    //字号加大号,设置p标签的字号
    $("p").css("font-size",++size +"px");
}

jQuery对象详解

[外链图片转存失败(img-rFM4OxhX-1565451396223)()]

jQuery的常用选择器

jQuery选择器可以准确选取到你希望找到的元素

选择器允许你的HTML元素组或者单个元素进行操作

<ul>
    <li>北京</li>
    <li>上海</li>
    <li >广州</li>
    <li class="sz">深圳</li>
    <li>佳木斯儿</li>
</ul>

    $(function(){
        //1.基本选择器
        $("li");
        $("#gz");
        $(".sz");
        $("ul li");
        $("ul>#gz");
        $("ul .sz");
        //2.层次选择器
        $("#gz+li");//选择他的弟弟
        $("#gz~");//选择他的弟弟们
        //3.过滤选择器
        //4.表单选择器
    });

3.过滤选择器

1.基本过滤器
    $("li:first");
    $("li:lt(2)");//下标小于index的标签
    $("li:odd");
    $("li:last");

    $("li:eq(0)");
    $("li:not(#gz)")
2.内容过滤器
    $("li:contains('州')")    
    $("li:empty")
3.可见性过滤器
    $("li:hidden").show();

$(“li:visible”).hide();
$("#abc").toggle();

4.属性过滤器,不是:开头,是中括号[]!
    <li style="...."></li>
    $("li[style]")//li标签带有style属性
    $("[href='#']")//带有href属性并且,值为'#'
    $("[href!='#']")//带有href属性,并且值不为"#"
    $("[href$='.jpg']")//有href,值以'.jpg'结尾
5.状态过滤器
    $("input:disabled")
    $("input:checked")
6.表单过滤器9种
    $(":text");

jQuery操作DOM

对内容和值的操作

    var str=();
    ("<span>123</span>");

    var str=();
    ("123");

    var str=();
    ("abc");
    
    ("属性名");
    ("属性名","属性值");

    <body>
        <p>jQuery支持<b>读写</b>节点</p>
        <p>jQuery支持<b>增删</b>节点</p>
        <img alt="" src="../img/">
        <div>
            <input type="button" value="点点我" onclick="fn1();">
        </div>
    </body>

    function fn1(){
        ($("p:eq(0)").html());
        ($("p:eq(1)").text());
        $("img").attr("src","../img/");
        $(":button").val("别点我");
        //更改两个P标签的中文本内容,<u></u>
        //html(),text();
        //打印当前img的src值
        //打印当前button的value值
    }

增删节点

2.1 创建新节点
    var oSpan=$("<span>你好</span>");
2.2 挂到DOM树上
    (obj);//做为最后子节点添加进来
    (obj);//做为第一个
    (obj);//做为上一个兄弟节点
    (obj);//做为下一个兄弟节点


<div>
    <input type="button" value="追加" onclick="fn1();">
    <input type="button" value="插入" onclick="fn2();">
    <input type="button" value="删除" onclick="fn3();">
</div>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li >广州</li>
    <li>深圳</li>
    <li>杭州</li>
</ul>


function fn1(){//追加
    var oLi=$("<li>天津</li>");
    $("ul").append(oLi);
    //$("ul").prepend(oLi);
}
function fn2(){//插入
    var oLi=$("<li>西安</li>");
    //$("#gz").before(oLi);
    $("#gz").after(oLi);
}
2.3删除DOM节点
    (); //删除这个节点
    (selector);//只删除满足selector条件的节点

样式操作 add remove has css toggle

("ok")
("error");//移除指定的样式
();//移除所有样式
("ok")//判断是否有某个样式
("ok");//切换样式

("样式属性","样式的值");//设置具体样式
("样式属性");//获得具体样式的值


$("p").addClass("red").addClass("big");


$(function(){
    setInterval(function(){
        $("p").toggleClass("big").toggleClass("red");
    },500);
});

jQuery方法的返回值

1.任何通过$得到对象的都是jQuery对象

1. 选择器过滤器  $("p")
2. 转型:Dom-->jQuery对象  $(Dom)

    var oP=("p")[0];
    $(oP).addClass(...)

3. 创建新节点

    $("<p></p>")

2.修改方法一般都返回jQuery对象

("abc")
("src","../img/")
("red").removeClass("red")

3.查询到的元素一般都是jQuery对象

4.读取到的文字,返回值是string对象

    ();
    ();
    ();

5.万能确认对象的方式

    控制台输出,看对象结构

作业

  1. 今天(2018年5月11日)所有笔记,熟悉
  2. 今天(2018年5月11日)所有demo,重新敲
  3. 预习

#day12

复习

读写内容

    ();/("");
    ();/("");
    ();/("");

增删节点

1.创建新节点

    $("<span>嘿嘿嘿</span>")

2.挂到dom树上

    (obj)//添加最后一个子节点
    (obj)//添加第一个子节点
    (obj);//添加一个弟弟节点
    (obj);//添加一个哥哥节点

3.删除节点

    ();
    (selector);//满足selector条件的节点被删除
    ();
    ("");

对样式的操作

    ("");
    ("");//删除某一个class
    ();//删除所有的样式
    ("")//是否应用了某一个样式
    ("");//切换某一个样式

jQuery方法的返回值问题

通过节点关系,查找节点

();/(selector);//获取直接子节点
();/(selector);//下一个弟弟
()/(selector);//上一个哥哥
();/(selector)//查询所有的兄弟,结果不含自己

(selector);//查找满足条件所有后代
();

课堂练习

[外链图片转存失败(img-68XK5bG3-1565451396224)()]

    <body>
        <ul >
            <li><a href="#" class="navLink">达内java</a></li>
            <ul class="menu">
                <li><a href="#">课程介绍</a></li>
                <li><a href="#">研发团队</a></li>
                <li><a href="#">讲师风采</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <li><a href="#" class="navLink">达内java</a></li>
            <ul class="menu">
                <li><a href="#">课程介绍</a></li>
                <li><a href="#">研发团队</a></li>
                <li><a href="#">讲师风采</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <li><a href="#" class="navLink">达内java</a></li>
            <ul class="menu">
                <li><a href="#">课程介绍</a></li>
                <li><a href="#">研发团队</a></li>
                <li><a href="#">讲师风采</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <li><a href="#" class="navLink">达内java</a></li>
            <ul class="menu">
                <li><a href="#">课程介绍</a></li>
                <li><a href="#">研发团队</a></li>
                <li><a href="#">讲师风采</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <li><a href="#" class="navLink">达内java</a></li>
            <ul class="menu">
                <li><a href="#">课程介绍</a></li>
                <li><a href="#">研发团队</a></li>
                <li><a href="#">讲师风采</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </ul>
    </body>
    
    <style type="text/css">
    ul ul{
        display: none;
    }
    li{
        list-style: none;
    }
    </style>

    <script type="text/javascript">
    $(function(){
        $("#nav>li").click(function(){
            if($(this).next().css("display")=="block"){
                //如果点击时,自己的二级菜单是显示状态,
                //把自己的二级菜单关掉
                $(this).next().css("display","none");
                //$(".menu").css("display","none");
            }else{
                //自己的二级菜单没打打开
                //全部关闭,打开自己的弟弟
                //$(".menu").css("display","none");
                //$(this).next().css("display","block");
                //把自己的弟弟打开,
                //再把除了弟弟以外的二级ul都关掉
                $(this).next().css("display","block")
                .siblings(".menu").css("display","none");
            }
            
        });
    });
</script>

课堂练习,学子商城二级菜单

    $(function(){
        $(".menu").click(function(){
            if($(this).next().css("display")=="block"){
                //把所有的ul都关闭
                //所有的箭头都向右
                $(".submenu").removeClass("dis")
                .addClass("hide");
                $(".menu").children("img")
                .attr("src","../images/myOrder/");
            }else{
                //关闭所有ul,把箭头向右
                $(".submenu").removeClass("dis")
                .addClass("hide");
                $(".menu").children("img")
                .attr("src","../images/myOrder/");
                //打开弟弟ul,把箭头向下
                $(this).next().removeClass("hide")
                .addClass("dis");
                $(this).children("img")
                .attr("src","../images/myOrder/");
            }
        });
    });

课堂练习

[外链图片转存失败(img-4KazRD6V-1565451396225)()]

<body>
<h1>真划算</h1>
<table>
<tr>
    <th>商品</th>
    <th>单价(元)</th>
    <th>颜色</th>
    <th>库存</th>
    <th>好评率</th>
    <th>操作</th>
</tr>
<tr>
    <td>苹果air</td>
    <td>26000</td>
    <td>银色</td>
    <td>12</td>
    <td>50%</td>
    <td align="center">
        <input type="button" value="加入购物车" 
        onclick="add_shoppingcart(this);">
    </td>
</tr>
<tr>
    <td>迪奥口红</td>
    <td>300</td>
    <td>#520</td>
    <td>800</td>
    <td>99%</td>
    <td align="center">
        <input type="button" value="加入购物车" 
        onclick="add_shoppingcart(this)">
    </td>
</tr>
<tr>
    <td>戴森吹风机</td>
    <td>3200</td>
    <td>红色全球限量</td>
    <td>3</td>
    <td>100%</td>
    <td align="center">
        <input type="button" value="加入购物车" 
        onclick="add_shoppingcart(this)">
    </td>
</tr>
<tr>
    <td>卫聋辣条</td>
    <td>2</td>
    <td>无色变态辣</td>
    <td>5000</td>
    <td>100%</td>
    <td align="center">
        <input type="button" value="加入购物车" 
        onclick="add_shoppingcart(this)">
    </td>
</tr>
<tr>
    <td>樱桃机械键盘</td>
    <td>560</td>
    <td>黑色</td>
    <td>50</td>
    <td>100%</td>
    <td align="center">
        <input type="button" value="加入购物车" 
        onclick="add_shoppingcart(this)">
    </td>
</tr>
<tr>
    <td>大宝sod蜜</td>
    <td>26</td>
    <td>乳白色</td>
    <td>5000</td>
    <td>100%</td>
    <td align="center">
        <input type="button" value="加入购物车" 
        onclick="add_shoppingcart(this)">
    </td>
</tr>
</table>
<h1>购物车</h1>
<table>
    <thead>
        <tr>
            <th>商品</th>
            <th>单价(元)</th>
            <th>数量</th>
            <th>金额</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody >

    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" align="right">总计</td>
            <td ></td>
            <td></td>
        </tr>
    </tfoot>
</table>
</body>

    
    <style type="text/css">
    h1{
    text-align: center;
    }
    table{
    margin: 0 auto;
    width: 60%;
    border: 2px solid #aaa;
    border-collapse: collapse;
    }
    table th,table td{
    border: 2px solid #aaa;
    padding: 5px;
    }
    </style>

    <script type="text/javascript">
    //加入购物车的函数
    function add_shoppingcart(btn){
        //第一种获取name和price的思路
        //var tr=$(btn).parent().parent();
        //var name=().eq(0).text();
        //var price=().eq(1).text();
        //第二种获取name和price的思路
        var tds=$(btn).parent().siblings();
        var name=(0).text();
        var price=(1).text();
        
        var new_tr=$('<tr>'
                +'<td>'+name+'</td>'
                +'<td>'+price+'</td>'
                +'<td>'
                 +'<input type="button" value="-" onclick="chg(this,-1)";>'
                 +'<input type="text" size="3" readonly value="1">'
                 +'<input type="button" value="+" onclick="chg(this,1)";>'
                +'</td>'
                +'<td>'+price+'</td>'
                +'<td><input type="button" value="X" onclick="del(this);"></td>'
            +'</tr>');
        //挂在tbody下面
        $("#goods").append(new_tr);
        total();
    }
    function del(btn){
        $(btn).parent().parent().remove();
        total();
    }
    function chg(btn,n){
        var amount=0;
        if(n>0){//点的是+号
            //获取文本框的值
            amount=parseInt($(btn).prev().val());
            //(amount);
            $(btn).prev().val(++amount);
        }else{//点的是-号
            amount=parseInt($(btn).next().val());
            if(amount<=1){
                return;
            }
            $(btn).next().val(--amount);
        }
        //修改金额
        //1.获取单价
        var tbs=$(btn).parent().siblings();
        var price=parseFloat((1).text());
        var money=price*amount;
        (2).text(money);
        total();
    }
    function total(){
        var trs=$("#goods tr");
        var sum=0;
        for(var i=0;i<;i++){
            //得到目标td
            var td=(i).children().eq(3);
            //得到当前金额
            var money=parseFloat(());
            //得到总价
            sum+=money;
        }
        $("#total").text(sum);
    }
    </script>

作业

1.简易的二级菜单

2.学子商城二级菜单

3.简易的购物车

day13

复习

对象和Dom对象的区别和转换

    - jq选择器,得到DOM数组,jq对这个数组做了拓展方法
    - 带有jq方法的dom数组,称之为jq对象
    - var ops=$("p")--->jq对象
    - ops[0]---->DOM对象
    - $(dom)---->jq对象

2.选择器和过滤器

 - 基本选择器
 - 层次选择器
 - 过滤器

     - 基本过滤器
     - 内容过滤器
     - 可见性过滤器
     - 属性过滤器
     - 状态过滤器 

 - 表单选择器

总结:找到节点对象,通过层次关系,确定我们要找的节点对象,对这个节点,进行增删改查

的DOM操作

3.1读写内容,值属性

    ();
    ();
    ();
    ();

3.2增删节点

- 创建新节点 var newNode=$("<span></span>")
- 挂到DOM树上
    
    - (newNode)
    - (newNode)
    - (newNode)
    - (newNode)

- 删除节点

    ();
    (selector);

3.3 对于样式的操作

    ("className")
    ("className")
    ();
    ();
    ();

    (属性,属性值);

返回值 obj string

5.节点关系查找节点

    ()/(selector)
    ();/(selector)
    ();/(selector)
    ()/(selector)
    ();

    (selector)

课堂练习小结

二级菜单

简易购物车

jQuery事件

dom事件,操作繁琐,并且有严重的兼容性问题

jQuery对dom做了封装,简化了操作,消除了兼容性问题

动态绑定事件

    $(function(){
        (function(){});//简写形式
        //完整的语法
        ("click",function(){});
    });

关于js的和$(function(){})

在同一个html文件上有多个,后者会覆盖前者

$(function(){})有多个,每一个都有效

事件对象event

    <input type="button" value="点点我试试">

    <script type="text/javascript">
    $(function(){
        $(":button:first").click(function(event){
            (event);
        });
    });
    </script>

事件机制

    事件冒泡机制,事件从内向外传播
    作用:少些事件,通过获取事件源绑定一个事件

取消冒泡

    js: ();
        =true;

jQuery中取消冒泡的作法

<div>
    <p>
        <input type="button" value="我要冒泡啦">
    </p>
</div>

<style type="text/css">
div{
    width: 200px;
    height: 200px;
    background: #f00;
}
p{
    width: 100px;
    height: 100px;
    background: #00f;
}
</style>

<script type="text/javascript">
$(function(){
    $(":button:eq(1)").click(function(){
        alert("button");
        return false;
    });
    $("p:first").click(function(){
        alert("p");
    });
    $("div:first").click(function(){
        alert("div");
    });
});
</script>

jQuery中,取消事件冒泡,只需要在函数中添加return false即可!!!

获取事件源

js  var obj= || ;
jQ  var obj=;//jq直接兼容

jQ为我们提供一套统一,简洁的API

jQ对事件操作,需要背

合成事件,Jq对事件的特殊贡献,是噱头,不是重点

<body>
 <img alt="" src="../img/">
 <img alt="" src="../img/">
</body>

.big{
    width: 500px;

}

<script type="text/javascript">
$(function(){
    $("img:first").hover(function(){
        $("img:first").addClass("big");
        $("img:first").attr("src","../img/");
    },function(){
        $("img:first").removeClass();
        $("img:first").attr("src","../img/");
    });
    setInterval(function(){
        $("img:eq(1)").toggle(100);
    },200);
});
</script>

hover()相当于onmouseover和onmouseout的结合

toggle()相当于hide()和show()方法的结合

模拟事件

电脑模拟人的行为,做一些操作,激发了某些事件

比如,电脑帮你点击

一个网站,显示广告,可以人为点X关掉,不点的话,2秒后电脑模拟点击了X,自动关掉.同时调用了绑定事件函数

(事件类型)
$(":button").trigger("click");


<div>
    <input type="button" value="x">
</div>
<style type="text/css">
div{
    height: 800px;
    background: #006699;
    opacity:.3;
}
div input{
    float: right;
    margin: 5px;
}
</style>
<script type="text/javascript">
$(function(){
    $(":button").click(function(){
        $("div:eq(0)").slideUp(1000);
    });
    setTimeout(function(){
        $(":button").trigger("click");        
    },3000);
});
</script>

动画

网页上由动效,提高用户体验,有专门的动效设计

1.显示,隐藏

    show()/hide()
    作用:通过同时改变元素的宽度和高度来实现显示或隐藏(透明度)
    用法:(执行时间,回调函数)
    执行时间:slow normal fast 写毫秒数
    回调函数:传给某一个方法的函数,在方法结束时运行

<input type="button" value="显示" onclick="show()">
<input type="button" value="隐藏" onclick="hide()">

function show(){
    $("img:eq(0)").show(1500,function(){
        ("显示完成");
    });
}
function hide(){
    $("img:eq(0)").hide(1500,function(){
        ("隐藏完成");
    });
}

动画的本质,是使用定时器连续不断的修改样式

启动了定时器,相当于启动了子线程

事件本身是主线程,两者并发执行,相互不等待

2.上下滑动式

<div></div>
div>div{
    width: 200px;
    height: 800px;
    background: #990066;
    opacity:.3;
}
function down(){
    $("div:eq(1)>div").slideDown(2000);
}
function up(){
    $("div:eq(1)>div").slideUp(2000);
}

总结:

slideUp()/slideDown()
作用:通过改变高度来实现显示或者隐藏效果
用法同上!

3.淡入淡出

fadeIn()/fadeOut();
作用:通过改变透明度opacity来实现显示或者隐藏
用法同上!!!


function hint(){
    $("img:eq(1)").fadeOut(1000).fadeIn(1000);
}

4.自定义动画,动起来

自定义动画基于相对/绝对/固定定位

animate(偏移位置,执行时间,回调函数);
偏移位置:{'left':'500px'}
描述动画执行之后元素的样式位置

<img  alt="" src="../img/">
<input type="button" value="动动" onclick="diy()">
img{
    position: relative;
}
function diy(){
    $("img")
    .animate({'left':'500px'},500)
    .animate({'top':'200px'},200)
    .animate({'left':'0px'},500)
    .animate({'top':'0px'},200);
}

作业:

  1. 完成学子商城帮助页面
  2. 熟悉4种动画
  3. 提高题:完成轮播图代码

注意,下列代码是使用低版本jq写的

要把所有size()变成length属性才可以使用

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="css/">
            <script src="js/jquery-1.11."></script>
            <script src="js/"></script>
        </head>
        <body>
            <!-- 这里的外层需要相对定位，为了里层的ul -->
            <div >
                <!-- ul是整个轮播图动起来的地方，需要绝对定位 -->
                <ul >
                    <li class="oLi"><a href="#javaScript"><img src="images/itemCat_banner1.png" alt=""></a></li>
                    <li class="oLi"><a href="#javaScript"><img src="images/itemCat_banner2.png" alt=""></a></li>
                    <li class="oLi"><a href="#javaScript"><img src="images/itemCat_banner3.png" alt=""></a></li>
                    <li class="oLi"><a href="#javaScript"><img src="images/itemCat_banner4.png" alt=""></a></li>
                    <li class="oLi"><a href="#javaScript"><img src="images/itemCat_banner1.png" alt=""></a></li>
                </ul>
    
                <!-- 焦点 -->
                <ul class="focus">
                    <li class="focus_li"></li>
                    <li class="focus_li"></li>
                    <li class="focus_li"></li>
                    <li class="focus_li"></li>
                    <li class="focus_li"></li>
                </ul>
    
                <!-- 添加按钮 -->
                <div class="btn left"></div>
                <div class="btn right"></div>
            </div>
        </body>
    </html>
    
    *,ul,a{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    
    #banner_wrap{
        width: 1000px;
        height: 400px;
        margin: 0 auto;
        overflow: hidden;
        /*超出位置隐藏*/
        position: relative;
        border: 1px solid #dddddd;
        margin-top: 30px;
    }
    #banner_wrap>#banner{
        position: absolute;
        height: 400px;
    }
    #banner>.oLi{
        width: 1000px;
        height: 400px;
        float: left;
    }
    #banner_wrap>.btn{
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 35px;
        height: 70px;
        margin-top: -35px;
        border-radius: 3px;
        opacity: .15;
        background: red;
        cursor: pointer;
        transition: opacity .2s linear 0s;
    
    }
    #banner_wrap>.left{
        background: url("../images/") #000 no-repeat 50%;
        left: 5px;
    }
    #banner_wrap>.right{
        background: url("../images/") #000 no-repeat 50%;
        left: 960px;
    }
    #banner_wrap:hover>.btn{
        opacity: 0.3;
    }
    
    .focus{
        width: 108px;
        height: 20px;
        position: absolute;
        z-index: 3;
        left: 50%;
        margin-left: -54px;
        bottom: 12px;
    }
    .focus>.focus_li{
        width: 12px;
        height: 12px;
        float: left;
        margin: 4px 4px;
        background: #fff;
        border-radius: 50%;
    }
    
    
    $(function() {
        // 1.定义计数器，定时器
        var num = 0;
        var timer = null;
    
        // 让第一个焦点刷新就显示 
        $('.focus_li').eq(0).css('background', '#0AA1ED');
        //2.动态获取ul的宽度
        //widht()方法是jq dom中的方法，是可以直接计算的宽度，写参数的情况下为赋值，不写参数为获取高度同理height()
        $('#banner').width($('.oLi').eq(0).width() * $('.oLi').size());
        // 3.定义轮播方法
        function BannerLeft() {
            // 原理与js一模一样
            if (num < $('.oLi').size() - 1) {
                num++;
            } else {
                num = 0;
            }
            // 动起来的方法为jq中的自定义动画animate({方法里面以键值对的方式来写},这里的位置是动画的执行时间)
            $('#banner').animate({
                left: -$('.oLi').eq(0).width() * num
            }, 500)
            // 焦点轮播，对比js，这里就一句话
            $('.focus_li').eq(num).css('background', '#0AA1ED').siblings('li').css('background', '#fff');
        }
        // 4.使用定时器启动轮播
        timer = setInterval(BannerLeft, 2000);
    
        // 右侧按钮专用
        function BannerRight(){
        // 当num=0的时候为第一张图片，如果想要向右滚动图片，这个时候就需要把当前的第一张变成最后一张，这样向右去滚动
            if(num==0){
                 // 如果是第一张,回到最后一张
                num = $('.oLi').size()-1;
            }else{
                 // 向右滚动
                num--;
            }
            // 动起来的方法为jq中的自定义动画animate({方法里面以键值对的方式来写},这里的位置是动画的执行时间)
            $('#banner').animate({
                left: -$('.oLi').eq(0).width() * num
            }, 500)
    
            // 焦点轮播，对比js，这里就一句话
            $('.focus_li').eq(num).css('background', '#0AA1ED').siblings('li').css('background', '#fff');
        }
    
    
        // 获取最外层div
        $('#banner_wrap').mouseover(function(event) {
            // 清除定时器
            clearInterval(timer);
        });
        // 获取最外层div
        $('#banner_wrap').mouseout(function(event) {
            // 开启定时器
            timer = setInterval(BannerLeft, 2000);
        });
    
        // 左侧的按钮
        $('.left').click(function(event) {
            // 这里添加一个停止动画方法是为了能够在用户快速点击操作的时候，停止上一次的轮播动画的效果，如果不停止效果则会一直执行完成
            $('#banner').stop();
            BannerRight();
        });
        // 右侧的按钮
        // 这里添加一个停止动画方法是为了能够在用户快速点击操作的时候，停止上一次的轮播动画的效果，如果不停止效果则会一直执行完成
        $('.right').click(function(event) {
            $('#banner').stop();
            BannerLeft();
        });
    
    
        // 焦点触摸事件
        $('.focus_li').mouseover(function(event) {
            // 同理解决动画的执行完成问题
            $('#banner').stop();
            // $(this)JQ中的当前元素，index()是jq中定义好的获取下标的方法，解决num值传不过去的坑
            num = $(this).index();
            // 当前鼠标经过的显示
            $(this).css('background', '#0AA1ED').siblings('li').css('background', '#fff');
            $('#banner').animate({
                left: -$('.oLi').eq(0).width() * num
            }, 500)
        });
    })

相关文章