JavaScript笔记

最新推荐文章于 2021-01-13 07:30:05 发布
最新推荐文章于 2021-01-13 07:30:05 发布
阅读量3.7k 收藏 4
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32705919/article/details/99128669
版权

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. 文件调用式

    my.js文件中

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

    在标签内部写

总结:

文件调用式,在单独的.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";
  console.log(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;
  
  console.log(s+n);//hello9
  console.log(s+b);//hellotrue
  console.log(n+b);//true--1  false--0
  console.log(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";
//console.log(n.toString()+1);
//console.log(parseInt(s)+1);
//console.log(parseFloat(s)+1);
//console.log(parseFloat("abc")+1);//not a number
//console.log(parseInt(""));//NaN

typeof

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

isNaN

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

课堂练习

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

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

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

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

总结:

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

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

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

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

课堂练习:网页版猜数字

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

逻辑运算符 ! && ||

要注意短路问题

条件表达式

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

    if("afsda"){
        console.log(1111);
    }

当使用非boolean值做条件时

true 非空字符串 非0数字

false null undefined “” 0 NaN

if(NaN){

}else{
    console.log(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++){
console.log(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)(1.png)]

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

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

javascript常用API

string

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

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

2.大小写的转换

str.toLowerCase();
str.toUpperCase();

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

str.charAt(index);

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

4.查询指定的字符串

str.indexOf("");
str.lastIndexOf("");

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

5.获取子字符串

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

6. 替换子字符串

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

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

7.拆分子字符串

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

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

课堂练习

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

<ul id="ul">

</ul>

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

Number对象的常用方法

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

数组

js中的数组特点

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

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

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

  3. js中的长度可变

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

  5. 数组常用api

     arr.reverse() // 反转输出

arr.sort();//排序

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

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

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

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

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

math

用于数学计算
1.取整
console.log(Math.round(4.56));
2.
Math.floor(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

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

    d1.getFullYear();//获取年
    d1.getMonth();//获取月,需要+1，月份从0开始
    d1.getDate();//月的天
    d1.getDay();//周的天

    d1.getHours();//获得小时
    d1.getMinutes();//分钟
    d1.getSeconds();//秒

date转化成本地时间格式

d1.toString();
d1.toLocaleTimeString();
d1.toLocaleDateString();

正则

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

1.如何创建正则对象

- 直接创建

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

- 创建对象

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

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

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

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

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

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

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

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

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

    2. str.match(reg);

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

    var str="you can you up,no can no bi bi";
    var reg=/no/g;
    //var str1=str.replace(reg,"bu");
    //console.log(str1);
    console.log(str.match(reg));


    3. str.search(reg);

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

        console.log(str.search(reg));

作业

全天笔记要求过一遍

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

背表单验证的代码

day08

js中的常用API

完善form表单的验证

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

    <body>
        <form action="http://www.tmooc.cn"   
        onsubmit="return checkUser()*checkPwd()==1;">
            <div>
                账号:<input type="text" id="username" 
                onblur="checkUser();">
                <span id="msg_user">5-10位数字,字母,下划线</span>
            </div>
            <div>
                密码:<input type="password" id="pwd" 
                onblur="checkPwd();">
                <span id="msg_pwd">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=document.getElementById("msg_user");
            //获得正则对象
            //5-10位数字,字母,下划线
            var reg=/^\w{5,10}$/;
            //开始验证
            if(reg.test(code)){
                //格式正确,span字体变绿
                span.className="ok";
                return true;
            }else{
                span.className="error";
                return false;
            }
        }
        function checkPwd(){
            var code=document
            .getElementById("pwd").value;
            var span=document.getElementById("msg_pwd");
            var reg=/^\w{5,10}$/;
            if(reg.test(code)){
                span.className="ok";
                return true;
            }else{
                span.className="error";
                return false;
            }
        }
    </script>

学子商城登陆页表单验证

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

function对象

1.js中函数就是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)(3.png)]

JS的函数没有重载

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

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

代码演示

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

    function add(){
      var sum=0;
      for(var i=0;i<arguments.length;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" id="num">
        <input type="button" value="计算" 
        onclick="cal();">
    </body>

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

外部对象概述

BOM与DOM

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

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(){
         window.alert("你好");
     }
     //2.确认框
     function fn2(){
         var flag=window.confirm("how are you!!");
         console.log(flag);
     }
     //3.输入框
     function fn3(){
         var str=window.prompt("中午吃的什么?");
         console.log(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(){
        console.log(num--);
        if(!num){// num==0
            clearInterval(id);
        }
    },1000);
    console.log("蹦蹦");
}

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

当前方法fn4相当于主线程

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

课堂练习,电子时钟

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

<div>
    <input type="button" value="开始" onclick="start();">
    <input type="button" value="停止" onclick="stop();">
    <p id="clock"></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)(6.png)]

    <script type="text/javascript">
    var id;
    function start(){
        if(id){//id在undefined和null的情况才会启动定时器
            return;
        }
        var oP=document.getElementById("clock");
        id=setInterval(function(){
            var d=new Date();
            var now=d.toLocaleTimeString();
            oP.innerHTML=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)(7.png)]

    <script type="text/javascript">
       var id;
        function send(){
            var oP=document.getElementById("msg");
            oP.innerHTML="发送中...";
            //推迟三秒发送
            id=setTimeout(function(){
                oP.className="ok";
                oP.innerHTML="发送成功";
            },3000);
        }
        function cancel(){
            var oP=document.getElementById("msg");
            oP.className="error";
            oP.innerHTML="已撤销";
            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 id="msg"></p>
    </body>

作业

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

day09

复习

function对象

1. 返回值
2. 参数

外部对象

BOM和DOM的关系

window

定时器

window 常用属性

1. location对象

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

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

属性,href location.href=url

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

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


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

2.screen

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

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

1. width/height
2. availWidth/availHeight

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

3.history

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

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

方法:

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

4.navigator

包含浏览器的相关信息

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

DOM的操作

DOM提供哪些操作

1. 查找节点

<p id="p1">1. <b>读写</b>节点</p>
<p id="p2">2. <b>查询</b>节点</p>
<p id="p3">3. <b>增删</b>节点</p>

//var p1=document.getElementById("p1");
//var p2=document.getElementsByTagName("p")[1];
//console.log(p2);
//console.log(p1);
//console.log(p1.nodeName);
//console.log(p1.nodeType);

总结: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 id="p1">1. <b>读写</b>节点</p>
<p id="p2">2. <b>查询</b>节点</p>
<p id="p3">3. <b>增删</b>节点</p>

var p1=document.getElementById("p1");
console.log(p1.innerHTML);
console.log(p1.innerText);
//p1.innerHTML="1. <u>读写</u>节点";
p1.innerText="1. <u>读写</u>节点";

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

    2.3 读写值

        btn.value;

2.4读写节点的属性

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

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

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

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

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

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

总结:

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

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

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

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

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

最多两个方框

鼠标悬停和鼠标离开事件

onmouseover鼠标悬停
onmouseout鼠标离开

    <div onmouseover="stop();" onmouseout="go();">
        <img src="../img/08.png" class="hide">
        <img src="../img/06.png" class="hide">
        <img src="../img/13.png" class="hide">
        <img src="../img/16.png" class="hide">
        <img src="../img/15.png" class="hide">
        <img src="../img/12.png" class="hide">
        <img src="../img/14.png" 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;
    window.onload=function(){
        imgs=document.getElementsByTagName("img");
        //先把第一张显示
        imgs[0].className="show";
        //定时启动轮播
        go();
    }
    function go(){
        id=setInterval(function(){
            //计算要显示图片的下标
            //轮播总次数%数组长度
            var index=n%imgs.length;
            //隐藏全部图片
            for(var i=0;i<imgs.length;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 id="gz">广州</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">
 window.onload=function(){
     //1.根据id查询
     //var gz=document.getElementById("gz");
     //2.根据标签层次查询(节点关系)
     //2.1查询父节点
     //console.log(gz.parentNode);
     //2.2查询孩子,子节点
     //var oUl=document.getElementsByTagName("ul")[0];
     //console.log(oUl.childNodes);
     //把查询节点的方位缩小到ul内部(重点掌握)
     //var oLis=oUl.getElementsByTagName("li");
     //console.log(oLis);
     //2.3查询兄弟节点
     //某节点.父亲.孩子们[index]
     //var gz=document.getElementById("gz");
     //var jms=gz.parentNode
     //.getElementsByTagName("li")[4];
     //console.log(jms);
     //2.4根据name属性查询节点
     //一般用于查询一组单选/多选
     var radios=document.getElementsByName("gender");
     console.log(radios);
 }
 </script>

创建新节点

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

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

追加

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

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

插入

删除

    <body>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li id="gz">广州</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=document.createElement("li");
        oLi.innerHTML="重庆";
        var oUl=document.getElementsByTagName("ul")[0];
        oUl.appendChild(oLi);
    }
    function fn2(){
        var oLi=document.createElement("li");
        oLi.innerHTML="铁岭";
        //插入需要父级对象,和弟弟对象
        var oUl=document.getElementsByTagName("ul")[0];
        var gz=document.getElementById("gz");
        //把新节点插入到父亲下级,弟弟之前
        oUl.insertBefore(oLi,gz);
    }
    function fn3(){
        //需要父级元素对象和要删除的元素对象
        var oUl=document.getElementsByTagName("ul")[0];
        var gz=document.getElementById("gz");
        //通过父级对象删除孩子
        oUl.removeChild(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. parent.appendChild(newNode)
    3. parent.insertBefore(newNode,弟弟对象)
    4. parent.removeChild(节点对象)

课堂练习:二级联动菜单

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

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

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

javascript事件处理

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

1.鼠标事件

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

2.键盘事件

    - onkeydown
    - onkeyup

3.状态改变事件

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

事件绑定

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

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

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

  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. event.stopPropagation();

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

    2. event.cancelBubble=true;

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

4.event对象,事件对象(*****)

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

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

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(event.clientX+’:’+event.clientY);
    }

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

通过event对象获取事件源

1.IE和chrome,chrome对IE做了兼容

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

function fn3(event){
    var obj=event.srcElement;
    console.log(obj);
}

2.Firefox和chrome,高版本IE也支持

IE8.0及以下不支持

计算器案例

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

关于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.parentNode;
    oDiv.removeChild(btn);
}
</script>

作业

1.事件冒泡,取消冒泡

2.获取event对象

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

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

5.完成一遍二级联动

day11

jQuery

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

jQuery对象详解

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

jQuery的常用选择器

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

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

<ul>
    <li>北京</li>
    <li>上海</li>
    <li id="gz">广州</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

1.jQuery对内容和值的操作

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

    var str=obj.text();
    obj.text("123");

    var str=obj.val();
    obj.val("abc");
    
    obj.attr("属性名");
    obj.attr("属性名","属性值");

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

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

2.jQuery增删节点

2.1 创建新节点
    var oSpan=$("<span>你好</span>");
2.2 挂到DOM树上
    parent.append(obj);//做为最后子节点添加进来
    parent.prepend(obj);//做为第一个
    brother.before(obj);//做为上一个兄弟节点
    brother.after(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 id="gz">广州</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节点
    obj.remove(); //删除这个节点
    obj.remove(selector);//只删除满足selector条件的节点

样式操作 add remove has css toggle

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

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


$("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=document.getElementsByTagName("p")[0];
    $(oP).addClass(...)

3. 创建新节点

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

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

obj.html("abc")
obj.attr("src","../img/06.png")
obj.addClass("red").removeClass("red")

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

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

    obj.val();
    obj.html();
    obj.text();

5.万能确认对象的方式

    控制台输出,看对象结构

作业

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

#day12

复习

读写内容

    obj.html();/obj.html("");
    obj.test();/obj.test("");
    obj.val();/obj.val("");

增删节点

1.创建新节点

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

2.挂到dom树上

    parent.append(obj)//添加最后一个子节点
    parent.prepend(obj)//添加第一个子节点
    brother.after(obj);//添加一个弟弟节点
    brother.before(obj);//添加一个哥哥节点

3.删除节点

    obj.remove();
    obj.remove(selector);//满足selector条件的节点被删除
    obj.empty();
    parent.html("");

对样式的操作

    obj.addClass("");
    obj.removeclass("");//删除某一个class
    obj.removeclass();//删除所有的样式
    obj.hasClass("")//是否应用了某一个样式
    obj.toggleClass("");//切换某一个样式

jQuery方法的返回值问题

通过节点关系,查找节点

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

obj.find(selector);//查找满足条件所有后代
obj.parent();

课堂练习

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

    <body>
        <ul id="nav">
            <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/myOrder1.png");
            }else{
                //关闭所有ul,把箭头向右
                $(".submenu").removeClass("dis")
                .addClass("hide");
                $(".menu").children("img")
                .attr("src","../images/myOrder/myOrder1.png");
                //打开弟弟ul,把箭头向下
                $(this).next().removeClass("hide")
                .addClass("dis");
                $(this).children("img")
                .attr("src","../images/myOrder/myOrder2.png");
            }
        });
    });

课堂练习

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

<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 id="goods">

    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" align="right">总计</td>
            <td id="total"></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=tr.children().eq(0).text();
        //var price=tr.children().eq(1).text();
        //第二种获取name和price的思路
        var tds=$(btn).parent().siblings();
        var name=tds.eq(0).text();
        var price=tds.eq(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());
            //console.log(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(tbs.eq(1).text());
        var money=price*amount;
        tbs.eq(2).text(money);
        total();
    }
    function total(){
        var trs=$("#goods tr");
        var sum=0;
        for(var i=0;i<trs.length;i++){
            //得到目标td
            var td=trs.eq(i).children().eq(3);
            //得到当前金额
            var money=parseFloat(td.text());
            //得到总价
            sum+=money;
        }
        $("#total").text(sum);
    }
    </script>

作业

1.简易的二级菜单

2.学子商城二级菜单

3.简易的购物车

day13

复习

1.jQuery对象和Dom对象的区别和转换

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

2.选择器和过滤器

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

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

 - 表单选择器

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

3.jQuery的DOM操作

3.1读写内容,值属性

    obj.html();
    obj.text();
    obj.val();
    obj.attr();

3.2增删节点

- 创建新节点 var newNode=$("<span></span>")
- 挂到DOM树上
    
    - parent.append(newNode)
    - parent.prepend(newNode)
    - brother.after(newNode)
    - brother.before(newNode)

- 删除节点

    obj.remove();
    obj.remove(selector);

3.3 对于样式的操作

    obj.addClass("className")
    obj.removeClass("className")
    obj.removeClass();
    obj.hasClass();
    obj.toggleClass();

    obj.css(属性,属性值);

4.jQuery返回值 obj string

5.节点关系查找节点

    obj.children()/obj.children(selector)
    obj.next();/obj.next(selector)
    obj.prev();/obj.prev(selector)
    obj.siblings()/obj.siblings(selector)
    obj.parent();

    obj.find(selector)

课堂练习小结

二级菜单

简易购物车

jQuery事件

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

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

动态绑定事件

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

关于js的window.onload和$(function(){})

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

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

事件对象event

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

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

事件机制

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

取消冒泡

    js: event.stopPropagation();
        event.cancelBubble=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=event.srcElment || event.target;
jQ  var obj=event.target;//jq直接兼容

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

jQ对事件操作,需要背

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

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

.big{
    width: 500px;

}

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

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

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

模拟事件

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

比如,电脑帮你点击

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

obj.trigger(事件类型)
$(":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()
    作用:通过同时改变元素的宽度和高度来实现显示或隐藏(透明度)
    用法:obj.show(执行时间,回调函数)
    执行时间:slow normal fast 写毫秒数
    回调函数:传给某一个方法的函数,在方法结束时运行

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

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

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

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

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

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 id="img" alt="" src="../img/08.png">
<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/index.css">
            <script src="js/jquery-1.11.3.min.js"></script>
            <script src="js/index.js"></script>
        </head>
        <body>
            <!-- 这里的外层需要相对定位，为了里层的ul -->
            <div id="banner_wrap">
                <!-- ul是整个轮播图动起来的地方，需要绝对定位 -->
                <ul id="banner">
                    <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/arrow-left.png") #000 no-repeat 50%;
        left: 5px;
    }
    #banner_wrap>.right{
        background: url("../images/arrow-right.png") #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)
        });
    })
浩彤先生
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在WebView中对第三方H5页面的文本密码框添加自定义随机键盘
比较喜欢、笑的博客专栏
08-15 1290
前言： 首先介绍一下这个需求的背景，由于公司是涉及到金融行业的需要与银行对接资金存管。出于保密性这里不直接列出公司名字和银行名字。从2018年国家对金融行业大整改以来，为了能够顺利通过备案，我们也跟着政府的脚步一步一步走向合规。 好了，大致就是因为要通过备案，必须把这个需求实现，否则将不会通过。 需求内容就是，当客户端有关资金交易的时候，会通过加密数据以及秘钥的方式把第三方银行的页面（充值、...
js实现input密码框显示/隐藏功能
12-04
JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下 实现代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display: flex; align-items: center; } .password .fa{ position: absolute; righ
Js制作点击输入框时默认文字消失的效果
10-23
为了提高用户体验和易用度，一些设计师会对网页中用户经常用的东西进行优化，比如输入框。一般的输入框是怎样优化的呢？从用户体验的角度出发，简化用户使用步骤，让用户用得更方便就是提高了易用性
基于JS实现密码框(password)中显示文字提示功能代码
11-22
其实实际上实现中并不能让password中显示文字提示，但是我们在工作中有这样的需求，当没输入东西的时候，框内有提示输入密码，但是当输入东西的时候又显示的是*号，那么是如何实现的呢？其实原理很简单，就是放两个文本框，样式以及定位都是一样的。先将type为password的隐藏，只显示type为text的伪密码框，value设置提示内容例如请输入密码。然后当input触发的时候，type为text的input隐藏，让type为password的input显示出来。然后当检测password的value为空的时候，再将type为password隐藏，type为text的显示。啥话也不说了，上代码。
原生js实现密码输入框值的显示隐藏
10-19
主要为大家详细介绍了原生js实现密码输入框值的显示隐藏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript笔记
04-20
javascript学习笔记，从actionScript转到前端开发，偏重于前端理论基础，供参考
狂神说系列 JavaScript笔记
06-15
狂神说系列 JavaScript笔记
vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
热门推荐
CodingNoob
04-28 1万+
github效果在线预览仓库地址： https://github.com/zhongyoucong/vuejs/vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：登入后： 登入前： 登录框: 注册框： html代码部分：
js实现input密码框提示信息的方法(附html5实现方法)
10-22
主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下
JS中解决谷歌浏览器记住密码输入框颜色改变功能
10-20
主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
web前端练习10----写一个弹出框效果
01-14
今天有点空闲，写了一个前端的弹出框，把代码传到这里和大家交流学习
javascript搜索框点击文字消失失焦时文本出现
10-25
主要介绍了javascript实现搜索框点击文字消失失焦时文本出现的效果，示例代码如下，大家可以看看
js多方框输入密码_js 如何实现密码输入时，明文显示一秒后变成密文呢？
weixin_39932939的博客
01-13 551
function MaskedPassword(passfield, symbol){if(typeof document.getElementById == 'undefined'|| typeof document.styleSheets == 'undefined') { return false; }if(passfield == null) { return false; }this.s...
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
05-04
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
各地区年末城镇登记失业人员及失业率.xls
最新发布
05-05
数据来源：中国劳动统计NJ-2023版
企业固定资产信息管理系统设计与实现.doc
05-04
企业固定资产信息管理系统设计与实现.doc
node-v11.14.0-darwin-x64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值