JavaScript笔记

day06

JavaScript

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

Javascript的发展

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

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

JavaScript的特点

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

学习javascript

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

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

JavaScript的使用

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

2. 嵌入式,在

   总结:在

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

   总结:

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

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

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

   课堂练习:网页版猜数字

   [外链图片转存失败(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)]

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

   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)]

   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)]

       
           
   
               
   
                   账号:
                   5-10位数字,字母,下划线
               
               
   
                   密码:
                   5-10位数字,字母,下划线
               
               
   
                   
               
           
       
   
       
   
       
   

   学子商城登陆页表单验证

   [外链图片转存失败(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

   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代码

   外部对象概述

   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. 弹出框

   定时器

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

   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)]

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

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

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

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

   发送撤销的案例

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

   作业

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

   day09

   复习

   function对象

   1. 返回值
   2. 参数
   

   外部对象

   BOM和DOM的关系

   window

   定时器

   window 常用属性

   1. location对象

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

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

   属性,href location.href=url

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

   
   
   
   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. 查找节点
   
   1. 读写节点
   2. 查询节点
   3. 增删节点
   
   //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
   
       
   今天天气不错
        
   
       2.1 innerHTML
       2.2 innerText
   
   
   1. 读写节点
   2. 查询节点
   3. 增删节点
   
   var p1=document.getElementById("p1");
   console.log(p1.innerHTML);
   console.log(p1.innerText);
   //p1.innerHTML="1. 读写节点";
   p1.innerText="1. 读写节点";
   
   总结: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{
           width: 256px;
           height: 256px;
           margin: 50px auto;
           border: 2px solid #f00;
       }
       .show{
           display: block;
       }
       .hide{
           display: none;
       }
   
       
   

   1. 查询节点

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

   2. 查询节点方式方法

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

       
           
      
               
      北京
               
      上海
               
      广州
               
      深圳
               
      佳木斯儿
               
      葫芦岛
           
           
      
               男
               女
           
       
      
      
       
      

   创建新节点

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

   追加

   插入

   删除

       
           
   
               
   北京
               
   上海
               
   广州
               
   深圳
               
   佳木斯儿
           
           
   
               
               
               
           
       
   
       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)]

       
           省:
           
               请选择
               河北省
               山东省
               江苏省
           
           市:
           
               请选择
           
       
   
           
   

   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--p--btn
           
       
   
   

   如果点击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代码,分离.松耦合

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

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

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

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

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

   通过event对象获取事件源

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

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

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

   IE8.0及以下不支持

   计算器案例

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

   关于this的使用

   作业

   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元素组或者单个元素进行操作

   
       
   北京
       
   上海
       
   广州
       
   深圳
       
   佳木斯儿
   
   
       $(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标签带有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("123");
   
       var str=obj.text();
       obj.text("123");
   
       var str=obj.val();
       obj.val("abc");
       
       obj.attr("属性名");
       obj.attr("属性名","属性值");
   
       
           
   jQuery支持读写节点
           
   jQuery支持增删节点
           
           
   
               
           
       
   
       function fn1(){
           console.log($("p:eq(0)").html());
           console.log($("p:eq(1)").text());
           $("img").attr("src","../img/13.png");
           $(":button").val("别点我");
           //更改两个P标签的中文本内容,
           //html(),text();
           //打印当前img的src值
           //打印当前button的value值
       }
   

   2.jQuery增删节点

   2.1 创建新节点

       var oSpan=$("你好");
   

   2.2 挂到DOM树上

       parent.append(obj);//做为最后子节点添加进来
       parent.prepend(obj);//做为第一个
       brother.before(obj);//做为上一个兄弟节点
       brother.after(obj);//做为下一个兄弟节点
   
   
   
       
       
       
   
   
       
   北京
       
   上海
       
   广州
       
   深圳
       
   杭州
   
   
   
   function fn1(){//追加
       var oLi=$("
   天津
   ");
       $("ul").append(oLi);
       //$("ul").prepend(oLi);
   }
   function fn2(){//插入
       var oLi=$("
   西安
   ");
       //$("#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. 创建新节点
   
       $("
   ")
   

   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.创建新节点

       $("嘿嘿嘿")
   

   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)]

       
           
   
               
   达内java
               
   
                   
   课程介绍
                   
   研发团队
                   
   讲师风采
                   
   联系我们
               
               
   达内java
               
   
                   
   课程介绍
                   
   研发团队
                   
   讲师风采
                   
   联系我们
               
               
   达内java
               
   
                   
   课程介绍
                   
   研发团队
                   
   讲师风采
                   
   联系我们
               
               
   达内java
               
   
                   
   课程介绍
                   
   研发团队
                   
   讲师风采
                   
   联系我们
               
               
   达内java
               
   
                   
   课程介绍
                   
   研发团队
                   
   讲师风采
                   
   联系我们
               
           
       
       
       
   
       
   

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

       $(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)]

   
   真划算
   
   
       
   商品
       
   单价(元)
       
   颜色
       
   库存
       
   好评率
       
   操作
   
   
       
   苹果air
       
   26000
       
   银色
       
   12
       
   50%
       
   
           
       
   
   
       
   迪奥口红
       
   300
       
   #520
       
   800
       
   99%
       
   
           
       
   
   
       
   戴森吹风机
       
   3200
       
   红色全球限量
       
   3
       
   100%
       
   
           
       
   
   
       
   卫聋辣条
       
   2
       
   无色变态辣
       
   5000
       
   100%
       
   
           
       
   
   
       
   樱桃机械键盘
       
   560
       
   黑色
       
   50
       
   100%
       
   
           
       
   
   
       
   大宝sod蜜
       
   26
       
   乳白色
       
   5000
       
   100%
       
   
           
       
   
   
   购物车
   
       
   
           
   
               
   商品
               
   单价(元)
               
   数量
               
   金额
               
   删除
           
       
       
   
   
       
       
   
           
   
               
   总计
               
   
               
   
           
       
   
   
   
       
       
   
       
   

   作业

   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=$("")
   - 挂到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

   事件机制

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

   取消冒泡

       js: event.stopPropagation();
           event.cancelBubble=true;
   

   jQuery中取消冒泡的作法

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

   获取事件源

   js  var obj=event.srcElment || event.target;
   jQ  var obj=event.target;//jq直接兼容
   

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

   jQ对事件操作,需要背

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

   
    
    
   
   
   .big{
       width: 500px;
   
   }
   
   
   

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

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

   模拟事件

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

   比如,电脑帮你点击

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

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

   动画

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

   1.显示,隐藏

       show()/hide()
       作用:通过同时改变元素的宽度和高度来实现显示或隐藏(透明度)
       用法:obj.show(执行时间,回调函数)
       执行时间:slow normal fast 写毫秒数
       回调函数:传给某一个方法的函数,在方法结束时运行
   
   
   
   
   function show(){
       $("img:eq(0)").show(1500,function(){
           console.log("显示完成");
       });
   }
   function hide(){
       $("img:eq(0)").hide(1500,function(){
           console.log("隐藏完成");
       });
   }
   

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

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

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

   2.上下滑动式

   
   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{
       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属性才可以使用

       
       
           
               
               
               
               
           
           
               
               
   
                   
                   
   
                       
   
                       
   
                       
   
                       
   
                       
   
                   
       
                   
                   
   
                       
   
                       
   
                       
   
                       
   
                       
   
                   
       
                   
                   
   
                   
   
               
           
       
       
       *,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)
           });
       })