Html 结构化
CSS 样式
JavaScript 行为交互
1、JavaScript基础
2、JavaScript操作BOM对象
3、JavaScript操作DOM对象*****
4、JavaScript的面向对象
------------------------------------------------------------------
jQuery（js）。css。js
jQuery选择器 *****
jQuery时间和动画
jQuery操作DOM对象 *****
表单验证
表单验证的框架 jquery validate
bootstrap 封装了Html css js
JavaScript基础（liveScript）
1、和java的关系，只是借势！
2、是一个脚本语言，以（.js）结尾
3、流浪器编译JavaScript，解析器我们称之为JavaScript引擎！
4、无需预编译 *****
js是一种弱语言类型 var a=10; var a="101"; var a=new Date();
5、运行在客户端 ***** 减轻服务器的压力
目的：
1、提升用户的体验
2、减轻服务器的压力、
组成部分：
1、ECMAScrip 规定了js的基本语法和基本对象
2、BOM（浏览器对象模型）提供了处理网页内容的方法和接口
3、DOM（文档对象模型）提供了与浏览器进行交互的方法和接口
我们一个页面中可以引入css文件还可以引入js文件？有没有顺序？
1、css写在head中
2、js文件的引入写在body的最下方
js的引入方式：
1、行内引入
2、内部引入
3、外部引人
js中的常用事件
1、不想让a超链接 立即跳转至指定的页面
2、想让用户点击的时候 做一些处理工作
javascript：伪协议
1、先去执行js代码
2、根据js代码做操作
alert（‘就是不跳转’） 后续会换成某个操作的函数（方法）
<a href ="javascript：alert（‘就是不跳转’）">跳转</a>
伪协议 javascript：
onclick 点击事件
onblur 失去焦点事件
onfocus 获取焦点事件
js数据类型
undefined：声明但是没赋予初始值！没有被定义的变量！
var name；
alert（name）；//什么都没有
alert（typeof （name））；//undefined
number：包含了整数和浮点数
typeof （20）
typeof（20.2）
string：被单引号和双引号括起来的内容都是字符串
typeof （20）
typeof（20.2）
boolean：true 和 false
alert（typeof（TRUE））；//把TRUE当成一个变量名
alert（typeof（true））； // √
alert（typeof（“true”））； //string
object：js中的对象，包含数组，null和对象！
null：控制，表示对象不存在，等于undefined！
typeof 检测变量的数据类型
1、typeof 空格变量名称
2、typeof（变量名称）*****
初识JavaScript
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>初识JS</title> | |
| <!-- | |
| JavaScript: | |
| 组成： | |
| 01.ECMAScript描述了js语言的语法和基本的对象！ | |
| 02.DOM（文档对象模型）描述了处理网页内容的方法和接口 | |
| 03.BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口 | |
| 特点： | |
| 01.无需预编译 弱语言类型 | |
| 02.运行在客户端 减轻服务器压力 | |
| 网页中引入css和js文件的顺序！ | |
| css引入在head标签中！ 目的就是在用户看到页面的时候有样式！ | |
| js引入在body标签中的对下面！目的是 在交互过程中，确保所有的内容加载完毕！ | |
| --> | |
| </head> | |
| <!--01.行内 onload="alert('大家辛苦了1！');alert('大家辛苦了2！');"--> | |
| <body> | |
| <!-- 02.内部--> | |
| <script type="text/javascript"> | |
| /* alert("大家辛苦了！");*/ | |
| </script> | |
| <!--03.外部样式引入--> | |
| <script type="text/javascript" src="js/alert.js"></script> | |
| </body> | |
| </html> |
基本事件
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>基本事件</title> | |
| </head> | |
| <body> | |
| <!-- | |
| javascript: 伪协议！ | |
| 当我们运行到javascript: 的时候，程序会先执行对应的js代码！之后再操作！ | |
| 无论是超链接还是提交按钮，都不会立即执行！ | |
| --> | |
| <a href="javascript:">跳转</a> <br/> | |
| <input type="button" value="普通按钮" onclick="javascript:alert('你说可以');"> <br/> | |
| <input type="text" placeholder="请输入用户名" on onblur="javascript:alert('失去焦点');"> | |
| <!-- | |
| onfocus="javascript:alert('获取焦点');" | |
| --> | |
| </body> | |
| </html> |
数据类型
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>数据类型</title> | |
| </head> | |
| <body> | |
| <!-- | |
| undefined :只声明了变量，但是没有赋予初始值，就是undefined | |
| //声明变量 | |
| var myName; | |
| alert("姓名是："+myName); //name什么都没有 | |
| alert("name的数据类型是："+(typeof(myName))); | |
| null：空值，不存在的对象 等于undefined | |
| alert(null==undefined); | |
| number：包含了整数和浮点数 | |
| alert("20的数据类型："+typeof(20)); | |
| alert("20.5的数据类型："+typeof(20.5)); | |
| boolean：true 和 false | |
| alert(typeof(TRUE)); // 把TRUE当成了一个变量 所以输出 undefined | |
| alert(typeof(true)); | |
| alert(typeof("true")); //string | |
| string ：被单引号或者双引号引起来的文本 | |
| alert(typeof('a')); | |
| alert(typeof("a")); | |
| object：js中的对象，包含数组，对象和null | |
| var arr1=new Array(1,2,3); | |
| var arr2=new Array("小黑","小白"); | |
| var arr3=[]; | |
| arr3[0]=1; | |
| arr3[1]=12.2; | |
| arr3[2]="小黑"; //可以存放不同的数据类型 | |
| alert("arr3的数据类型"+typeof(arr3)); | |
| alert("arr3的第3个元素"+arr3[2]); | |
| alert("null的数据类型"+typeof(null)); | |
| var date=new Date(); | |
| alert("date的数据类型"+typeof(date)); | |
| --> | |
| <script type="text/javascript"> | |
| </script> | |
| </body> | |
| </html> |
输入和确认
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>输入和确认</title> | |
| </head> | |
| <body> | |
| <!-- | |
| alert("大家 辛苦了"); // 是换行 | |
| alert：是一个提示框，具有确定按钮！ | |
| confirm：是一个提示框，具有确定和取消按钮！ | |
| prompt：是一个对话框，有两个参数 | |
| 01.第1个参数，是提示语 | |
| 02.第2个参数，是输入框的默认值 ， 可以省略此参数 | |
| --> | |
| <script type="text/javascript"> | |
| var flag= confirm("你想迎娶白富美吗？"); | |
| if(flag){ //用户点击的是确定 | |
| var answer= prompt("你月收入多少呀？","请输入收入"); //获取用户的输入 | |
| document.write("您的收入是："+answer); | |
| }else{ | |
| alert("你就一屌丝！") | |
| } | |
| </script> | |
| </body> | |
| </html> |
类型转换
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var num1="123.45a",num2="a123.45"; | |
| /* | |
| * parseInt()：前提字符串第一个位置必须是数字，直到遇到 . 或者 非数字时 返回 得到整数 | |
| * parseFloat():前提字符串第一个位置必须是数字 直到遇到 非数字时 返回 得到浮点数 | |
| */ | |
| document.write(parseInt(num1)+"<br/>"); | |
| document.write(parseInt(num2)+"<br/>"); //NaN 说明不是一个数字 | |
| document.write(parseFloat(num1)+"<br/>"); | |
| document.write("<hr/>"); | |
| /** | |
| * 强制类型转换 | |
| * Boolean():里面的参数 只要不是false,0,null,undefied,空,NaN,未定义的变量 之外 都会返回true | |
| * Number(): 是把整个字符串 作为 参数之后进行强制类型转换 ！ 要确保参数是 数值类型 或者boolean true=1 false=0; | |
| * String() | |
| */ | |
| document.write(Boolean(true)+"<br/>"); | |
| document.write(Number(num1)+"<br/>"); | |
| document.write(String(typeof (num1))+"<br/>"); | |
| alert(typeof 1); | |
| alert(typeof (1)); //推荐使用 | |
| </script> | |
| </body> | |
| </html> |
运算符
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>常用的运算符</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| /** | |
| * 常用的运算符 | |
| */ | |
| document.write("+运算："+(5+5)+"<br/>"); | |
| document.write("-运算："+(5-5)+"<br/>"); | |
| document.write("*运算："+(5*5)+"<br/>"); | |
| document.write("/运算："+(5/5)+"<br/>"); | |
| // % 取余 | |
| var num=3; | |
| /* | |
| ++在变量前 先自身加1 之后参与运算 | |
| ++在变量后 先参与运算 之后自身加1 | |
| */ | |
| document.write("%运算："+(5%3)+"<br/>"); | |
| document.write("++运算："+(num++)+"<br/>"); | |
| document.write("--运算："+(num--)+"<br/>"); | |
| document.write("--运算之后："+(num)+"<br/>"); | |
| </script> | |
| </body> | |
| </html> |
switch
| <!DOCTYPE html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>switch</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var num=window.prompt("请问：今天周几？"); //让用户输入整数 | |
| switch (parseInt(num)){ // 因为用户输入的是字符串 要么 case "1" 要么 parseInt(num) | |
| case 1: | |
| alert(1); | |
| break; | |
| alert(111); // 没有意义 但是不会报错 | |
| case 2: | |
| alert(2); | |
| break; | |
| case 3: | |
| alert(3); | |
| break; | |
| default : | |
| alert("default"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
7、break continue
| <!DOCTYPE html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>break,continue</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| for(var i=0;i<=5;i++){ //break | |
| if(i==5) break; | |
| document.write(i+"<br/>"); | |
| } | |
| document.write("<hr/>"); | |
| for(var i=0;i<=5;i++){ //continue | |
| if(i==3)continue; | |
| document.write(i+"<br/>"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
= =和 = = =
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>== 和 ===</title> | |
| </head> | |
| <body> | |
| <!-- | |
| == ：在比较的时候，会把相对来说复杂的类型转换成简单类型之后 比较两个变量的值 | |
| ===:先比较两个变量的数据类型，如果数据类型一致，再比较值！ | |
| --> | |
| <script type="text/javascript"> | |
| var num1=5; | |
| var num2="5"; | |
| document.write("num1==num2:::"+(num1==num2)+"<br/>"); | |
| document.write("num1===num2:::"+(num1===num2)); | |
| </script> | |
| </body> | |
| </html> |
函数
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>函数</title> | |
| </head> | |
| <body> | |
| <!-- 方法的调用--> | |
| <input type="button" value="hello" onclick="sayHello();"> <br/> | |
| <input type="button" value="bye" onclick="sayBye();"><br/> | |
| <input type="button" value="haha" onclick="haha();"><br/> | |
| <script type="text/javascript"> | |
| //01.定义一个函数 | |
| function sayHello(){ | |
| alert("大家好！"); | |
| } | |
| //02.定义一个函数 | |
| var sayBye=function(){ | |
| alert("拜拜大家！"); | |
| } | |
| function haha(){ | |
| sayHello(); | |
| sayBye(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
数组
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>数组</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var arr1=new Array(); //没有长度 | |
| var arr2=new Array(5); //只有一个参数 是长度 | |
| var arr3=new Array(1,2,3,4,5); // 定义数组的同时开辟空间并赋值 | |
| var arr4=[1]; | |
| document.write("arr1.length"+arr1.length+"<br/>"); | |
| document.write("arr2.length"+arr2.length+"<br/>"); | |
| document.write("arr3.length"+arr3.length+"<br/>"); | |
| document.write("arr4.length"+arr4.length+"<br/>"); | |
| document.write("arr4[0]"+arr4[0]+"<br/>"); | |
| document.write("arr4[1]"+arr4[1]+"<br/>"); | |
| //定义一个字符串 转换成数据 | |
| var str="haha,heihei,hehe,houhou"; | |
| var arr5= str.split(","); //返回一个数据 | |
| document.write(arr5.length+"<br/>"); | |
| //向数组中添加一个元素 | |
| arr5.push("heiheihahahehe"); | |
| document.write("arr5[4]"+arr5[4]+"<br/>"); | |
| //把数组中的每一个元素通过一个分隔符 连接在一起 形成新的字符串 | |
| str=arr5.join("+"); | |
| document.write(str); | |
| </script> | |
| </body> | |
| </html> |
for in
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>for in</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var arr=[1,2,3,4,5,6]; | |
| /* i 是下标 */ | |
| for(var i in arr){ | |
| document.write(arr[i]); | |
| } | |
| </script> | |
| </body> | |
| </html> |
捕获异常
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>捕获异常</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| /* | |
| * ex.name 错误名称 | |
| * ex.message 错误信息 | |
| */ | |
| try{ | |
| sasas | |
| }catch(ex){ | |
| alert(ex.name+":"+ex.message); | |
| } | |
| alert("大家辛苦了2"); | |
| </script> | |
| </body> | |
| </html> |
debug
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>debug</title> | |
| </head> | |
| <body> | |
| <!-- | |
| 网页中 F12 | |
| 如果网页有代码错误会在console台中显示错误信息 | |
| 之后选中错误出现的行！ | |
| 就到达 sources页面 | |
| 就可以打断点 （选择行号） | |
| NetWork 是我们所有访问的资源文件 | |
| --> | |
| <img src="images/a.jpg"> | |
| <script type="text/javascript"> | |
| document.write(1+"<br/>"); | |
| document.write(2+"<br/>"); | |
| document.write(3+"<br/>"); | |
| sasaasa | |
| document.write(4+"<br/>"); | |
| document.write(5+"<br/>"); | |
| document.write(6+"<br/>"); | |
| </script> | |
| </body> | |
| </html> |
待续