Html+Css+JavaScript快速入门

--------HTML基础--------

Hyper Text Markup Language：超文本标记语言.
什么是超文本：不仅仅是文本，还包括文本的样式(字体大小颜色等)，还包括多媒体(图片、音频、视频).
和xml的区别：XML标签可以任意定制，HTML标签固定就有那么多种.
学习HTML主要学习有哪些标签，标签有哪些属性，标签和标签间的嵌套关系.

html常用标签：文本标签：1：<h1></h1> ...<h6></h6>      内容标题标签2：<p></p>                      段落标签 3：<br>                        换行4: <hr>                         水平分割线列表标签：1.无序列表：<ul><li> </li></ul>2.有序列表：<ol type="A" start="5"  reversed="reversed"> <!- reversed 倒序-><li></li></ol>3.定义列表：<dl><dt></dt><dd></dd><dd></dd></dl><去掉列表前面的图标：list-style-type: none;>列表嵌套：有序列表与无序列表可以进行任意嵌套 N 层<-list-style-type: none;/* 去掉无序列表前图标 */-><- 去掉列表缩进效果：padding:0px;  (内边距)->分区标签：分区标签自身没有任何显示效果，可以理解成是一个容器，此容器用于装各种标签 ，通过 分区标签把页面划分成多个区域，便于对页面中的标签进行统一管理。div  ： 独占一行span :  共用一行案例：开发一个复杂的页面需要划分三大区：头部，体部，尾部    <body><div>头部</div><div>体部</div><div>尾部</div></body>在html5的标准中新增加了几个分区标签：<body><header>头部</header><article>体部</article>    <footer> 脚部</footer></body>元素标签分类：1：块级元素：独占一行例如;div h1-h6 hr p2：行内元素：共占一行例如:span ,加粗：<strong>与<b>，斜体：<em>与<i> 删除：<del>与<s>  下划线：<u> 、a、b、span、img、input、strong、select、label、em、button、textarea行内元素空格折叠现象：一行内连续出现多个空格时，只会显示一个空个；需要使用 &nbsp; 表示一个空格图片<img>标签：格式： <img src="xxx/image.png">src：用于设置图片的路径，可以设置为相对路径alt:当图片不能正常显示时，显示该内容.title:当鼠标在图片上悬停时显示的文本内容。width/heigth:设置图片的宽高，两种赋值方式：1、通过百分比 50% 按照父元素宽高的百分比进行赋值2.通过像素 以px为单位 ，如果只对宽度赋值则高度会自动根据图片的原始宽高比进行缩放支持的图片格式：1.jpg(jpeg) 2.png(支持透明色)  3.gif  图片地图<map>标签：   给图片的某个范围添加点击事件格式：<body><img src="./img/p.png"  title="静态图" heigth="50%"  usemap="mymap"><map name="mymap"><!-- 区域,shape:形状 rect （矩形） circle（圆形） coords(坐标)矩形需要赋值四个值:对角线两个点的坐标。       --><area shape="rect"  coords="0,0,700,400" href="http://www.baidu.com/"><area shape="circle" coords="300,300,100" href="Demo01.html"></map></body>href属性： 设置连接的地址，此地址可以指向页面(站内和站外) ，指向各种文件，如果该文件浏览器支持打开则直接浏览（如：图片，pdf），如果浏览器不支持打开此文件则下载
----------------------------------------------------------------------------
超链接<a>标签1:让文本或图片具备点击事件2:如果a标签没有href属性则和纯文本一样3:href属性的作用和图像地图中的作用一致，值为路径，可以指向页面也可以指向文件(如果浏览器支持浏览此文件则直接浏览，不支持则下载)4:target="_blank" 跳转的页面显示到一个新的窗口5:锚点的使用 href的值 #id #代表当前页面，id为页面中任何元素的id属性值<!-- 锚点的使用 1：先定位（下锚） 2：往锚的位置跳转--><a id="top"></a><!-- #top 跳转到当前页面中top所在位置 --><a href="#top">回到顶部</a>表格标签 <table>1: 相关标签：table(表格) tr（行） td（列）2: table属性：border(边框)  cellspacing(边框之间的间距)  cellpadding(边框和内容的距离）)3: td的属性： colspan(跨列) rowspan(跨行)4：caption属性：表格标题5：表格分组：<thead> <tbody> <tfoot>(在该标签下使用tr td) 用于把表格内的标签进行分组，好处：代码更直观，可读性高，便于对标签进行统一管理。6：<th> 表头的作用和td类似 但是会有字体加粗效果<form>表单：
- 表单是用于获取用户数据并且将数据发送给服务端的元素 action请求路径      method提交方式      Enctype:用于指定表单数据的编码类型。
- 文本框 <input type="text"><!-- 文本框 name:代表提交数据时的key value：代表文本框的初始值placeholder：占位文本maxlength:最大长度readonly:只读--><input type="text" name="username" value="xxx" placeholder="用户名" maxlength="5" readonly="readonly">  - 密码框 <input type="password"><input type="password" name="password" maxlength="5" placeholder="密码"> - 单选框 （label 实现点击文字也可以选中）<input type="radio" name="gender" value="nan" checked="checked" id="nan" ><label for="nan">男</label>
- 多选框 type="checkbox" 其它属性和单选框一致<input type="checkbox" name="w" value="java" >篮球 <!-- checked="checked" 默认选中 --><input type="checkbox" name="w" value="html">足球           <input type="checkbox" name="w" value="html">游戏          <input type="checkbox" name="w" value="html">女人
- 文件选择器 <input type="file" name="xxx">- 日期选择器 <input type="date" name="xxx">- 隐藏域    <input type="hidden">- 文本域     <textarea rows="5"  cols="5"> rows行 cols列- 下拉选所在地：<select name="city"> <option>请选择</option><option value="bj">北京</option><option value="sh" selected="selected">上海</option>   <- selected="selected" 下拉选项的默认选中-><option value="gz">广州</option></select>- 按钮：
1. 提交按钮     <input type="submit" value="注册">   <表单提交按钮>
2. 重置按钮     <input type="reset">                <重置表单内容>
3. 自定义按钮    <input type="button">          <自定义按钮>

--------CSS 基础--------

CSS :Cascading Style Sheet 层叠样式表，美化页面。使用css可以把样式代码和html分离1、内联样式：在标签内部添加style属性，值为样式代码，弊端是不能复用。<h1 style="background-color: red;border: 1px solid green;">我是一个h1</h1>  <solid 实线>2、内部样式：在head标签内部添加style标签，标签体内写样式代码。<style type="text/css">img{border: 5px solid blue;width: 100px;}</style> 3、外部样式：在单独的css文件中写样式代码，在head标签内部通过link标签引入，好处是可以多个页面复用<link rel="stylesheet" href="second.css">三中引入方式的优先级：内联样式 > 内部样式 = 外部样式内部样式 =外部样式 ：两者结果取决于后执行的为准。（后执行的覆盖先执行的）选择器：1、标签名选择器：格式：标签名{} 会把页面中所有的此类型的标签全部选中    div{}2、id选择器：格式： #id{} 把页面中此id 的元素选中  id="d2"   #d2{}3、类选择器格式：.class{}               class="c1"       .c1{}   4、属性选择器：格式：基础选择器[属性名='属性值']    input[type='password']{background-color: LightGreen ;}       后代选择器：格式： div p span{} 选取div里面p里面的所有后代span；作用范围越小，优先级越高子元素选择器：格式:    div>p>span{} 选取div里面的p里面的span子元素分组选择器：分组选择器把多个选择器通过逗号（，）分割合并成一个选择器，用来统一设定样式；格式：div,#id,.class{}任意元素选择器：选取页面中的所有元素格式：*{}伪类选择器：选择元素的状态元素有以下几中状态：- 元素有以下几种状态：1. 未访问状态 a:link{}       <color:red; 调整超链接状态颜色>  2. 点击状态 a:active{}3. 鼠标悬停状态 a:hover{}4. 访问过状态 a:visited{}
CSS中的的常用属性：颜色的赋值方式：1、通过颜色的单词赋值 red  green blue yellow pink 2、通过6位16进制赋值：三原色rgb(red  green  blue) 三原色取值范围0-255举例：红色 FF0000  蓝色  0000FF  黄色  FFFF00 3、通过3位16进制赋值  红色 #f004、通过3位10进制赋值  红色 rgb(255,0,0)5、通过4位10进制赋值  红色 rgba(255,0,0,0.1)
布局相关属性（盒子模型）：盒子模型包括：元素的宽高、外边距、内边距、边框宽高：width、height块级元素可以设置宽高,如果只设置宽度那么高度会自动识别为内容的高度，行内元素的宽高由内容确定。外边距：
- 指元素边框距离上级元素或相邻兄弟元素的距离
- 外边距的赋值方式：/* margin-top: 50px;margin-left: 80px;margin-bottom: 30px; *//* 上下左右外边距都为10px *//* margin: 10px; *//* 上下10px  左右20px *//* margin: 10px 20px; *//* 水平居中 *//* margin: 0 auto; *//* 上 右 下 左  顺时针 */margin: 10px 20px 30px 40px;
- 行内元素左右外边距生效，上下外边距不生效，行内相邻的两个元素同时存在右外边距和左外边距时 两值相加
- 块级元素全部生效，块级相邻的两个元素同时存在下外边距和上外边距时 两值取最大值
-<当元素的上边距与上级元素的上边距重叠时元素添加上外边距时会出现粘连问题，通过给上级元素添加 overflow:hidden解决>---------------------------------------------------------------------------- 如何计算一个元素所占的宽度：左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
布局相关属性（盒子模型）：盒子模型包括：元素的宽高、外边距、内边距、边框宽高：width、height块级元素可以设置宽高,如果只设置宽度那么高度会自动识别为内容的高度，行内元素的宽高由内容确定。外边距：margin
- 指元素边框距离上级元素或相邻兄弟元素的距离
- 外边距的赋值方式：/* margin-top: 50px;margin-left: 80px;margin-bottom: 30px; *//* 上下左右外边距都为10px *//* margin: 10px; *//* 上下10px  左右20px *//* margin: 10px 20px; *//* 水平居中 *//* margin: 0 auto; *//* 上 右 下 左  顺时针 */margin: 10px 20px 30px 40px;
- 行内元素左右外边距生效，上下外边距不生效， 行内相邻的两个元素同时存在右外边距和左外边距时 两值相加
- 块级相邻的两个元素同时存在下外边距和上外边距时 两值取最大值
-当元素的上边距与上级元素的上边距重叠时元素添加上外边距时会出现粘连问题，通过给上级元素添加 overflow:hidden解决。边框：borderborder-top/bottom/left/right: 1px solid red;
-块级元素边框全部生效，都会影响元素所占范围；行内元素边框全部生效，但是左右影响所占宽度，上下不影响所占高度，会占用其他元素范围。
-   <border-radius 控制元素的圆角，值越大越圆。>内边距：padding什么是内边距：元素边框距内容的距离称为内边距。如果移动元素内的文本内容使用内边距（内边距会改变元素的宽高），如果移动元素内的子元素，给子元素添加外边距移动，因为这样不会影响元素的宽高块级元素内边距全部生效，会影响元素所占宽度高度，行内元素内边距全部生效，会影响元素的宽度，不会影响高度；文本相关的属性：/* 文本水平对齐  left/right/center*/text-align: center;/* 文本修饰 上划线overline 下划线underline  删除线line-through  none(去掉元素自带修饰) 上划线overline*/text-decoration: line-through;/* 文本颜色 */color: green;/* 文本阴影 1.阴影颜色 2.x方向偏移值 3.y方向偏移值 4.模糊度 值越小越清晰*/text-shadow: blue -15px 15px 10px;/* 行高  用于让文本在元素中垂直居中，值为元素的高度*/<line-height: 100px;>字体相关属性：/* 字体大小 */font-size: 30px;/* 加粗  去掉加粗：normal*//* font-weight: bold; *//* 斜体 *//* font-style: italic; *//* 字体 */ font-family: "黑体";  /*  一行写法 */font: 30px "SimSun","宋体","Arial Narrow",HELVETICA;    溢出设置: overflow      (图片在范围内溢出)- 超出显示：overflow：visible- 超出隐藏：overflow：hidden     （解决粘连问题）- 超出滚动显示：overflow：scroll显示方式: display- block: 块级元素的默认值，独占一行，可以修改宽高- inline: 行内元素默认值，共占一行，不可以修改宽高- inline-block:行内块   共占一行 并且可以修改宽高----------------------------------------------------------------------------定位方式：-文档流定位：格式：position:static默认的定位方式，显示的元素从上到下，从左到右排列。通过外边距控制位置。-相对定位：格式：position:relative;元素不脱离文档流定位，通过top/left/right/bottom控制元素位置的偏移量，偏移值相对于元素的初始位置。@应用场景：当元素需要从当前位置做位置偏移时使用，但是元素仍然站着原来的位置。-绝对定位：格式：position: absolute;元素脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口（默认）或做了相对定位的祖先元素(非static的祖先元素).@应用场景：当元素需要做位置偏移，不需要保留原来位置时使用绝对定位。-固定定位：格式：position: fixed;脱离文档流，相对于窗口（固定在窗口上）；通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口。@应用场景，当某个元素需要固定在窗口的某个位置的时候使用固定定位-浮动定位：格式：float:left;  或者 right 脱离文档流，元素从当前所在行向左或者向右浮动，当撞到上级元素边缘或者同级其他浮动元素时停止。如果一行显示不下，会自动折行，如果折行时上面的一行有凸出的部分有可能会被卡住。如果元素浮动则会脱离文档流，后面的元素就会顶上来，可以通过给后面的元素添加"clear"属性让后面的元素左右两侧不允许有浮动，这样后面的元素就不会再顶上来。/* <clear: both;>元素的两侧不允许有浮动（清除浮动）  此时就不会往上顶了 clear:both;   clear:left; clear:right;   */<如果元素的所有子元素全部浮动的话元素自动识别的高度为0，通过overfllow:hidden;解决>@应用场景：当纵向排列的元素需要改成横向时 使用浮动定位行内元素对齐方式：/* vertical垂直 对齐方式 默认基线对齐baselinetop上对齐 bottom下对齐 middle中间对齐 *//* vertical-align: middle; *//* 如果有需求对页面中的某一个元素做位置偏移 需立即想到相对定位 */ /* position: relative;top: 10px; */CSS的三大特性：1.继承性(body设置通用属性)子元素可以继承祖先元素中的部分属性，只能继承color/font-开头/text-/line-/开头的属性。某些特定元素自带显示效果，不受继承影响。比如：超链接<a> <h1>到<h6>字体大小不受影响。2.层叠性通过不同的选择器可以选择到同一个元素，如果作用的样式或作用属性不同，则全部生效；如果设置的是相同的样式（属性）则根据优先级决定。3.优先级作用范围越小优先级越高。直接选中优先级高于简介选中优先级（继承）。id > class > 标签名 > 继承

--------JavaScript基础--------

JavaScript:用于给页面添加动态效果和动态内容。1、脚本语言不需要编译器，有浏览器解析执行。2、js可以嵌入到html文件中使用。3、js基于面向对象4、js语言安全性较高，js语言智能访问浏览器内部的数据。不允许访问磁盘当中的数据。1、在标签内部的事件中添加js代码<input type="button" onclick="alert('JavaScript第一种引入！')" value="点我试一试">
2、在head里面添加script标签，在标签内写js代码（可以写在HTML的任意位置，推荐卸载head里面）<head><meta charset="UTF-8"><title>JavaScript</title><script type="text/javascript">alert("第二种引入方式");  <!--网页加载时显示出来 --></script></head>
3、在单独的js文件中写js代码，通过script标签引入<-- 如果script标签引入了文件，则不能在标签体内继续写js代码 --><script type="text/javascript" src="firstScript.js">/*此处不能添加代码*/</script> 数据类型：1、数值类型    number        var x=10;2、字符串类型 String            var str="abc";3、布尔值类型 boolean        var  t=true;4、未定义类型 undefined      var  i;5、对象类型   object          var p=new Persion();6、null类型7、数组类型 js五种基本类型：String Boolean Number null undefined变量的声明与赋值：js语言属于弱类型语言例子： var i=10;    < 等效于 int 1=10;>x="abc"       <-- 声明后可以随意更改值--> x=true;数值类型：数值类型底层都是浮点型，在使用过程中会自动转换成对应的(实际使用)类型int x = 5;int y = 3;int z = x/y;   结果1- 在js中两数相除结果会自动转换正数或小数var x = 5;                var x=6;var y = 2;                var y = 2;var z = 5/2;            var z = x/y;z= 2.5                    z= 3;NaN ：Not a Number,不是一个数（数值），使用isNaN方法判断某个变量是否是数值类型。是数值返回false 字符串就会返回true字符类型：可以使用单引号或者双引号修饰字符串。var s="adc";var s='abc';布尔类型：var b=true;   var b=false;未定义类型：当只声明变量不赋值的时候，此时这个变量的类型就为undefined对象类型：        var p=new Persion();
----------------------------------------------------------------------------
数据类型的银隐式转换：在js中，数据类型会根据不同的场景自动转换类型。1、数值类型-转字符串 直接转  18->"18"   var x="abc"+18;       <输出 "abc18">-转布尔值  0和NaN ->转换成false   数值-> 转换成trueif(0){alert("aaa");}else{alert("bbb");}  if(NaN){alert("aaa");}else{alert("bbb");}   <打印bbb>2、字符串类型   -转数值 ：能转直接转（减法运算："20" 可以直接转成数值20），不能转就转换成NaN（减法运算："abc"转换成NaN）例："18"->18 "abc"->NaN "18abc"->NaN     var x = "20"-18;  <输出 2>加法运算：var x="abc"+18;   x="abc18"（字符串连接符）     var x="20"+5; <输出 x="205" > -转布尔值："" 空字符串转换成false, 非空字符串转换成true；3、布尔值类型   -转字符串：直接转  true->"true"  false->"false"-转数值：  true->1   false->0       4、undefined-转数值  NaN       例：var x=20+undefined       x="NaN"-转字符串  直接转成"undefined"  var x="abc"+undefined;      <输出  abcundefined>-转布尔值  flase    例：if(undefined){alert("aaa");}else{alert("bbb");}    <输出 bbb>5、null -转数值 0（直接转） 例：var x=20+null  <输出x=20>-转字符串 "null"    例：var x="20"+null  <输出 "20null">-转布尔值  false    例：if(null){alert("aaa");}else{alert("bbb");} <输出 bbb>
练习：<input type="button" value="66+6" onclick="alert('66'+6)"> <输出 number6><input type="button" value="66-6" onclick="alert('66'-6)">   <输出 60>运算符：+ - * / %  <  > >= <= == != -js中的运算符和java的运算符大体相同-==与===区别：== 在比较两端变量时会先统一类型再比较，===会先比较类型是否相等如果相等再继续比较值是否相等-typeof 获取变量的类型   var x=null; typeof x  <输出"object">typeof 66+6   <输出 "number6"  等效于 typeof "number"+6> typeof 66-6   <输出：NaN>-除法运算：会自动转换整数和小数    10/2=5   5/2=2.5语句：if  else while do{}while  for switch{}case-大体相同-if() while() 括号里面如果类型不是布尔类型会自动转换成布尔类型，转换规则参见上面的隐式转换-for() 循环里面int i 改成 var i ,不支持forEach 循环。js里面没有函数重载的概念，在其他语言中（如java）java中，可以存在同名函数，只要传入的参数数量或者类型不同即可。
在js中，定义了两个同名函数后，后面的函数会覆盖前面定义的函数。结合这道题来说，由于函数声明提升，所以函数声明会提前，由于存在同名函数，后面的add函数将覆盖第一个add函数，所以两次调用add()返回的值是相同的。也就是y,z都为4.JS函数/方法：-JavaScript方法声明：function run(参数列表){return xxx;}-四种常见方法：无参无返回值  无参有返回值  有参有返回值  有参无返回值   <方法调用: 方法名(参数列表) 有参数的需要接收><script type="text/javascript">/** 无参无返回值 */function run1(){document.write("<br>"+"无参无返回值");/* alert("无参无返回值"); */}//调用run1();/** 有参无返回值 */function run2(name,age){document.write("<br>"+"有参无返回值,参数为:"+name+"/"+age);/* alert("有参无返回值;"+"name="+name+"age="+age);  */}//调用run2("曹操",90);/** 有参有返回值 */function run3(x,y){return x+y;}var result=run3(2,3); /**返回值的接收*/document.write("<br>"+"有参有返回值"+result);/* alert(result); *//** 无参有返回值 */function run4(){return "无参有返回值";}/* alert(run4()); */var result=run4();document.write("<br>"+result);</script> -在onclick事件中一般写的都是方法的调用<input type="button"  value="调用方法" onclick="run()">-第二种方法声明方式：<等同于声明一个新的方法名称><script>/* 第二种方式声明方法 */var method=function(name,age){    alert("name"+name+"age"+age);}//调用方式method("张飞",45);   </script>-第三种方法声明方式<前面表示参数，后面表示方法体（执行语句）><script>var run=new Function("x","alert(x);"); </script>             和页面元素相关<获取页面元素对象的代码一定要在页面加载完成之后执行，不然会得到null>1. 通过id获取页面中的元素；如果找到该元素，则该方法将以对象的形式返回该元素(存在x中)。如果未找到该元素则x将包含 null。var x = document.getElementById("元素id");例：<html><head><meta charset="UTF-8"><title>取值赋值</title><script type="text/javascript">/* src="demo03.js" */function fn1(){/* 获取文本框 */var x=document.getElementById("myinput");   /* 设置文本值 */x.value="AAAAAAAAAAA";}function fn2(){var x=document.getElementById("myinput");/* 打印文本值 */alert(x.value);}</script></head><body><input type="text" id="myinput"><input type="button" value="赋值" onclick="fn1()"><input type="button" value="取值" onclick="fn2()"></body></html>
2. 获取和设置文本框的内容 x.value="abc";                    <设值>var y = x.value;             <获取值>var y = parseFloat(x.value;);   <将获取double数据转换成float类型>3. 给元素设置文本内容 和获取元素内的文本内容<赋值：h1.innerText="lalalla" 取值：h1.innerText  打印：alert(h1.innerText)>div.innerText="abc";   /** 等号左边为设值，等号右边为取值 */div.innerText;         //获取
4. 给元素添加子元素 div.innerHTML="<h1 id='h_1'>abc</h1>" <双引号里面需要使用双引号的话用单引号代替''> 如果是追加内容把 = 换成 +=
5、通过修改元素的class属性值id.className="xxx";<!document.getElementById("i2").style.color="red"; 直接修改元素的style属性值>
----------------------------------------------------------------------------
String相关内容1、创建字符串的两种方式var str = "abc";                   <支持单引号或者双引号>var str = new String("abc");2、把字符串转换成整数：parseInt()   把字符串转换成整数parseFloat() 把字符串转换成小数或者整数  例：parseFloat("18.5")  输出：18.5parseFloat("100px")        输出;100Number()   等效于parseFloat()       3、字符串转大小写<! 转成大写字母 >"bdjsdfsd".toUpperCase();            输出：<"BDJSDFSD"><! 转换成小写 >"GHKGJHKJ".toLocaleLowerCase();     输出：<"ghkgjhkj">4、获取字符串出现的位置，从0开始var str="sdfdgfdgdfg";str.indexOf("dg");         <3>    <!获取字符串首次出现的第一个字符下标><可以查找单个字符：str.indexOf("d");  >str.lastIndexOf("dg");        <6>    <!获取字符串最后一次出现的第一个字符下标>5、截取字符串<!- 从start下表开始，到end下标处结束，含头不含尾；如果不包含结尾下表则截取到字符串末尾 ->str.substring(start,[end]);      <[] 表示可有可无>str.substring(3);          输出："dgfdgdfg"  <从下标3处截取到最后>str.substring(3,5);           输出："dg"            <从3处截取到5处>str.substr(3);              6、替换字符串str.replace();var str="sdfdgfdgdfg"str.replace("dg","AB")     <输出 "sdfABfdgdfg">str                           <打印原来的字符串 "sdfdgfdgdfg">        <!再次输出str 并没有改变str原来的值，如果需要替换原来的值则改成：str = str.replace("dg","AB")>替换之后的值需要再次赋值。7、拆分字符串str.split(",") <!根据逗号将字符串拆分成多个字符串，返回一个拆分后的字符数组>数值相关四舍五入：18.34567.toFixed(3);   <保留三位小数，输出：18.346>数组相关1、创建数组<数组中可以保存任意类型的数组><!声明数组时没有[]>var arr1=["刘备",18,true]; <方法一>         var arr2=new Array();      <方法二>var arr3=str.split(" ");  <!根据空格拆分字符串str，由数据接收>2向数组中添加内容arr.push("张学友");       <!返回值为数值的长度>arr3.pop();       <!删除数组中的最后一个元素，返回被删除的元素内容> <?只能从最后一元素一次往前删?>3、修改数组的长度（java不能修改）var arr=["张三","李四","王五","刘备","关羽"]arr.length=3;         <!返回修改后数组的长度，数组长度改小之后多余的元素将被删除> <?可以将数组的长度增大，但是增加的元素类型为空?> 4、数组的遍历var arr=["张三","李四","王五","刘备","关羽"];for(var i=0;i<arr.length;i++){alert(arr[i]);    <!document.write(arr[i]);>}>5、数组反转 var arr=["a","b","c","d"]arr.reverse();                <!反转方法>["d", "c", "b", "a"]arr                            <原数组类容顺序被改变>["d", "c", "b", "a"]6、数组排序-默认的排序规则是以字符串的形式进行排序，排序规则是通过unicode字符集编码进行排序，比完第一位在比较第二位，以此类推。var arr=[1,23,4,57,89,34,90,34];arr.sort(sortNumber);   //sortNumber为自定义的排序规则例如：var num=[1,34,5,28,8,3,4,99,0,37];num.sort(sortName);function sortName(a,b) {return a-b;    //升序}document.write("<br/>数组排序:"+num.toString());-自定义排序<!为什么要使用自定义排序方法：如果数组保存的是对象类型，使用此方法可以根据对象中的任意属性进行排序(a.age)><Person:age salary genderarr=[p1,p2,p3,p4]function sortfn(a,b){//return a.age - b.age;    //升序return b.age - a.age;  //降序}><script type="text/javascript">var arr=[2,56,34,89,7,9,12,43];                //声明一个自定义排序方法function sortfn(a,b){//return a-b; //升序return b-a;  //降序}<?如果方法作为参数传递时就不需要写括号，方法调用时才需要写括号 ?>arr.sort(sortfn);/给排序方法传递一个匿名函数*/ arr.sort(function(a,b){return a-b;});   <! 第二种传递匿名函数(第三种方法创建)>arr.sort(new Function("a","b","return a-b;"));    <? .前面为参数,后面是方法体（可执行语句）?>alert(arr);</script>日期相关内容：-服务器时间与客户端时间1、获取当前时间（客户端时间）var date=new Date(); <!创建时间对象>alert(date);         <打印时间>2、把服务器端请求到的时间字符串转换成客户端时间表现形式var date=new Date("2018/11/07 14:33:22");3、从时间对象中获取和设置时间（距离1970年1月1日 00:00:00）var date=new Date();date.getTime();      获取毫秒数date.setTime(1000);     <结果：Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)>4、从时间对象中获取时间分量（单独的年月日时分秒 星期几）var da=new Date();da.getFullYear();  <! 年>da.getMonth();       <! 月 从0开始计算>da.getDate();     <! 日>da.getDay();     <! 星期几>da.getHours();     <! 时>da.getMinutes(); <! 分>da.getSeconds(); <! 秒>da.getMilliseconds();5、获取年月日和获取时分秒（字符串）da.toLocaleDateString();    <!"2018/11/7" >         da.toLocaleTimeString();    <!"下午3:13:34">      da.toLocaleString();        <!"2018/11/7 下午3:13:34">正则表达式：.  :匹配任意单个字符，除了换行\w  :匹配任意数字、字母、下划线\d  :匹配任意数字\s    :匹配任意空白^   :开头$   :结尾1、创建正则表达式的两种方式 ：第一种创建正则表达式的方式 <script type="text/javascript">var reg1 = /^a/i;            /* 创建一个以a开头的正则表达式;i代表忽略大小写 */var reg2 = /m$/i;         /* 创建一个以m结尾的正则表达式，i代表忽略大小写 */var reg3 = /\d{2}/;            /* 创建一个包含两位数的正则表达式 */var reg4 = /^\d{3}/;      /* 创建一个以三位数字开头的正则 */var reg5 = /^y\d{5}m$/;        /* 创建一个以y开头以m结尾中间有5位数字的正则 */var reg6 = /^\d{3,5}$/;        /* 创建一个由3-5位数字组成的正则 */var reg7 = /^\w{6,10}$/; /* 创建一个由6-10位数字字母下划线组成的正则表达式*/</script>第二种创建正则表达式的方式new RegExp("规则","[模式]")  <模式可以省略,如若出现\ 则需要使用转义 \\><script type="text/javascript">/* 创建一个有6-10位数字字母下划线组成的正则表达式*/var reg8 = new RegExp("^\\w{6,10}$");</script>2、和正则相关的方法（1）查找内容，exec()方法检索字符串中的指定值。返回值是被找到的值，如果没有发现匹配的内容，则返回 null。<script type="text/javascript">var str="you can you up no can no b b";    var reg = /no/g;   //g代表全局找no//execute执行document.write(reg.exec(str)); //找到第一个nodocument.write(reg.exec(str)); //找到第二个nodocument.write(reg.exec(str)); //null 代表没有了 </script>（2）校验文本，test()方法检索字符串中的指定值是否存在或者满足正则表达式，返回值是 true 或 false。<script type="text/javascript">var str="you can you up no can no b b";    var regt = /^you/;if(regt.test(str)){document.write("格式正确！");}else{document.write("格式错误！");}</script>3、字符串和正则相关的方法（1）查找内容 match("正则")<script type="text/javascript">var str="you can you up no can no b b";    var reg = /no/g;           /*g代表全局找no*/var arr=str.match(reg);    < 一次性找到所有满足条件的内容，返回一个数组></script>        （2）查找替换相关内容<script type="text/javascript">var str="you can you up no can no b b"; var reg = /no/g;           /*g代表全局找no*/str.replace(reg,"yes");       <查找到所有正则匹配的内容并替换></script>
----------------------------------------------------------------------------
异常的抛出与捕获：<!DOCTYPE html><html><head><script>function myFunction() {try {var x = document.getElementById("demo").value;if (x == "")throw "empty";            <抛出异常信息>if (isNaN(x))throw "not a number";if (x > 10)throw "too high";if (x < 5)throw "too low";} catch (err) {                   <捕获异常并处理>var y = document.getElementById("mess");y.innerHTML = "Error: " + err + ".";}}</script></head> <body><h1>My First JavaScript</h1><p>Please input a number between 5 and 10:</p><input id="demo" type="text"><button type="button" onclick="myFunction()">Test Input</button><p id="mess"></p></body></html>
----------------------------------------------------------------------------
事件取消：终止当前的事件：在事件调用的地方添加 <return false;> 语句   <a href="http://www.baidu.com"  onclick="return false;" target="_blank">取消点击事件</a>onsubmit="return false;"自定义对象：1、第一种方式：<声明函数/方法的形式创建对象><script><?第一种写法?>function Person(name,age){//声明属性并且给属性赋值this.name=name;this.age=age;//声明方法this.run = function(){alert("name:"+this.name+" age:"+this.age);}}//创建对象var p = new Person("李白",28);p.run();<?第二种写法?>function SuperMan(){}//创建一个无属性无方法的对象 var sMan = new SuperMan();//添加属性并赋值sMan.name="克拉克";sMan.age="1000";sMan.gender="其它";//添加方法sMan.fly = function(){alert("我叫"+this.name+"我在飞");}//调用方法sMan.fly();</script>2、第二种方式   <声明变量的形式创建对象><script type="text/javascript">/* 第二种创建对象的方式 */var p = {"name":"曹操",           <注意用逗号隔开属性>"age":"18","run":function(){document.write("我是飞行员！"+this.name); /* 调用属性的方法 */}}p.run();</script> DHTML简介：Dynamic（动态）HTML并不是一门新的技术，是把html+css+js一起做出的页面称为DHTMLDHTML包括：   BOM DOMBOM：Browser 浏览器 Object对象 Model模型；里面包含和浏览器相关的内容。DOM：Document 文档 Object 对象    Model 模型；里面包含了所偶遇和页面元素相关的内容。BOM浏览器对象模型：windowwindow中所有的属性称为全局属性，所有方法称为全局方法，调用时可以省略windowwindow.parseInt();window.isNaN();window里面包含以下对象：location:位置  可以得到浏览器当前的访问地址，也可以修改location.href                            <获取浏览器当前页面的访问地址>location.href="http://doc.tedu.cn/"        <修改当前浏览器页面访问地址>history:历史 当前窗口浏览的历史（仅仅针对于当前窗口）history.length        当前窗口的历史也页面数量history.back();     返回上一个页面history.forward();   前进到下一个页面history.go(num);    前往第几个页面，正值是前进，负值是后退，0表示刷新<! history.go(0);  当前页面（刷新）history.go(-1);   后退一个页面history.go(-2);   后退两个页面history.go(1);    前进一个页面>screen:屏幕Screen {availWidth: 1440, availHeight: 860, width: 1440, height: 900, colorDepth: 24…}screen.width           <1440>            获取屏幕宽高（分辨率）           screen.height           <900>                 screen.availWidth       <1440>            获取屏幕可用宽高（减去了开始菜单栏的高度）     screen.availHeight      <860>                 navigator:导航/帮助navigator.userAgent          得到浏览器的版本信息<?"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36"?><script>Javascript:网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： document.body.scrollTop网页被卷去的左： document.body.scrollLeft网页正文部分上： window.screenTop网页正文部分左： window.screenLeft屏幕分辨率的高： window.screen.height屏幕分辨率的宽： window.screen.width屏幕可用工作区高度： window.screen.availHeight屏幕可用工作区宽度： window.screen.availWidthJQuery:$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin})
</script>
和window相关的事件窗口点击事件：<!window. 可以省略><script type="text/javascript">window.onclick = function(){alert("窗口被点击了");}         </script><获取页面元素对象的代码一定要在页面元素加载完成之后执行，不然会得到null>页面加载完成事件 <等待页面元素加载完之后在执行onload方法的任务><script>onload = function(){                    i1.value="AAAAAAAAAAAAA";        <页面加载完事后在input文本框内写入值>}       </script>页面获取焦点事件<?会执行多次，每次页面激活时执行（鼠标在页面内）?><script>/* 获取焦点 */onfocus = function(){console.log("获取焦点！")}</script>页面失去焦点事件<?会执行多次，每次页面失去激活状态时执行（鼠标不在页面内）?><script>/* 失去焦点 */onblur = function(){console.log("失去焦点！");  //端口输出F12}</script>eval();函数使用eval("2+3*8"); <直接计算出结果><?计算器小练习demo06.html?>弹出框提示框：alert("内容");确认框：confirm("你确认是美女");         <点击确认按钮：返回true>                    confirm("你确认是美女");            <点击取消按钮：返回false><a href="http://www.tmooc.cn/" onclick="return confirm('确定离开此网页吗？');">点击测试</a>弹出文本框：prompt("请输入内容：");<html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function run(){var name = prompt("请输入你想吃的菜名：");   <参数为提示信息;返回用户输入的值>myul.innerHTML += "<li>"+ name+ "</li>"; }</script></head><body><input type="button" value="点餐" onclick="run()"><ul id="myul"></ul></body></html>通过js对元素添加样式(直接使用id.)id.style.样式名 = "值";         <原来的-命名方式变成了驼峰命名>myul.style.color="red"        myul.style.marginLeft="30px"document.getElementById("div1").style.backgroundColor="green";定时器(一直执行)setInterval(方法,时间间隔);<script>setInterval("document.write('AAA')",1000);/*  开启定时器第一个数为方法*/setInterval(function(){document.write("AAAAA");},1000);</script>创建元素的方式语法：var img = document.createElement("img");  <"img" 标签名><script type="text/javascript">setInterval(addfn,1000); //每个一秒添加一张图片function addfn(){/* 得到1000以内的随机数 */var x=Math.floor(Math.random()*1000);var y=Math.floor(Math.random()*1000);/* 创建一个元素 */var img = document.createElement("img");//设置图片img.src = "dinner_6.png";/* 修改图片的定位方式为绝对定位 */img.style.position = "absolute";/* 修改图片距离左上角的距离 */img.style.left = x+"px";img.style.top = y +"px";//往页面中添加元素对象document.body.appendChild(img);}</script>往页面body中添加元素document.body.appendChild(img);获取随机数Math.random()  0-1随机数   <返回 0 ~ 1 之间的随机数。>Math.floor()   向下取整     <对数进行下舍入><!取3-5之间的数    (左右同时减去3 - 0-2. 0-2不包含2，所以需要+1，就乘3)Math.floor(((Math.random())*3)+3)    取4-9之间的数Math.floor(((Math.random())*6)+4)><script type="text/javascript">setInterval(addfn,100);function addfn(){/* 得到1000以内的随机数 */var x=Math.floor(Math.random()*1000);var y=Math.floor(Math.random()*1000);/* 创建一个元素 */var img = document.createElement("img");//设置图片img.src = "dinner_6.png";/* 修改图片的定位方式为绝对定位 */img.style.position = "absolute";/* 修改图片距离左上角的距离 */img.style.left = x+"px";img.style.top = y +"px";//往页面中添加元素对象document.body.appendChild(img);}</script>
----------------------------------------------------------------------------
停止定时器var timeId = setInterval(方法名，时间间隔);clearInterval(timeId);setTimeout(方法名，时间间隔);  <只执行一次>   <!在指定的时间调用方法一次>setTimeout(function(){alert("setTimeout只执行一次！")},1000);实现图片的简单切换<html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">var x=0;/* 开启没两秒执行一次的定时器 */setInterval(function(){x++;var visibleIndex = x%5;      <0,1,2,3,4>//console.log(visibleIndex);/* 通过标签名取页面所有img元素 */var imgs = document.getElementsByTagName("img");/* 遍历每一张图片 */for(var i=0; i< imgs.length;i++){var img = imgs[i];/* 判断该图片显示还是隐藏 */if(i == visibleIndex){//显示img.style.display = "block";}else{//隐藏img.style.display = "none";}}  },1000);                            </script><style type="text/css">img{width: 500px;height: 350px;}div{margin:0px auto;border:1px solid green;width: 500px;height: 350px;overflow: hidden;}</style></head><body><div><img alt="无法加载" src="../imgs/a.jpg"><img alt="无法加载" src="../imgs/1.jpg"><img alt="无法加载" src="../imgs/j.jpg"><img alt="无法加载" src="../imgs/k.jpg"><img alt="无法加载" src="../imgs/o.jpg"></div></body></html>实现图片的动态切换：1、多张图片一次向左定时移动2、移出div的图片放置原来最后一张图片的位置，实现多张图片循环移动3、鼠标进入图片移动暂停4、鼠标移除图片移动开始<定时器启动>5、页面失去焦点时停止移动6、页面获取焦点时重新开始<html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">/* 加载完成事件  */onload = function(){var imgs = document.getElementsByTagName("img");/* alert(imgs.length) */;/* 遍历图片 */for(var i=0;i<imgs.length;i++){var img = imgs[i];/* 修改图片的位置 */img.style.top = "0px";img.style.left = i*400 +"px";}}/* 开启定时器每隔一段时间移动一张图片 */var timeId = setInterval(movefn, 3000);/* 移动一张图片的方法 */function movefn(){/* 开启移动图片的定时器 */var moveId = setInterval(function(){/* 得到素有图片并且遍历每一个图片 */var imgs = document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++){var img = imgs[i];/* 先得到图片原来的位置 *///parseFloat("100px")      输出;100var oldLeft = parseFloat(img.style.left);/* 移动位置 */oldLeft -= 2;/* 第一张图片全部移除之后放回第三张图片的位置上 */if(oldLeft <= -400){oldLeft = 800;//让定时器停止clearInterval(moveId);}/* 赋值回去 */img.style.left = oldLeft + "px";}               },10);              }//定时器停止function stop(){/*  鼠标移进图片定时器暂停 */clearInterval(timeId);}//重新开始定时器function start(){/* 每次开启新的定时器时，把上一个定时器关闭，避免出现连续开启多个定时器 */clearInterval(timeId);/* 鼠标移除图片重新开始定时器 */timeId = setInterval(movefn,3000);   /* 有两秒时间在做其他事情 */}/* 页面失去焦点停止 */onblur = function(){stop();}/* 页面获取焦点时开始 */onfocus = function(){start();}</script><style type="text/css">img{width: 400px;height: 250px;position: absolute;}div{position:relative;margin:0px auto;border:2px solid green;width: 400px;height: 250px;overflow: hidden; /* 超出边框隐藏 */}</style></head><body><div onmouseover="stop()" onmouseout="start()"><img alt="无法加载" src="../imgs/a.jpg"><img alt="无法加载" src="../imgs/1.jpg"><img alt="无法加载" src="../imgs/j.jpg"></div>  </body></html>DOM文档对象模型学习DOM主要用于对页面中的元素进行增删改查操作。
查找元素:1、通过id查找var x = document.getElementById("id");2、通过标签名查找var imgs = document.getElementsByTagName("img");3、通过class查找元素var arr=document.getElementsByClassName("c1")<返回一个标签数组>[div.c1, span.c1, h3.c1]4、通过name属性值查找元素<表单里面的name>var arr=document.getElementsByName("gender");5、创建元素var div = document.createElement("div");添加元素到最后     document.body.appendChild(div);<?var div = document.createElement("div");div.innerText="添加元素到最后"document.body.appendChild(div);< 在body所有元素之后添加该元素--><div>添加元素到最后</div>?>插入子元素var li = document.createElement("li"); <创建一个标签>myul.appendChild(li);                 <将标签插入该id元素下面，添加位置在id元素的子元素的末尾>插入元素    父元素.insertBefore(新元素，兄弟元素);  <插入到兄弟元素的前面>删除元素  父元素.removeChild(被删除的元素对象)    <指定id元素被删除,已经存在的元素，非动态添加><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function myfn(x){if(x==1){//添加var li = document.createElement("li");//设置显示的文本li.innerText=i1.value;//添加到ul里面myul.appendChild(li);   <ul下面末尾添加子元素li>}else if(x==2){// 插入var li = document.createElement("li");//设置显示的文本li.innerText=i1.value;//插入元素myul.insertBefore(li,sh);}else{//删除myul.removeChild(sh);}                         }</script></head><body><input type="text" id="i1"><input type="button" value="添加" onclick="myfn(1)"><input type="button" value="插入" onclick="myfn(2)"><input type="button" value="删除" onclick="myfn(3)"><hr><ul id="myul"><li>北京</li><li id="sh">上海</li><li>广州</li></ul></body></html>   <或者使用switch，删除sh对应的元素之后就不能再在sh前面添加元素了><script type="text/javascript">function myfn(x){switch(x){case 1:  var li = document.createElement("li");li.innerText=i1.value;myul.appendChild(li);     break;case 2: var li = document.createElement("li");li.innerText = i1.value;myul.insertBefore(li,sh);break;case 3:     myul.removeChild(sh);break;         }}</script>
----------------------------------------------------------------------------
JavaScript中的事件处理
事件包括：鼠标事件、键盘事件、状态改变事件1、鼠标事件：点击事件：onclick   鼠标移入：onmouseover   鼠标移出：onmouseout   鼠标按下：onmousedown鼠标松开：onmouseup 鼠标移动：onmousemove
案例：          <html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function downfn(){console.log("按下");}function upfn(){console.log("松开");  }function movefn(){console.log("鼠标正在移动！");//event事件,获取鼠标的位置，相对窗口var x= event.clientX;var y= event.clientY;console.log("x="+x+" y="+y);var img = document.createElement("img");    <创建子元素>img.src = "Sheep.ico";                  img.style.position = "absolute";         <修改定位位置>img.style.left = x+"px";img.style.top = y +"px";img.style.width = 40 +"px";img.style.height = 40 +"px";d1.appendChild(img);                       <在d1元素下添加img子元素>}function overfn(){console.log("鼠标移入！");}function outfn(){console.log("鼠标移出！");}</script><style type="text/css">div{width: 500px;height: 500px;background-color: #C0C0C0;border: 5px solid #9ACD32;margin: 0px auto;}</style></head><body><div onmousedown="downfn()" onmouseup="upfn()" onmousemove="movefn()" id="d1">div1</div><div  onmouseover="overfn()" onmouseout="outfn()">div2</div></body></html>2、键盘事件键盘按下：onkeydown  键盘松开：onkeyup <html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function downfn(){/* 获得按下键的编码 */var code = event.keyCode;console.log("键盘按下键的编码："+code);/* 通过编码转成字符 */var str = String.fromCharCode(code);console.log("键盘按下键的字符："+str);/* 回车激活按钮（回车登录） */if(code == 13){btn.click();}}function upfn(){console.log("键盘按下键的编码："+event.keyCode);}</script></head><body><input type="text" onkeydown="downfn()" onkeyup="upfn()"></body></html>                  3、状态改变事件onchange(value值改变事件)    onload(页面加载完成事件) onfocus（获取焦点事件）      onblur(失去焦点事件)onsubmit（表单提交事件）        onresize(窗口尺寸改变事件)          <script>onresize = function(){changeSize();              }function changeSize(){/* 得到窗口宽高 */var width = document.body.parentElement.clientWidth;var height = document.body.parentElement.clientHeight;document.body.style.backgroundSize = width + "px "+ height +"px";                }</script>事件的绑定1. 在元素内添加事件  方法中的this代表的是window对象<input id="btn" type="button" value="点我试试" onclick="alert('试试就试试')"> 2. 通过js代码添加事件（动态绑定）   动态绑定时方法中的this代表事件源<给按钮动态绑定点击事件 >btn2.onclick = function(this){/* this*/alert("动态绑定成功！");confirm("动态绑定成功！");}<html><head><meta charset="UTF-8"><title>动态绑定</title><script type="text/javascript">onload = function(){/* 给按钮动态绑定点击事件 */btn2.onclick = function(){alert("动态绑定成功！");}}< 在非动态绑定的事件方法中有两种方式得到事件源 1、在标签内把时事件源传递到方法中 onclick = "myfn(this)"2、通过event对象获取事件源 event.target（target目标）event.target.nodeName 获取标签名>function myfn(){//alert(event.target.nodeName);/* 获取事件源存在兼容性问题 *//* alert(event.srcElement.nodeName); *//* 通过以下写法解决兼容性问题,任意一个成功即可*/var obj = event.target || event.srcElement;alert(obj);}</script></head><body><input type="button" value="点我试试！" onclick="alert('试试就试试！')" id="btn">           <input type="button" value="你再点试试" id="btn2"><input type="button" value="获取事件源" onclick="myfn()"></body></html>事件的取消在事件中执行 return false;则可以取消掉当前事件Event事件对象1、event对象中保存着和事件相关的信息2、在鼠标事件中通过event可以得到鼠标的坐标  event.clientX/Y3、在键盘事件中通过event可以得到键盘每个键的编码 event.keyCode4、在事件中可以通过event对象得到事件源<script>function run(){/获取事件源alert(event.target.nodeName);/获取事件源 存在兼容性问题alert(event.srcElement.nodeName);/通过以下写法解决兼容性问题 以下写法只要有一个成功即可var obj = event.target||event.srcElement;alert(obj);}</script>事件冒泡(事件传递)如果一个区域内有多个元素的事件响应，则响应顺序是从最底层下的元素往上级元素传递，这个传递过程类似从下到上，所以称为事件冒泡。<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">div,p{border: 2px solid red;}</style></head><body><div onclick="alert('div事件')"><p onclick="alert('p事件')"><input type="button" value = "按钮" onclick="alert('按钮事件')"></p></div></body></html>1、应用场景：如果页面中的多个元素需要添加事件，只需要在多个元素共同的祖先元素上添加事件，则多个元素都具备点击事件，通过event获取事件源来区分到底点的是哪一个.<html><script>function myfn(){var obj = event.target||event.srcElement;if(obj.nodeName=="DIV"){alert("点击了div")}else if(obj.nodeName=="P"){alert("点击了P");}else{alert("点击了按钮");}}</script></head><body><div onclick="myfn()"><p><input type="button" value="按钮"> </p></div></html>

--------jQuery框架--------

jQuery框架简称：jq 是一个js代码的框架。用于简化JavaScript代码，可以让程序员写的更少，做的更多，此框架本身局势通过js语言写的。jQuery优势1、简化js代码2、可以向css一样获取元素3、可以直接修改元素的样式4、解决部分兼容性问题jQuery引入方式jQ本身即是一个js文件，<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>1、jq页面加载完成事件方法一 (复杂写法)<script type="text/javascript">$(document).ready(function(){document.write("Hello JQ");}) </script>
2、jq页面加载完成事件方法二 (简单写法)<script type="text/javascript">$(function(){document.write("Hello JQ");})</script>获取按钮并绑定动态绑定事件<一般情况将操作方法写在页面加载事件里面><script>$(function(){document.write("Hello JQ");//jq动态绑定事件,btn为button的id$("#btn").click(function(){alert("jq动态绑定成功！");})})</script>选择器基本选择器：1、标签名选择器       选取所有的div            $("div")2、id选择器           选取id为abc的元素         $("#abc")3、类选择器           选取class为c1的元素       $(".c1")      4、分组选择器     选取 h1,p,div             $("h1,p,div")5、所有元素选择器    选取所有元素          $("*")<?练习：1_base_selector.html?>层级选择器1、$("div span") <获取div下面的所有sapn  子孙后代选择器>2、$("div>sapn") <获取div的span子元素    子元素选择器>3、$("div+span") <获取div后面紧邻的span兄弟元素><?等于$("#div").next("span")?>4、$("div~span") <获取div后面所有的span兄弟元素><?等于$("#div").nextAll("span")?>层级函数1、获取元素的所有兄弟元素$("#one").siblings("div")    <"div"参数可有可无><?获取id为one元素的所有div兄弟元素:除了自己?>2、获取元素的哥哥元素$("#one").prev("span")       <"span"参数可有可无><?获取id为one元素的上一个兄弟元素?>3、获取元素的哥哥们元素              $("#one").prevAll("div")    <"div"参数可有可无><?获取id为one元素的所有同级哥哥元素?>4、获取元素的弟弟元素$("#one").next()         <()里面参数可有可无><?获取id为one元素的下一个兄弟元素?>5、获取元素的弟弟们元素$("#one").nextAll()         <()里面参数可有可无><?获取id为one元素后面的所有同级兄弟元素?>介绍$符号 $是 jQuery的缩写 $("#one") 等效于  jQuery("#one")过滤选择器1、$("div:first")            <匹配所有div中的第一个元素>2、$("div:last")             <匹配所有div中的最后一个元素>3、$("div:even")            <匹配所有div中下标为偶数的div>4、$("div:odd")               <匹配所有div中下标为奇数的div> 5、$("div:lt(n)")            <匹配div下标小于n的div>6、$("div:gt(n)")            <匹配div下标大于n的div>7、$("div:eq(n)")            <匹配div下标等于n的div>8、$("div:not(.one)")        <匹配所有div中 class值不为one的元素(或者id值)>内容选择器1、$("div:has(p)")          <匹配含有p标签的所有div>2、$("div:empty")         <匹配所有空的div>3、$("div:parent")            <匹配所有非空的div>4、$("div:contains('abc')")    <匹配所有div中包含abc文本的元素>可见选择器1、$("div:hidden")          <匹配所有隐藏的div元素>2、$("div:visible")            <匹配所有可见的div元素>jQ中和显示隐藏相关的函数1、让元素隐藏$("#id").hide();2、让元素显示$("#id").show();3、让元素隐藏显示切换$("#id").toggle();      <显示的变隐藏，隐藏的变显示>属性选择器1、$("div[id]")               <匹配所有有id属性的div>2、$("div[id='xxx']")      <匹配所有id属性值为xxx的div>3、$("div[id !='xxx']")        <匹配所有id属性值不等于xxx的div>子元素选择器1、$("div:nth-child(n)")  <匹配所有div中是子元素并且是第n个元素>2、$("div:first-child")        <匹配所有div中是子元素并且是第一个子元素>3、$("div:last-child")        <匹配所有div中是子元素并且是最后一个的子元素>表单选择器1、$(":input")             <匹配所有input包括（文本框、密码框、按钮、单选、复选...）>2、$(":password")            <匹配所有密码框>3、$(":radio")              <匹配所有单选>4、$(":checkbox")            <匹配所有多选>5、$(":checked")         <匹配所有被选中的单选、多选、下拉选>6、$("input:checked")     <匹配所有被选中的单选、多选>7、$(":selected")         <匹配所有被选中的下拉选><? 通过jq选择器选择到的内容返回一个数组 ?><?alert($(":radio").length)?><script>//弹出所有 :checked 元素的value值" id="b4"$("#b4").click(function(){/* each方法是用来遍历选择器选择的所有元素 */$(":checked").each(function(){/* this代表当前遍历的元素 */alert(this.value)})})</script>
以每一个匹配的元素作为上下文来执行一个函数js 对象与 jQ对象1、js转jq<script>//得到js对象var input = document.getElementById("i1");//把js转成jq对象// var jq = $(input);// alert(jq.val());alert($(input).val());</script>2、jq转js<script>//得到jq对象var jq = $("#i1");//把jq转成js  第一种var js1 = jq[0]; //把jq转成js  第二种var js2 = jq.get(0);alert(js1.value+"="+js2.value);</script> jq的文档操作1、创建元素var jq = $("<div id='id'>abc</div>")     <可以任意添加属性,文本值>2、添加元素添加到最前面    $("body").prepend(h3);        var h3 = $("<h3>啦啦啦</h3>");  在被选元素的结尾插入内容添加到最后面  $("body").append(新元素);    添加子元素   在被选元素的开头插入内容3、插入元素插入到兄弟元素的前面        $("#d2").before(d);插入到兄弟元素的下面     $("#d2").after(新元素);4、删除元素元素.remove()             <直接删除元素本身: $("#d2").remove();>5、样式相关赋值：$("#id").css("属性名","值"););  < $("#id").css("background-color","#9ACD32"); ><??多个属性一起赋值用大括号括起来，各个属性用逗号隔开?><? $("div").css({"background-color":"yellow","width":"200px","color":"red"}); ?>取值：var width = $("#xxx").css("width");  <第二个参数省略>6、属性相关添加属性值：$("#xxx").attr("属性名","属性值");获取属性值：var str = $("#xxx").attr("属性名");7、文本相关 <对应css的innerText>给元素文本赋值：   $("#xxx").text("abc");获取元素的文本内容：var str = $("#xxx").text();8、html相关<对应css的innerHTML>给元素添加html内容：$("#xxx").html("<h1>xxx</h1>");获取元素的html内容：var str = $("#xxx").html();
----------------------------------------------------------------------------
得到元素的子元素：$("#id")children();<script type="text/javascript">$(function(){/* 隐藏ul>li>ul下面的子元素 */$("ul>li>ul").hide();/* 动态绑定点击事件 */$("body>ul>li").click(function(){/* 代表点击的li, children()得到元素的子元素,toggle()让元素隐藏显示切换 */$(this).children().toggle();/* 得到其他两个兄弟元素li的children元素ul并隐藏 */$(this).siblings().children().hide();})})</script>找当前元素的父元素：<script>$("#id").parent();</script>事件模拟(触发)：<script type="text/javascript">$(function(){$("input").click(function(){alert("啦啦啦");})//定时器setTimeout(function(){/* 模拟按钮的点击事件 */$(":button").trigger("click");},3000)})</script>鼠标移入移出事件hover()：格式：hover(fn1,fn2); (参数1：移入，参数2：移出)等效onmouseover onmouseout<script>$(function(){/* 给所有的div添加移入移出事件 */$("div").hover(function(){$(this).css("color","red");},//第二个函数表示移出事件function(){$(this).css("color","green");})})</script>动画实现：<script type="text/javascript">$(function(){$("input").click(function(){if($(this).val() == "隐藏"){/*hide方法里面前面参数是时间(执行该操作所需要的时间)，后面参数是方法(可有可无)*/$("img").hide(3000); }else if($(this).val() == "显示"){$("img").show(3000,function(){$("img").hide(3000,function(){$("img").show(1000);});});}else if($(this).val() == "上滑"){$("img").slideUp(3000);}else if($(this).val() == "下滑"){$("img").slideDown(3000);/* 上滑之后才能下滑 */}else if($(this).val() == "淡出"){$("img").fadeOut(3000);}else if($(this).val() == "淡入"){$("img").fadeIn(3000);}else{   //多个方法一次执行$("img").animate({"left":"500px"},1000).animate({"top":"300px"},1000).animate({"left":"0px"},1000).animate({"top":"0px"},1000).animate({"width":"800px","height":"500px"},1000).animate({"width":"500px","height":"300px"},1000);}})/*鼠标放到图片上实现图片放大，鼠标离开图片缩小*/$("img").hover(function(){$(this).animate({"width":"800px","height":"500px"},500);},function(){$(this).animate({"width":"500px","height":"300px"},500);})})</script>

以上是对前端基础知识的整理，存在遗漏的地方，欢迎留言给出宝贵的建议；别忘了点赞哦！

Html+Css+JavaScript快速入门相关推荐

JavaScript快速入门(1)
JavaScript快速入门详情百度百科 1. 什么是javaScript 2.快速入门 2.1.js引入方法 2.2. javaScript 的基本语法入门 2.3.数据类型 2.4.严格检查模式 ...
JavaScript快速入门（四）——JavaScript函数
函数声明之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
html+css+js+快速入门
html 1.a标签  <a name="top">顶部</a> <!--target:表示窗口在哪里打 ...
狂神JavaScript快速入门学习笔记
狂神视频地址 1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script>alert('he ...
3.JavaScript快速入门
1.什么是JavaScript 1.概述是一门世界上最流行的脚本语言 Java和 JavaScript 一个合格的后端人员必须精通JavaScript 2.历史 ECMAScript是JavaSc ...
javaScript快速入门(笔记)
该笔记大部分搬运B站遇见狂神说的javaScript,顺便把图文合并记录,便于回顾视频地址:[狂神说Java]JavaWeb入门到实战_哔哩哔哩_bilibili记得三连目录 1 ...
HTML+JS+CSS+xml快速入门
一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...

Html+Css+JavaScript快速入门

--------HTML基础--------

--------CSS 基础--------

--------JavaScript基础--------

--------jQuery框架--------

Html+Css+JavaScript快速入门相关推荐

最新文章

热门文章