JavaScript html搭建页面的结构和内容 css用于美化页面 javaScript，给页面添加动态效果和内容的
历史：1995年由网景公司发布 LiveScript同年更名为JavaScript简称JS，和java没啥关系 为了蹭热度。
JS特点 js属于脚本语言，不需要编译，由浏览器解析执行。 js可以嵌入到html代码中 js基于面向对象，属于弱类型语言 JS优点 交互性：可以直接和用户进行交互 安全性：js语言智能访问浏览器内部的数据不能访问浏览器之外内容（电脑磁盘中的各种数据） 如何引入JS代码 在元素的事件中书写js代码 通过Script标签添加js代码
<script type="text/javascript"> alert("第二种引入方式"); </script> 把js代码写在单独的js文件中，通过 JS的数据类型 数值类型(number) 字符串类型(string) 布尔值类型(boolean) undefined 对象类型 变量的声明及赋值 由于js语言属于弱类型语言声明变量时不需要指定类型 var x = 18; var name="小明"; var isBoy=true; x="abc"; var m; //此时m的类型为undefined值也为undefined
###JS引入方式 1. 在元素的事件中添加js代码
<input type="button" οnclick="alert('lalala')">
2. 通过<script>标签添加js代码
3. 写在单独的js文件中，通过script标签中的src属性引入js文件
###数据类型 - 数值类型 number - 字符串类型 string - 布尔值类型 boolean - undefined - 对象类型 ###变量的声明和赋值
- var age = 18; - var name = "小明"; - var isBoy = true/false; - age="18"; - var x;
####数值类型 - js中底层都是浮点型，在使用过程中会自动转换整数或小数 int x = 5/2; 2 var x = 5/2; 2.5 4/2; 2 - NaN: not a number 不是一个数， 通过isNaN()函数进行判断
####字符串类型 - 通过单引号或双引号修饰字符串 var s1 = "abc"; var s2 = 'abc'; ####布尔值类型
var b1 = true; var b2 = false;
###数据类型转换 var z = "abc"+18; - 任何数字和NaN进行运算结果都为NaN
####数值类型 1. 转字符串： 直接转 18->"18" "abc"+18 = "abc18" 2. 转布尔值： 0和NaN转false 其它都转true - 在if括号里面的类型如果不是布尔类型会自动转成布尔类型
####字符串类型 1. 转数值： 能转直接转,不能转转成NaN "100"->100 "abc"->NaN 2. 转布尔值： 空字符串转成false 其它true,""->false "abc"->true
####布尔值 1. 转数值： true->1 false->0; 20+true=21; 20+false=20; 2. 转字符串: true->"true" false->"false" "abc"+true="abctrue"
####undefined 1. 转数值： undefined->NaN 20+undefined=NaN 2. 转字符串： undefined->"undefined" "abc"+undefined="abcundefined" 3. 转布尔值： undefined->false ####null 是对象类型的值 1. 转数值： null->0 2. 转字符串： null->"null" 3. 转布尔值: null->false
###JS的运算符 + - * / - 和Java中的运算符大体相同 1. ==和===
==会先将等号两边的变量类型统一，统一完后再比较内容 "66"==66 true ===会先比较类型是否相同，类型相同后再比较内容 "66"===66 false 2. 两数相除会自动转换小数和整数 5/2=2.5 4/2=2
3. typeof: 获取变量的类型 typeof 18
typeof 66 + 6 "number6" ###语句 - 包括： if else while do while for switch case - 需要布尔值的地方如果不是布尔值会自动转成布尔值 - for循环中 把 int改成var ,不支持增强for循环(for each) ###函数 - 第一种 function 函数名(参数列表){ return 18; } - 第二种 var 函数名 = function(参数列表){ return 18; }
####和页面元素相关的函数 1. 获取页面中的元素对象 var input = document.getElementById("id"); 2. 给文本框赋值和取值的两种方式 input.value="abc";//赋值 var s = input.value;//取值 3. 给元素添加文本内容 元素对象.innerText = "abc"; 4. 给元素添加html代码 元素对象.innerHTML="<h1>abc</h1>";
###总结回顾： 1. 三种引入方式： 在标签的事件中添加js，2. 在Script标签中添加js 3.在单独的js文件中添加js通过script的src属性引入 2. 数据类型： 数值number 字符串string 布尔值boolean undefined 对象类型 3. 类型转换 - 字符串 转数值 能转直接转 不能转转成NaN 转布尔值：""->false 其它->true - 数值 转字符串 直接转 转布尔值： 0/NaN->false 其它->true - 布尔值 转字符串 直接转 转数值： true->1 false->0 - undefined 转字符串 直接转 转数值 NaN 转布尔值：false - null 转字符串 直接转 转数值：0 转布尔值：false 4. 运算符 + - * / - ==(先统一类型再比较)和===(先比较类型如果类型相同再比较内容) - typeof 获取遍历的类型 typeof 66+6 "number6" - 除法会自动转换整数和小数 5. 语句 - for循环int改成var 不支持增强for循环 - 条件如果不是布尔值会自动转成布尔值 6. 函数 - 第一种： function 函数名(参数列表){ return 18; } - 第二种 var 函数名 = function(参数列表){ return 18; } 7. 页面相关的函数 - 通过id获取页面中的元素对象
var x = document.getElementById("abc"); - 给文本框赋值和取值
x.value="abc"; var y = x.value;
- 给元素添加文本内容
x.innerText = "<h1>abc</h1>";
- 给元素添加html代码
x.innerHTML = "<h1>abc</h1>"
####String相关api 1. 创建String的两种方式： - var s1 = "abc"; - var s2 = new String("abc"); 2. 转大小写 "abC".toUpperCase(); "NBA".toLowerCase(); 3. 获取某个字符串在另外一个字符串中出现的位置 从0开始 "java hello".indexOf("a"); //第一次出现的位置 "java hello".lastIndexOf("a");//最后一次出现的位置 4. 截取字符串 end可以省略 "java hello".substring(start,[end]); - 只写start截取到最后 - 写end 截取到end的位置 不包含end
5. 替换字符串 并没有把原字符串修改掉 "java hello".replace("hello","helloworld"); var s = "<h1>[c]</h1>" s = s.replace("[c]","lala"); 6. 拆分字符串 var names = "刘德华,张学友,赵四儿,黎明".split(","); for(var i=0;i<names.length;i++){ var name = names[i]; alert(name); } ###number相关函数 - 四舍五入 toFixed(2)保留2位小数
var x = 3.1415926; x.toFixed(3); ###数组 1. 创建数组的两种方式 - var arr1 = ["刘德华",18,true]; - var arr2 = new Array("刘德华",18,true); 2. 数组中添加数据 arr2.push("周杰伦"); 3. 修改数组的长度 arr2.length=2; 4. 数组中获取数据 [数组下标] 没有角标越界 for(var i=0;i<arr2.length;i++){ var x = arr2[i]; alert(x); } 5. 数组反转 var arr3 = [1,2,3]; arr3.reverse(); 6. 数组排序 var arr4 = [5,7,2,9,6]; arr4.sort(); var arr5 = [23,15,2,100,30,8]; arr5.sort(); - 默认排序规则：以字符串的形式进行排序通过unicode编码比较第一个字符比较完比较第二个以此类推 - 自定义排序：
//声明自定义的排序函数 function mysort(a,b){ //升序 return a-b; //降序 //return b-a; } arr.sort(mysort);
- 如果数组中保存的对象的话通过以下方式进行排序 var persons = [p1,p2,p3,p4]; function mysort(a,b){ //升序 return a.sal-b.sal; //降序 //return b.age-a.age; }
###日期相关 - 了解服务器时间(服务器电脑的时间)和客户端时间（用户电脑的时间）
1. 获取客户端时间 var d1 = new Date(); 2. 指定时间创建时间对象 通常时间来自服务器 var d2 = new Date("2018/08/01 18:36:50"); 3. 获取和设置时间戳（距离1970年1月1日 08:00:00的毫秒数） d2.getTime(); d2.setTime(1000); 4. 从date对象中获取单独的年月日时分秒 星期几
d1.getFullYear();//年 d1.getMonth(); //月份需要+1 从0开始 d1.getDate();//号/日 d1.getDay();//星期几 d1.getHours(); //时 d1.getMinutes();//分 d1.getSeconds();//秒 5. 从date获取年月日 和 获取时分秒
d1.toLocaleDateString(); d1.toLocaleTimeString();
###正则 - . 匹配任意字符 - \w 匹配任意字母、数字、下划线 - \s 匹配任意空白 - \d 匹配任意数字 - ^ 开始 - $ 结束 - 创建正则的两种方式 1. var reg1 = /规则/模式; 2. var reg2 = new RegExp(规则,模式); //没有模式的话可以省略，反斜杠需要转义 - 正则相关的函数 1. reg.exec(str); //查找内容 如果模式为g全局查找 执行一次查询一个 2. reg.test(str); //校验文本 - 字符串和正则相关的函数 1. str.match(reg); //查找 返回值为一个数组 2. str.replace(reg,替换的内容); //查找并替换
###总结回顾 ###css 1. 三种引入方式 - 内联 style属性 - 内嵌 <style> - 外部 .css文件 通过link 2. 选择器 - 标签名选择器 div{} - id选择器 #id - 类选择器 .class{} - 派生 div span h1{} div>span>h1{} - 伪类 :hover悬停 :active点击时状态 visited 访问过的 :link未访问 - 分组选择器 #id,.class{} - 任意元素选择器 *{}
3. 常用属性 - 盒子模型： 宽高 内边距padding 内容到边框的距离 外边距margin 盒子与盒子或上级的距离 边框border - 行内元素关于盒子模型的细节： 1. 宽高不生效 2. 内边距：上下左右都有效果但是 上下不占显示范围 3. 边框: 上下左右都有效果但是 上下不占显示范围 4. 外边距： 上下没效果
####文本相关属性 - 文本对齐 text-align - 文本修饰 text-decoretion:none/underline/overline/line-through - 颜色 color - 行高 line-height ####字体相关 - 字体大小 font-size - 字体样式 font-family - 字体加粗 font-weight:bold/normal
###溢出设置 overflow: hidden/visible(可见)/scroll（滚动） ###显示方式 display: inline/block/inline-block/none ###定位方式 - 文档流：position:static - 相对:position:relative 不脱离文档流 相对于初始位置 - 绝对:absolute 脱离 相对于窗口或做了非static定位的祖先元素 - 固定：fixed 脱离 相对于窗口
- 浮动： float:left/right 脱离 clear:both/left/right
####垂直对齐 vertical-align: baseline/top/bottom/middle
####创建元素对象 var div = document.createElement("div"); ###自定义对象 扩展内容 1. 声明函数的形式创建对象
function Person(name,age){ this.name=name; this.age=age; this.run = function(){ alert("name:"+this.name+" age:"+this.age); } } //创建对象 var p = new Person("张三",18); //调用对象的方法 p.run(); 2. 声明变量的形式创建对象
var student = { "name":"曹操", "age":28, "run":function(){ alert("name:"+this.name+" age:"+this.age); } } //调用 student.run();
###DHTML
- 简介： Dynamic(动态)超文本标记语言，这个不是新的技术，只是把所学的html,css,js结合到一起实现出来的内容 - DHTML包括：BOM和DOM - BOM： Browser(浏览器) Object(对象) Model(模型), 包含了一部分和浏览器相关的对象 可以获取浏览器的请求地址，历史记录，浏览器窗口尺寸，浏览器版本。 - DOM： Document(文档) Object(对象) Model(模型),包含了和页面相关的内容 ###BOM ####window - window里面的对象称为全局对象 里面的方法称为全局方法。全局对象和方法可以省略掉window。 ####window中 常用的全局方法： alert();//提示框 confirm();//确认框 prompt();//弹出文本框 parseInt()/parseFloat(); isNaN(); ####window中 常用的对象 ##### location 地址 1. location.href 用于获取和设置浏览器请求的地址 2. location.reload(); //刷新
#####history 历史 - 当前窗口的历史记录 窗口关闭后就没有了 1. history.length 得到历史请求页面的数量 2. history.back() 返回上一个页面 3. history.forward() 前往下一个页面 4. history.go(num) 前往某个页面 0当前页面 1下一个页面 2下两个页面-1上一个页面
#####screen 屏幕 1. screen.width/height //得到屏幕的宽高(像素) 2. screen.availWidth/availHeight //得到屏幕可用的宽高
#####navigator 导航/帮助 1. navigator.userAgent 得到浏览器相关的版本信息
###和window相关的事件 - window的点击事件 onclick - 页面加载完成事件 onload - 获取焦点事件 onfocus - 失去焦点事件 onblur
### eval()函数 - 可以将字符串以js代码的形式执行
### 通过js给元素添加css样式 - 通过元素对象.style.样式属性名称 = "属性值";
###定时器 - setInterval(函数,时间间隔); ###通过标签名查找
var elements = document.getElementsByTagName("input");
案例：假轮播图 1. 搭建界面 2. 给图片们添加样式 修改大小 并且让所有图片隐藏 3. 在页面加载完的时候(onload) 得到所有图片 从里面取出第一张 设置style让其显示 4. 开启每两秒执行一次的定时器 5. 在定时器里面准备一个递增的整数 6. 对递增的数值进行取余，得到的值为数组下标 7. 变量数组 判断i的值等于上一步的下标时 让当前遍历的图片显示 其它图片隐藏
###电子时钟练习 1. 创建demo02.html 2. 在body里面添加一个h1 标签 设置id 3. 在script标签中 开启定时器 每隔一秒执行一次，在执行的方法中获取当前的客户端时间 date 从date中获取时分秒 把得到的时分秒显示到h1标签中 搞定！
###定时器 - 开启定时器 var timeId = setInterval(函数,时间) - 停止定时器 clearInterval(timeId) - setTimeout(函数,时间);
###DOM Document Object Model 文档对象模型 - 学习DOM主要学习的就是对页面当中的元素进行增删改查操作
####查找元素 1. 通过id查找 var input = document.getElementById("id"); 2. 通过标签名查找 var divs = document.getElementsByTagName("div"); 3. 通过标签的name属性值查找 var arr = document.getElementsByName("gender"); 4. 通过标签的class属性值查找 var arr = document.getElementsByClassName(""); ####通过上下级关系获得元素 1. 获取元素的上级元素 元素对象.parentElement 得到的是一个上级元素 2. 获取元素的下级元素们 元素对象.childNodes 得到的是一个数组里面装着多个元素和文本
####创建元素 var div = document.createElement("div"); - 添加到某个元素里面 上级元素.appendChild(div); - 添加到某个元素的上面 上级元素.insertBefore(div,弟弟元素);
###DOM
####查找元素的几种方式 1. 通过id document.getElementById("id"); 2. 通过标签名 document.getElementsByTagName("div"); 3. 通过name document.getElementsByName("gender"); 4. 通过class document.getElementsByClassName("class"); 5. 上级元素 parentElement 6. 下级元素们 childNodes ####创建元素
document.createElement("div")
####添加元素
父元素.appendChild(新元素)
####插入元素 父元素.insertBefore(新元素，弟弟元素);
####删除元素
父元素.removeChild(被删除的元素);
####修改元素的文本内容 innerText() ####修改元素内部的html内容 innerHTML() ####修改元素的样式 元素对象.style.样式名称="样式的值";
###事件 - onclick点击事件 onload加载完成事件 onfocus 获取焦点事件 onblur失去焦点事件 onmouseover鼠标移入事件 onmouseout 鼠标移除事件，onchange 值改变事件 onsubmit 提交事件
- 什么是事件：代表了某些特定的时间点，包括状态改变事件，鼠标事件，键盘事件
- 鼠标相关事件：onclick鼠标点击事件 onmouseover鼠标移入事件 onmouseout 鼠标移出事件 onmousedown鼠标按下事件 onmouseup鼠标抬起事件 onmousemove鼠标移动事件
- 键盘相关事件： onkeydown(键盘按下) onkeyup(键盘抬起)
- 状态改变事件：onload（页面加载完）onchange(值发生改变) onblur(失去焦点) onfocus(获取焦点) onsubmit(提交) onresize(窗口尺寸发生改变事件)
- 以下代码获取窗口的宽高：
document.body.parentElement.clientWidth document.body.parentElement.clientHeight
###事件绑定 1. 在元素中添加事件属性 在事件对于的函数中 this代表的是window对象 <input type="button" value="元素绑定事件" οnclick="fn1()"> 2. 通过js代码动态绑定事件 js代码和html代码分离 便于升级和维护，在事件对于的函数中 this代表的是事件源 mybtn.onclick = function(){ alert("动态绑定成功！"); } ###event对象 1. event对象中保存着和事件相关的信息 2. 通过event可以获得鼠标事件的坐标 event.clientX/Y 3. 通过event可以获得键盘事件的字符编码 event.keyCode 4. 通过event可以获得事件源 不同浏览器存在兼容性问题，支持两种写法： var obj = event.target; var obj = event.srcElement - 以下代码可以解决兼容性问题 var obj = event.target||event.srcElement;
####僵尸练习步骤： 1. 创建demo06，通过css给html添加背景图片，在页面加载完成的时候获取窗口的宽高，把宽高设置到背景图片上面 2. 在script标签中添加定时器t1每个100毫秒创建一个img添加到body中，通过img.src="a.jpg"形式给img设置显示图片，通过css样式选取所有的img，设置宽高，绝对定位 left的值为动态获取的屏幕的宽度，top的值为随机值（保证图片显示在屏幕范围内的随即值） 3. 在script标签中添加定时器t2每隔10毫秒执行一次，每次执行时获取页面中所有的img元素 然后for循环遍历每一个让每一个的left的值-=5 4. 在body里面通过html代码在左上角添加h3内容为成功次数：0 右上角添加h3内容为失败次数0，在script标签中声明两个全局的变量表示成功次数和失败次数(var success=0; var fail=0;) 5. 每次移动图片的时候判断图片的的位置是否移出窗口如果移出则删除图片并且让fail++ 显示到页面中 6. 在第二部创建img对象的时候给img动态绑定onmouseover事件，在事件中删除图片并且让seccess++ 显示到页面中 搞定！
1. 事件 - 鼠标事件： onclick onmouseover onmouseout onmousedown onmouseup onmousemove - 键盘事件： onkeydown onkeyup - 状态改变事件： onload onchange onfocus onblur onsubmit onresize 2. 事件绑定 - 元素属性中绑定 函数中的this代表的是window - js动态绑定 函数中的this代表的是事件源 3. 事件取消 - 通过给事件函数返回false return false；取消事件 4. event事件对象 - 通过event可以获得和事件相关信息； - 鼠标事件可以通过event.clientX/Y 得到鼠标的坐标 - 键盘事件可以通过event.keyCode得到键盘按键的字符编码 - 可以获得事件源 var obj = event.target||event.srcElement; 5. 事件传递（事件冒泡） - 如果在同一个区域内有多个事件响应，响应的顺序是类似气泡，从下往上，也就是从底层元素往上级元素执行，这个过程称为事件冒泡 - 如果某个元素里面有多个元素需要添加事件，则这个事件可以直接添加给此元素，通过事件源判断到底做什么事儿
###jQuery
- jQuery是一个js语言的框架，作用是简化js代码
###jQuery优势 - 简化js代码 - 可以像css一样通过选择器查找元素 - 可以直接修改元素的样式 - 解决兼容性问题
###如何引入jQuery - 因为此框架就是一个js文件 引入方式和一般js文件一样
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> ###$ - $等效jQuery $("#id") = jQuery("#id"); ###jq对象和js对象互相转换 $("#id") //jq对象 var btn = document.getElementById("id");//js对象 - 把js对象转成jq对象 var jq = $(js); - 把jq对象转成js对象 var js = jq[0] / jq.get(0);
###选择器 ####基本选择器 和css一样 1. 标签名选择 $("div") 2. id选择器 $("#id") 3. 类选择器 $(".class"） 4. 分组选择器 $("#id,.class,div") 5. 任意元素选择器 $("*") ####层级选择器 1. $("div span") 匹配div下所有的span子孙元素 2. $("div>span") 匹配div下的span子元素 3. $("div+span") 匹配div后面相邻的span兄弟元素 4. $("div~span") 匹配div后面所有的span兄弟元素 ####层级函数 1. 获取某个元素的所有兄弟元素 $("d1").siblings("div"); //参数可以不写，不写代表所有兄弟 2. 获取某个元素的哥哥元素 $("d1").prev("div")；//参数不写是获取相邻的上一个元素 写的话指定上一个的元素类型 3. 获取某个元素的哥哥们元素 $("d1").prevAll("div")； 4. 获取某个元素的弟弟元素 $("d1").next("div"); 5. 获取某个元素的弟弟们元素 $("d1").nextAll("div");
####过滤选择器 1. $("div:first") 匹配所有div中的第一个 2. $("div:last") 匹配所有div中的最后一个 3. $("div:even") 匹配所有div中的偶数位的元素 从0开始 4. $("div:odd") 匹配所有div中的奇数位的元素 从0开始 5. $("div:eq(n)") 匹配所有div中的第n个 从0开始 6. $("div:lt(n)") 匹配所有div中小于n的所有元素 从0开始 7. $("div:gt(n)") 匹配所有div中大于n的所有元素 从0开始 8. $("div:not(.one)") 匹配所有div中 class不等于one的所有div元素 ####内容选择器 1. $("div:has(p)") 匹配所有包含p标签的div 2. $("div:empty") 匹配所有空的div 3. $("div:parent") 匹配所有非空的div 4. $("div:contains('abc')") 匹配所有包含文本abc的div
####可见选择器 1. $("div:hidden") 匹配所有隐藏的div 2. $("div:visible") 匹配所有可见的div - 显示隐藏相关的函数 $("#abc").hide();//隐藏 $("#abc").show();//显示 $("#abc").toggle();// 如果当前隐藏则显示，如果显示则隐藏
####属性选择器 1. $("div[id]") 匹配有id属性的div 2. $("div[id='d1']") 匹配有id=d1属性的div 3. $("div[id!='d1']") 匹配有id不等于d1属性的div ####子元素选择器 1. $("div:nth-child(n)") n从1开始 匹配div中第n个子元素 2. $("div:first-child") 匹配div中第一个子元素 2. $("div:last-child") 匹配div中最后一个子元素 ####表单选择器 1. $(":input") 匹配所有 文本框 密码框 单选 复选 。。。 2. $(":password") 匹配所有密码框 3. $(":radio") 匹配所有单选 4. $(":checkbox")匹配所有复选框 5. $(":checked") 匹配所有 单选、复选、下拉选 6. $("input:checked") 匹配所有 单选、复选 7. $(":selected") 匹配所有被选中的下拉选
###文档操作 1. 创建元素 var div = $("<div>abc</div>"); 2. 添加元素 父元素.append(div); //添加到最后面 父元素.prepend(div);//添加到最前面 3. 插入元素 兄弟元素.after(div); //插入到兄弟元素的后面 兄弟元素.before(div); //插入到兄弟元素的前面 4. 删除元素 元素对象.remove();
####总结回顾 1. jq js的框架 简化代码 2. jq->js js = jq[0]/jq.get(0) 3. js->jq jq = $(js) 4. 选择器 - 基础选择器 标签名 #id .class , * - 过滤选择器 div:first div:last div:even div:odd div:eq(0) div:lt() div:gt() div:not(.class) - 层级选择器 div span div>span div+span div~span - 函数 siblings() prev() prevAll() next() nextAll() - 内容选择器 div:contains('aaa') div:empty div:parent div:has(span) - 可见选择器 div:hidden div:visible 函数 show() hide() toggle() - 属性选择器 div[id] div[id='a'] div[id!='a'] - 子元素选择器 div:nth-child(1) div:first-child div:last-child - 表单选择器 ：input :password :radio :checkbox :checked input:checked :selected
- 创建jq元素对象 var div = $("<div></div>"); - 添加 父元素.append(div) 父元素.prepend(div) - 插入 兄弟元素.before(div) 兄弟元素.after(div) - 删除 元素对象.remove()
###样式 元素对象.css("color","red"); 元素对象.css({"color":"red","width":"100px"});
对象.css("color");
###属性 对象.attr("id","a"); 对象.attr("id");//取值
###文本 对象.text("lala")； 对象.text(); ###html 对象.html("<h1>aaa</h1>"); 对象.html();
###jq事件相关 - jq中事件名称和js事件名称相比较 就是去掉on
- 页面加载完成事件：
$(function(){ }) $(document).ready(function(
){}) - 事件中获取事件源的方式： 1. 如果是动态绑定事件 this为事件源 2. 非动态绑定 var obj = event.target||evet.srcElement; 3. 非动态绑定时 在元素属性中通过this <input type="button" οnclick="myfn(this)"> - 事件模拟
setTimeout(function(){ //模拟点击事件 $("input").trigger("click"); },3000); - 事件合并
hover事件相当于 onmouseover+onmouseout
