java——HTML、css、JavaScript、jQuery 详细介绍
html{
/* 页面出现旁边出现多余空白区域解决办法 */
overflow-x:hidden;
}
**HTML ： 用于搭建页面结构和页面数据的 盖房子 CSS： 用于美化页面 装修 JavaScript： 用于让页面呈现出动态的效果和内容 jQuery： 用于封装JavaScript的框架，简化JavaScript操作**
####HTML介绍
HyperText(超文本) Markup（标记） Language（语音） 类似于XML都是由标签组成
- xml：是可扩展标记语言,标签可以任意自定义
- HTML：不可以使用任意标签，学习html主要学习的就是html里面有哪些固定的标签，学习标签内部有哪些属性,还要学习标签和标签之间的嵌套关系
- 超文本： 不仅仅是文本，还包括字体大小，颜色，样式等，还包括多媒体相关（图片，音频，视频）
###浏览器兼容性问题
- 因为不同的浏览器可能会存在兼容性问题，所以平时测试时统一使用谷歌浏览器
###HTML文件结构
<DOCTYPE html> 文档声明 <html> 根标签 <head> 头标签 给浏览器看的内容 <meta charset="UTF-8"> 告诉浏览器解码的字符集 <title>页面的标题</title> </head> <body>体标签 给用户看的内容 </body> </html>
###HTML中常见的各种标签
1. 文本标题标签 独占一行 属性 align="left/center/right" <h1></h1>----> <h6></h6> 2. 段落标签 独占一行 <p></p> 3. 换行 <br> 4. 水平线 <hr>
###简历练习：
<h1 align="center">苍老师简历</h1> <hr> <h2>基本信息</h2> <p>姓名：苍老师</p> <p>性别：女</p> <p>爱好：苍老师</p> <hr> <h2>基本信息</h2> <p>曾获得2018年女神评选第一名<br> 年轻时获得某校校花第一名荣誉</p>
###列表标签
####无序列表
<ul> <li>列表项1</li> <li>列表项2</li> </ul>
####有序列表
<ol type="1" start="5" reversed="reversed"><!-- ordered list --> <li>打开冰箱门</li> <li>把大象放进冰箱</li> <li>关上冰箱门</li> </ol>
####定义列表
<dl><!-- definition list定义列表 --> <!--definition title/term定义标题 --> <dt>凉菜</dt> <!--definition description 定义描述 --> <dd>大拌菜</dd> <dd>芥末鸭掌</dd> <dd>花毛一体</dd> <dt>炒菜</dt> <dd>木须肉</dd> <dd>葱爆羊肉</dd> <dd>溜三样</dd> </dl> 表格table: border边距 tr:行 td:列
| Month | Savings |
|---|---|
| January | $100 |
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
####列表嵌套
有序和无序列表之间可以任意嵌套n层
####分区标签
-
分区标签自身没有显示效果，可以理解成一个容器，用于装页面中的元素，对页面中的元素进行统一管理。
-
div：块级分区元素，独占一行
-
span：行内分区元素，共占一行
-
以后开发的页面一般会分为三大区：头 体 脚
<div>头部</div> <div>体部</div> <div>脚部</div>
-
h5标准中增加了几个专门用于分区的元素用来取代div,相比div可读性更强见名知意
<header>头部</header> <article>体部</article> <footer>脚部</footer>
###标签的分类
- 块级元素：独占一行
包括：div，h1-h6, p,hr - 行内元素：和其它行内元素共占一行
包括：span,斜体i和em,粗体 b和strong,下划线 u, 删除线 s和del
####空格折叠现象
- 如果一行内连续多个空格最终只会识别为一个 通过
####常见需要转义的特殊字符(实体引用)
- 空格 - 小于号 < - 大于号 > - 换行 <br>
####图片标签
- <img> 是单标签
- 常见属性：
-
alt：当图片不能正常显示的时候显示此内容
-
src：路径，站内资源使用相对路径 和站外资源使用绝对路径
-
title：当鼠标悬停的时候显示的文本
-
width/height: 通过像素设置宽高，通过百分比设置宽高，如果只设置宽度高度会根据原始宽高比进行缩放
####图片地图<map id="xxx" name="xxx"> <area shape="circle/rect" coords="280,330,32" href="http://doc.tedu.cn"> </map>
- href:指定访问的路径，地址可以指向页面(站内或站外)，还可以指向文件，如果文件浏览器可以打开则直接浏览，如果打不开则下载此文件
———————————————————————————————————
###超链接 a
- 如果a标签没有href属性 则就是纯文本
- 常用属性：
- href：地址 可以指向页面 和文件（能打开则直接浏览 不能打开则下载文件）
- target="_blank":从新窗口打开页面 此时不能返回
- 可以和图片结合使用，让图片具备点击功能
- 锚点的使用： 需要先创建一个锚 <a id="top" name="top"></a> 通过另外一个a标签 跳转 <a href="#top">回到顶部</a>
###表格 table
- 相关的标签： table tr td th caption 分组：thead tbody tfoot
- 相关属性： border边框粗细 cellspacing(单元格的外边距) cellpadding（单元格的内边距） rowspan(跨行) colspan（跨列）
###表单 form
- 用于收集用户输入信息，并且把信息提交给web服务器
- 学习form表单主要学习的就是form表单里面的各种显示控件包括：文本框，密码框，单选框，多选(复选框)，下拉选，日期选择器,文件选择器,按钮
<!-- action提交的地址 --> <form action="http://www.tmooc.cn"> <!-- value:文本框的默认值 placeholder：占位文本 maxlength：最大字符长度 readonly:只读 --> <input type="text" name="username" value="lalala" placeholder="用户名" maxlength="10" readonly="readonly"> <input type="password" name="password"> <hr> <!-- 单选 --> 性别: <input type="radio" name="gender" id="nan" value="nan"> <label for="nan">男</label> <input type="radio" name="gender" id="nv" value="nv"> <label for="nv">女</label> <input checked="checked" type="radio" name="gender" id="qt" value="qt"> <label for="qt">其它</label> <hr> 爱好： <input checked="checked" type="checkbox" name="hobby" id="lq" value="lq"> <label for="lq">篮球</label> <input type="checkbox" name="hobby" id="wz" value="wz"> <label for="wz">王者农药</label> <input checked="checked" type="checkbox" name="hobby" id="ldm" value="ldm"> <label for="ldm">撸代码</label> <hr> 生日：<input type="date" name="birthday"> <hr> 靓照: <input type="file" name="pic"> <hr> 个人介绍： <textarea name="des" rows="3" cols="20">这家伙很懒。。。什么都没留下!</textarea> <hr> 出生地： <select name="city"> <option>请选择</option> <option value="bj">北京</option> <option selected="selected" value="sh">上海</option> <option value="gz">广州</option> </select> <!-- 隐藏域 --> <input type="hidden" name="id" value="234234"> <!-- 按钮 --> <input type="submit" value="注册" > <input type="reset" value="reset"> <input type="button" value="自定义按钮"> </form>
input的使用:
-提交按钮submit: <input type="submit" value="注册" /> -自定义按钮button: <input type="button" value="自定义命名" class="c1"/> -重置按钮reset: <input type="reset" value="reset"/> 清空内容使用 -复选按钮chekbox: <input type="checkbox" class="c2" id="d1" value="0"> -禁用文本框:disabled="disabled" <input type="text" disabled="disabled" name="username" value="被禁用了"/> 文本框是不能输入内容的，显示 被禁用了。 -文本框显示内容placeholder: <input type="text" placeholder="姓名">文本框显示姓名内容 输入内容时 姓名自动消失 最大值：maxlength="10" 自动登陆(复选框后面跟自定义命名) -距离加宽不限制于按钮label: <label for="d1" class="cccc4">自动登陆</label>不添加label只能在自动登陆前面复选框里打勾，填了后点击文字也可以打勾 （一般和复选按钮混合使用) 例：<input type="checkbox" class="c2" id="d1" value="0"><label for="d1" class="cccc4">自动登陆</label> -文本框内文字显示placeholder: <input type="text" placeholder="输入文本框内需要显示的内容"/>text是文本显示 password是用于密码 显示内容为****
###CSS 层叠样式表
-
用于给页面中的元素添加显示样式
-
三种引入方式：
-
内联样式：在元素内部通过style属性添加样式，不能复用，只能作用于一个元素
<div style="border: 1px solid red">马上中秋节放假</div>
-
内部样式：在head标签内部添加style标签，在标签内部通过选择器找到页面中的元素，并添加样式，好处可以在页面内部复用，弊端：只能在当前页面复用
<style type="text/css"> /* 通过选择器找到页面中的元素并添加样式 */ h1{ background-color: yellow; } </style> -
-
外部样式：在单独的css文件中写样式代码 在head里面通过link标签引入
<link rel="stylesheet" href="first.css">
first是css的文件名，
———————————————————————————————————
###CSS
-
Cascading(层叠) Style（样式）Sheet(表)，层叠样式表 用于美化页面。
-
引入CSS的三种方式：
- 内联样式： 在元素中添加style属性添加样式，只能作用于当前元素，不能复用
- 内部样式： 在head标签中添加style标签，可以在当前页面复用，不能多页面复用
- 外部样式： 在单独的css文件中写样式代码 在head中添加 link标签引入css文件，可以多个页面复用
- 三种引入方式的优先级
- 内联优先级最高
- 内部和外部优先级一样，后执行的覆盖前面执行的
###选择器
- 通过选择器可以灵活的选中页面中的某些元素，选中后给元素添加样式
- 标签名选择器 格式： 标签名{样式代码}
- id选择器 格式： #id{样式代码}
- 类选择器 格式： .class{样式代码}
- 练习：创建demo04 在页面中 添加5个div 让第1，3，5个背景颜色为绿色，让第4个添加紫色边框，让所有的div字体红色
- 任意元素选择器 格式： *{样式代码} 优先级较低因为作用范围大
- 属性选择器 格式： 标签名[属性名=‘属性值’]
- 子孙元素选择器
- 子元素选择器
- 分组选择器
如果需要对页面中多种不相关的元素设置相同的效果，此时一个选择器如果选择不到的话可以使用分组选择器把多个选择器合并到一起
-格式： .class,#id,h3{样式代码} - 伪类选择器 用于选择元素的状态
/*a 是超链接 直接{}加颜色
- 未访问状态 a:link{ color:red; }
- 访问过状态 a:visited{color:yellow;}
- 鼠标悬停状态 a:hover{color:blue;}
- 鼠标点击时状态 a:active{color:green;}
####选择器回顾：
标签名选择器 标签名{}
id选择器 #id{}
类选择器 .class{}
子孙选择器 div span a{}
子元素选择器 div>span>a{}
任意元素选择器 *{}
分组选择器 #id,.class,标签名{}
属性选择器 input[type=‘password’]{}
伪类选择器 未访问a:link 访问过 a:visited 悬停 a:hover 点击时 a:active
####常用样式属性
- color 字体颜色
- border 边框
- background-color 背景颜色
#####颜色的赋值方式
- 通过颜色名称赋值 red blue pink yellow green …
- 通过6位的16进制赋值 ，每两位表示一个颜色每个颜色的取值为0-255 三原色 rgb redgreenblue红绿蓝（了解）
举例：红色 #ff0000 蓝色 #0000ff 绿色 #00ff00
黄色 #ffff00 黑色 #000000 白色 #ffffff - 通过3位的16进制赋值 #0f0 等效 #00ff00
- 通过三位10进制赋值 rgb(0-255,0-255,0-255); 红色 rgb(255,0,0);
- 通过四位10进制赋值 alpha：透明度 rgba(0-255,0-255,0-255,0-1); 透明度值越小越透明 background-color: rgba(255,0,0,0.2)
#####设置背景图片
/设置图片/
background-image:url("…/imgs/a.jpg")
控制属性背景图片的平铺效果:
background-repeat:repeat;
-repeat; 在垂直方向和水平方向重复，为重复值
-repeat-x; 仅在水平方向重复
· -repeat-y；仅在垂直方向重复
· -no-repeat；仅显示一次
/* 设置元素的宽高 /
width: 500px;
height: 500px;
background-color: yellow;
/ 设置背景图片 /
background-image: url("…/imgs/k.jpg");
/ 设置背景图片的尺寸
如果图片尺寸小于元素的尺寸
则会自动重复平铺 /
background-size: 300px 300px;
/ 禁止重复 /
background-repeat: no-repeat;
/ 控制背景图片的位置
1.横向位置 left/center/right左中右
2.纵向位置 top/center/bottom上中下
可以实现9宫格的9个位置
/
/ background-position: center center; /
/ 通过百分比控制位置
第一个参数0代表左边缘 100%代表右边缘
第二个参数0代表上边缘 100%代表下边缘
/
background-position: 80% 80%;
####练习 创建demo10 页面中添加三个div 第一个div尺寸300300 设置背景图片正好填充，要求图片全部显示，第二个div尺寸500500，背景颜色为红色 背景图片尺寸100100 要求图片只显示一张显示在正中间，第三个div尺寸200200背景绿色 图片100100显示在div的左下角的位置（要求使用百分比方式控制位置）
———————————————————————————————————
###布局相关的样式
####盒子模型
-
盒子模型包括元素的宽高，外边距，内边距和边框。
#####元素的宽高 -
width/height 通过该属性设置元素的宽高
-
只能对块级元素设置宽高，行内元素的宽高只能受内容影响
#####外边距 -
指元素距离上级元素边框或相邻兄弟元素边框
-
如何设置外边距：
/* 给某个方向外边距单独赋值 */ /* margin-top: 20px; 上 margin-left: 20px; 右 margin-bottom: 10px; 下 margin-right: 20px; */ 左 /* 批量赋值外边距 */ /* margin: 30px; *//* 四个方向全是30 */ /* margin: 10px 30px; *//* 上下10 左右30 */ /* margin: 0 auto; *//* 水平居中 */ margin: 10px 20px 30px 40px;/* 上右下左 */
-
如果元素的上边缘和上级元素的上边缘重叠此时添加上外边距会出现粘连效果，通过给上级元素添加overflow:hidden解决
-
如果上下相邻两元素同时添加了下外边距和上外边距，取最大值。
####行内元素外边距相关
- 行内元素左右外边距生效，上下不生效
- 左右相邻两个元素 同时存在右外边距和左外边距时取两个值相加之和
上下取最大，左右相加
#####边框
/1.粗细 2.样式 3.颜色/
/border: 19px solid blue;实线/
/border: 10px dashed read;虚线/
/border: 10px groove green;凹槽线/
/border: 10px inset yellow;嵌入式线/
/* 单独给元素的某一个方向添加边框 /
border-top: 12px solid green; 上
border-left: 12px solid blue; 右
border-bottom: 12px solid pink; 下
border-right: 12px solid yellow; 左
/ 值越大越圆 */
border-radius: 4px; - 块级元素：四个边加边框全部生效并且全部影响元素所占宽高
- 行内元素：四个边加边框全部生效 ，但是左右边框会影响元素所占宽度上下边框不影响元素所占高度
#####内边距 - 什么是内边距：元素边框距内容的距离
/* 内边距会影响元素的宽高 /
/ padding-left: 20px;
padding-top: 20px; /
padding: 10px; / 四个边的内边距都是10px /
padding: 10px 20px; / 上下10 左右20 /
padding: 10px 20px 30px 40px; / 上右下左 */ - 块级元素：内边距全部生效并且会影响元素的所占宽高
- 行内元素：内边距全部生效但是左右内边距会影响元素所占宽度上下内边距不影响元素所占高度
#####块级元素和行内元素关于盒子模型的总结
- 块级元素：可以设置宽高，外边距全部生效，边框全部生效并且全部影响宽高，内边距全部生效并且全部影响宽高
- 行内元素：不可以设置宽高，外边距左右生效上下不生效，边框全部生效但是左右影响宽，上下不影响高，内边距全部生效但是左右影响宽上下不影响高
####文本相关属性
/* 文本对齐方式 left/center/right 左中右*/
text-align: center;
/* 文本修饰
underline下划线
overline上划线
line-through删除线
none 无
删除线使用
text-decoration: line-through;*/
/*去掉ul的点
ul{list-style:none;*/
/*去掉超链接的下划线 指向a
text-decoration: none;*/
/* 文本颜色 */
color: green;
/* 文本阴影
1 阴影颜色
2和3 代表阴影偏移坐标
4 阴影模糊程度值越大越模糊
*/
text-shadow: red 5px 5px 5px;
/* 行高 用于实现上下居中 */
line-height: 50px;
####字体相关属性
/* 字体大小 单位像素*/ font-size: 10px; /* 字体粗细 bold加粗 normal 默认效果 */ font-weight: bold; /* 斜体 */ font-style: italic; /* 字体名称 可以赋值多个 依次检测 哪个可用用哪个 */ font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
###课程回顾：
- 盒子模型： 外边距 内边距 边框 宽高
- 宽度计算公式：左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
####学子商城首页练习：
- 段落标签p自带上下外边距，如果不需要可以设置成margin：0;
- display：block;是把行内元素改成块级元素
- float:left/right; 浮动元素 明天会细讲
####溢出设置 overflow
- 超出范围隐藏 overflow:hidden;
- 超出范围显示 overflow:visible;
- 超出范围滚动显示 overflow:scroll;
4.解决粘连问题:
####显示方式 display - block：块级元素的默认值，可以设置宽高 盒子模型相关没有任何限制，但是元素必须独占一行
- inline: 行内元素的默认值，可以和多个行内元素共占一行，不能修改宽高，而且盒子模型相关的上下(外边距，内边距，边框)不能赋值或没有效果
- inline-block: 行内块，可以修改宽高 也可以共占一行
———————————————————————————————————
浮动:float: left;左浮动 float:right; 右浮动
###定位
####position定位
#####文档流定位（静态定位）
- 默认是文档流定位 元素如果是文档流定位则显示的位置会从上到下 从左向右排列
- 设置方式： position:static；
#####相对定位 - 相对定位元素不会脱离文档流，不影响其它元素的位置，相对定位通过上右下左让元素相对于元素初始位置做偏移
- 设置方式： position：relative；
直接top,right,left,bottom上右左下调位置 left:10px;(右移用左，下移用上) - 应用场景：存在于页面中的元素如果需要做位置移动，但是不希望页面中的其它元素跟着移动，此时使用相对定位
- 总结：不脱离文档流，相对于初始位置
#####绝对定位 - 元素脱离文档流，后面的元素会往上顶，上下左右的值相对于窗口或相对于做了非static定位(推荐相对定位)的祖先元素，如果多个祖先元素做了相对定位则就近原则。
- 设置方式： position：absolute；
直接top,right,left,bottom上右左下调位置 top:10px;(右移用左，下移用上) - 应用场景：当元素需要层叠显示并且不希望元素存在于文档流中时使用
- 总结： 脱离文档流，相对于窗口或相对定位的祖先元素
#####固定定位 - 元素固定在窗口的某个位置，不会因为内容位置的改变改变自身位置
- 设置方式： position:fixed;
- 总结：脱离文档流，相对于窗口
####浮动定位
元素脱离文档流，元素可以在当前所在行左侧或右侧浮动，当撞到父元素边框或行内其他浮动元素时停止
- 如果一行浮动元素装不下会自动换行，换行时有可能会被卡住
- 如果元素上面的元素浮动了则元素会往上顶，如果不希望元素往上顶可以设置元素两侧不允许有浮动 clear:both
- 当元素的所有子元素全部浮动时此时自动识别的高度为0，
通过overflow：hidden解决 - 应用场景：把纵向排列的元素改成横向时使用
####行内元素的垂直对齐方式
vertical-align:默认baseline/top/middle/bottom
###CSS的三大特性
- 继承性：子元素可以继承祖先元素中的部分样式，只能继承color/font-开头/text-开头的属性
- 有个别标签自带效果，不能继承自带效果的样式 比如： 超链接，h1-h6
-
层叠性：通过不同的选择器可以多次指向同一个元素 如果设置的属性不一样则所有的效果全部生效,如果作用相同的属性 则根据选择器的优先级决定
-
优先级：当多个选择器选择同一个元素并且设置相同的属性时会根据以下规则
- 直接选中优先级高于间接选中(继承)
- 如果是相同选择器：后执行的覆盖前面执行的
- 如果是不同选择器：根据选择器的作用范围决定优先级，范围(id<class<标签名<继承<元素默认样式)越小优先级越高 (id>class>标签名>继承>元素默认样式 )
———————————————————————————————————
###JavaScript 简称JS
- 用于给页面添加动态效果或动态内容的
- JS历史：1995年由网景(NetScape)公司发布 LiveScript 同年改名为JavaScript，和Java没有关系，为了蹭热度。
- 语音特点： 属于脚本语言不需要编译，由浏览器解析执行，JavaScript可以嵌套在html中 ，基于面向对象，弱类型的语言, 交互性：可以用户直接交换，安全性：该语言只能访问浏览器里面的内容
###如何在html页面中引入JavaScript
- 在元素的事件属性中，如按钮的点击事件
<input type="button" value="点我试试！"
onclick="alert('试试就试试！')">
-
在script标签中写js代表 script标签可以写在页面的任何位置 推荐写在head里面
<script type="text/javascript"> alert("第二种引入方式！"); </script> -
在单独的js文件中写js代码 通过script标签中的src属性引入，引入过文件的script标签不能在标签体中 继续写js代码
<script type="text/javascript" src="first.js"></script>
###JavaScript语法
数据类型，变量，运算符，语句，方法（函数）
####数据类型
- 数值类型(number)
NaN (Not a Number) isNaN(18)= false isNaN(“abc”)=true - 字符串类型(string)
- 布尔值类型(boolean)
- 未定义类型(undefined)
- 对象类型(object)
####变量的声明和赋值
var x = 18; //类型为number 值 18
var name = “张三”; //类型string 值 张三
var b = true/false; //类型Boolean 值 true/false
var y; //类型是undefined 值 undefined
var p = new Person();
####数据类型之间的隐式转换
- js中数据类型会根据不同的场景进行自动类型转换
1. 数值类型
- 转字符串： 直接转 18->"18" "abc"+18 = "abc18" （只有加法会把数值转字符串）
- 转布尔值: 0和NaN转false 非0即真(true)
2. 字符串类型
- 转数值: 能转直接转 不能转则转成NaN； （NaN和任何数值进行任何运算结果都是NaN） "35"->35 "abc"->NaN
- 转布尔值: 只有空字符串("") 转false 其它true ""->false, "a"->true
3. 布尔值类型
- 转数值： true=1 false=0 30+true=31 30+false=30
- 转字符串： 直接转 “abc”+true = "abctrue"
4. undefined类型
- 转数值： NaN
- 转字符串： "undefined"
- 转布尔值： false
5. null
- 转数值：0 28+null=28
- 转字符串： "null" "abc"+null = "abcnull"
- 转布尔值： false
###运算符
- JS语言中的运算符和Java中大致相同
- ==和==，==会先将等号两端的类型统一然后再比较值，===先判断类型是否相等如果不等则直接false如果相等再比较值是否相等
- typeof typeof 66+6 ="number6"
- 两数相除 结果会自动生成整数或小数 5/2=2.5 4/2=2
###语句 if else while do while for switch case
- JS语言中的语句和Java中大致相同
- 1. 语句中写条件的括号中如果不是布尔值类型会自动转成布尔值
- 2. for循环中 int i 改成 var i 不支持增强for循环（foreach)
###函数(方法)声明
Java中声明函数的写法
public String run(int age,String name){
return "abc";
}
- JS中写法
function run(age,name){
return "abc";
}
- 格式一： function 方法名(参数列表){ return xxx; }
- 格式二： var 方法名 = function(参数列表){ return xxx; }
###和页面相关的函数
1. 通过id得到页面中元素的函数
var input = document.getElementById("myinput");
2. 从文本框中获取内容和设置内容
input.value = "abc";
alert(input.value);
3. 给div设置文本内容
d.innerText="abc";
4. 给div设置html内容
d.innerHTML+= "<h1>abc</h1>";
———————————————————————————————————
String 数组 日期对象 正则
###String相关内容
- 创建字符串的两种方式
var s1 = “abc”; //单引号和双引号都可以
var s2 = new String(“abc”); - 把字符串转成数值
parseInt(str)//把字符串转成整数，还可以把小数转成整数
parseFloat(str)//把字符串转成小数
Number(str)//等效parseFloat - 字符串转大小写
str.toUpperCase()//转大写 str.toLowerCase()//转小写 - 获取字符串出现的位置 从0开始
var str = “abcdefgem”;
-从前面找
str.indexOf(“e”);
-从后面找
str.lastIndexOf(“e”); - 截取字符串 从0开始
str.substring(start,[end]); - 替换字符串
str.replace(old,new);
color
var x = "<div class='[c]'></div>";
x.replace("[c]",color);
- 拆分字符串
str.split("."); //返回值是个数组
####数值相关：四舍五入
18.23456.toFixed(4); // 18.2346
###数组相关 - 创建数组 数组内部可以添加任意类型的数据
var arr1 = [“小明”,18,true];
var arr2 = new Array(); - 往数组中添加内容
arr2.push(“张学友”);
arr2.push(28);
arr2.push(true); - 修改数组的长度
arr1.length = 2; - 遍历数组
for(var i=0;i<arr1.length;i++){
alert(arr1[i]);
} - 数组反转
arr.reverse(); - 数组排序 默认排序方式是以字符串的形式进行排序 排序规则是通过Unicode编码进行排序
arr.sort();
-
自定义排序：
//自定义排序需要准备一个自定义的排序方法 function sortfn(a,b){ return a-b;//升序 //return b-a;//降序 } alert(arr.sort(sortfn));
###日期相关函数
- 服务器时间和客户端时间
- 获取客户端时间
var d1 = new Date(); - 2018/9/30 14:35:32 把字符串时间转成时间对象
var d2 = new Date(“2018/9/30 14:35:32”); - 从时间对象中获取和设置时间戳（距离1970年1月1日 08：00：00）
d2.getTime();
d2.setTime(1000); 1970/1/1 08:00:01 - 获取时间分量 单独的年 月 日 时 分 秒 星期几
d1.getFullYear();
d1.getMonth();//从0开始
d1.getDate();
d1.getDay();//星期
d1.getHours();
d1.getMinutes();
d1.getSeconds(); - 获取年月日 获取时分秒
d1.toLocaleTimeString();
d1.toLocaleDateString();
###正则表达式
. :匹配任意字符除了换行
\w:匹配任意数字、字母、下划线
\d:匹配任意数字
\s:匹配空白
^: 开头
$: 结尾
- 应用场景：1. 查找内容 2. 校验文本
//第一种创建方式：第一个/代表的是规则
//第二个参数表示模式
//（i:忽略大小写 g:全局查找）
var reg1 = /^a/i; //以a开头 忽略大小写
//以m结尾
reg1 = /m$/;
//包含两个数字
reg1 = /\d{2}/;
//以3个数字开头
reg1 = /^\d{3}/;
//以y开头m结尾中间包含5位数字
reg1 = /^y\d{5}m$/;
//6-10位数字字母下划线
reg1 = /^\w{6,10}$/;
//第二种创建方式第一个参数是格式，第二个是模式
//第二个参数如果没有值可以省略
var reg2 = new RegExp("^\\w{6,10}$");
//和正则相关的方法
//1. 查找内容
var str = "you can you up no can no b b";
var reg = /no/g;
//查找内容 如果全局查找 每执行一次查找一个
//执行第二次查找下一个 找不到时得到null
//alert(reg.exec(str));//no
//alert(reg.exec(str));//no
//alert(reg.exec(str));//null
//2. 校验方法
//reg = /^You/i;
//alert(reg.test(str));
//字符串和正则相关的方法
//3. 查找内容 一次性得到所有查找内容
//var arr = str.match(reg);
//alert(arr);
//4. 查找替换 替换所有
alert(str.replace(reg,"bu"));
———————————————————————————————————
###事件取消
-在事件属性中如果直接return false 则会把当前事件取消掉
###DHTML
-Dynamic(动态) HTML，着并不是一个新的技术 只是HTML+CSS+JS得到的一个
动态页面称为DHTML
-BOM：Browser(浏览器) Object(对象) Model(模型) ，包含浏览器相关的各种对象
-DOM：Document(文档) Object(对象) Model(模型)，包含和页面相关的各种对象
###BOM 浏览器对象模型
###window(窗口)
- window里面的属性和方法称为全局属性或全局方法，调用时可以省略掉 window.
-window下常用的属性和函数
parseInt()和paseFloat()
alert() 弹出框
confirm() 确认框
prompt() 弹出文本框
isNaN()
-location:位置
-href 获取和设置浏览器访问的地址
-reload() 页面重新加载（刷新）
history：历史
-次历史代表的是当前窗口的历史
-history.length获取当前窗口访问的页面数量
-history.back()返回上一页面
-history.forward()前往下一页面
-history.go(num) 前往某个页面 0代表当前页面 1代表下一个页面 -1代表上一个页面 2代表下两个页面
screen ：屏幕
-screen.width/height 屏幕宽高
-screen.availWidth/availHeight 屏幕可用宽度
navigator 导航/帮助
-navigator.userAgent 得到浏览器的版本信息
###和window相关的事件
onclick onblur onsubmit
-onclick:点击事件， 当点击页面内的任何位置的时候触发
<a href="http://www.tmooc.cn"
οnclick="return confirm('您确认离开吗？')">OO</a>
οnclick=function(){
alert("点击了窗口！");
}
-onload: 加载完成事件，当页面加载完成的时候执行
onload = function(){
i1.value="abc";
}
-onfocus:获取焦点事件，当页面处于激活状态的时候执行
onfocus = function(){
console.log("获取焦点");
}
-onblur:失去焦点事件，当页面切换到非激活状态的时候执行
onblur = function(){
console.log("失去焦点")
}
####eval()方法(函数)
-可以将传递到方法中的字符串参数以js代码的形式执行
####高级版计算器
-按钮边框不影响显示范围
-文本框边框影响显示范围
###通过js给元素添加样式
-获取和设置的样式为内联样式，不能获取非内联样式的值
###定时器
-setInterval(函数，时间间隔);
/*每隔2秒执行函数体的内容*/
setInterval(function(){
//console.log(x++);
x+=10;
i1.style.marginLeft=x+"px";
},2000);/*2000是2秒*/
###假轮播图作业：
//通过元素名称获取元素对象 得到一个数组
-var arr = document.getElementsByTagName(“img”);
//让元素对象隐藏
-display:“none”;
//让元素对象显示
-display:"block";
function myfn(div){
//通过div 得到里面的img图片
var img = div.getElementsByTagName("img")[0];
//alert(img);
//判断图片当前是否是隐藏状态
if(img.style.display=="none"){//隐藏
img.style.display="block";//让图片显示
}else{
img.style.display="none";//让图片隐藏
}
}
</script>
</head>
<body>
<div οnclick="myfn(this)">
<img alt="" src="../imags/a.jpg" >
</div >
<div οnclick="myfn(this)">
<img alt="" src="../imags/k.jpg">
</div>
<div οnclick="myfn(this)">
<img alt="" src="../imags/b.jpg">
</div>
———————————————————————————————————
###定时器
-通过定时器可以实现每隔一段事件执行某段代码
-开启定时器：
var timeID = setInterval(函数，时间间隔)
-停止定时器
clearInterval(timeID);
-setTimeout(函数，时间);//这种方式只会执行一次
###DOM Document Object Model
-文档对象模型 ，学习DOM 主要学习的就是对页面中标签的增删改查操作
###查找元素
-通过id查找
var input = document.getElementById(“id”);
-通过标签名查找
var arr = document.getElementsByTagName(“标签名”)[0];
-通过标签的name属性查找
var arr = document.getElementsByName(“name属性的值”)[0];
-通过标签的class属性查找
var arr = document.getElementsByClassName(“class属性的值”)[0];
-获取body
document.body
####创建元素
var h1 = document.createElement(“h1”);
h1.innerText=“拉拉”;// 需要点击页面才会显示内容
###添加元素到某个元素中
父元素.appendChild(新子元素);
ul.appendChild(li);
###插入元素到某个元素的上面
父元素.insertBefore(新元素,弟弟元素);
ul.insertBefore(li,sh);
###删除元素
父元素.removeChild(被删除的元素);
ul.removeChild(sh);
<ul>
<li>背景<ul id="d1">白色</ul>
</li>
<li id="sh">上海</li>
<li>广州</li>
</ul>
li的父元素是ul，li的子元素是d1，li的弟弟元素是sh(和li同级别)
例：
<script type="text/javascript">
function addfn(){
//创建li元素对象
var li = document.createElement("li");
//设置显示内容
li.innerText = i1.value;
//得到ul
var ul = document.getElementsByTagName("ul")[0];
//li添加到ul里面
ul.appendChild(li);
}
function insertfn(){
//创建li元素对象
var li = document.createElement("li");
//设置显示内容
li.innerText = i1.value;
//得到ul
var ul = document.getElementsByTagName("ul")[0];
//li添加到ul里面的上海上面
ul.insertBefore(li,sh);
}
function removefn(){
//得到ul
var ul = document.getElementsByTagName("ul")[0];
ul.removeChild(sh);//删除
}
</script>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="添加" οnclick="addfn()">
<input type="button" value="插入" οnclick="insertfn()">
<input type="button" value="删除" οnclick="removefn()">
<hr>
<ul>
<li>背景</li>
<li id="sh">上海</li>
<li>广州</li>
</ul>
</body>
———————————————————————————————————
###事件
-事件指一些特定的时间点 事件包括：window相关的事件(状态改变事件)，鼠标
相关，键盘相关
-onclick点击事件，onload加载完成事件，onfoucs获取焦点事件，
onblur失去焦点，onchange值发生改变事件 ，onsubmit表单提交事件
onresize窗口尺寸改变事件
-onmouseover鼠标移入事件 onmouseout鼠标移出事件 onmousedown鼠标按下事件
onmouseup鼠标松开事件
-键盘相关事件： onkeydown键盘按下事件 onkeyup键盘松开事件
###event事件对象
-event对象中保存着和事件相关的信息
-鼠标事件中 event中可以获得鼠标的坐标 event.clientX/clentY
-在键盘事件中 可以获得按下的键盘编码 event.keyCode
var str = StringfromCharCode(event.keyCode);
-可以通过event对象获取事件源
var obj = enent.target|| event.srcElement;
###事件绑定
1.在标签中 通过事件属性绑定事件
2.通过js代码动态绑定事件
//如果再动态绑定的事件中 this 代表的就是事件源
//如果非动态绑定的事件中 this 代表的是widdow
###事件取消
-在事件的方法中 return false
###事件的传递(事件冒泡)
-如果同一区域内有多个事件响应 ，响应顺序是类似冒泡 ，从下往上
也就是从底层元素往上级元素响应，这个传递过程称为事件冒泡
添加按钮后显示的顺序为 fn1()→fn2()→fun()3
-应用场景：如果在某一个区域内多个元素需要添加相同的事件，通过事件冒泡的特性只需要
在多个元素共同的祖先元素上添加一个事件即可，从而达到节省代码的作用
###获取body和html的宽高
//得到body的宽
console.log(“body 宽度:”+document.body.clientWidth);
//得到html的宽
console.log(“html 宽度:”+document.body.parentElement.clientWidth);
cosole.log(“body 高度:”+document.body.clientHeight);
//得到html的高
console.log(“html 高度:”+document.body.parentElement.clientHeight);
###僵尸练习步骤：
1.开启每一个每个一秒执行的定时器
2.在定时器的方法中 创建img标签并且设置img的图片为僵尸图片，img的left值为屏幕的宽度
(正好在屏幕右侧),top值为1000以内的随机值，通过head，通过head里面的style标签给
img设置大小设置定位方式为绝对定位
3.开启一个每秒执行100次的定时器
4.在第二个定时器的方法中得到所有的img标签 遍历每一个img 得到原来的left值 -= 再赋值
回去 这样僵尸图片就移动起来了
5.页面中添加两个h3 一个现实成功的次数 另外一个实现失败次数 着两个h3一个左侧浮动 另外一个右侧浮动
6.在每次移动图片的时候判断此时的left值是否离等于0，等于0 说明僵尸到了房子的位置，此时删除当前
的僵尸图片，并且让现实失败次数的h3次数+1
7，再第一个定时器里面创建完img对象的时候给img添加onmouseover事件，在事件中删除事件源(图片)
同时让显示成功次数的h3次数+1 搞定！！！
———————————————————————————————————
###jQuery
-一个由js语言书写的框架，用于简化js代码的
-可以像css一样获取元素对象，可以直接修改元素的样式，解决兼容问题
//js源生加载事件
onload = function(){};
//jq源生加载事件
//需要在网页里完成事件的时候添加这个全局控件
//在{}里添加 alert(“测试”); 如果网页能正常弹出框，则事件源添加成功
$(function(){}(); //这个分号可要可不要，系统默认自带;
####js对象和jq对象互相转换
-通过以下写法可以得到jq对象
$("#id");
-给jq对象动态绑定点击事件
$("#id).click(function(){});
-把js对象转成js对象
jqboj[o]; 或jqobj.get(0);
-把js对象转成jq对象
$(jsobj);
###jQuery选择器
####基本选择器
1.标签名选择器
$("div");
2.id选择器
$("#id");
3.类选择器
$(".class");
4.分组选择器
$("div,#id,.class");
5.所有元素选择器
$("*");
###层级选择器
1.$("div span"); 匹配div里所有的span
2.$("div>span"); 匹配div里所有的span子元素
3.$("div+span"); 匹配div后面相邻的兄弟元素(弟弟元素 相邻同标签元素)
4.$("div~span"); 匹配div后面所有的兄弟元素(弟弟们元素 同标签名元素)
####层级函数
1.获取某个元素的所有兄弟元素 (相邻元素)
$("#one").siblings("div");//id为one的所有div兄弟元素 不要div就是所有元素
2.获取元素的哥哥元素 (上一级元素)
$("#one").prev("span");
3.获取元素的哥哥们元素
$("#one").prevAll("span");
4.获取元素的弟弟元素
$("#one").next("span");
5.获取元素的弟弟们元素
$("#one").nextAll("span");
####过滤选择器
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(.abc)");匹配所有div 除去class为abc的元素
####内容选择器
1.$("div:hsa(p)"); 匹配所有包含p标签的div
2.$("div:empty(p)"); 匹配不包含内容的div
3.$("div:parent"); 匹配包含内容的div
4.$("div:contains('abc')"); 匹配包含文本abc的div元素
####可见选择器
1.$("div:hidden"); 匹配所有隐藏的div元素
2.$("div:visible"); 匹配所有显示的div元素
####显示相关的函数
1.$("div:hidden").show(); 让隐藏的元素显示
2.$("div:visible").hide(); 让显示的元素隐藏
3.$("#id").toggle(); 隐藏显示 切换
####属性选择器
1.$("div[id]").show(); 匹配包含id属性的所有div
2.$("div[id='d1']"); 匹配包含id=d1的素有div
3.$("div[id!='d1']"); 匹配包含id不等于d1的所有div
####子元素选择器
<body>
<div>s1</div>
<div><span>s2</span><p>s3</p><div>
<p>s4</p>
</body>
1.$("div:first-child"); 匹配是div子元素并且是第一个
如上： 只有s1,s2是第一个
2.$("div:last-child"); 匹配是div子元素并且是最后一个
3.$("div:nth-child(n)");匹配是div并且是子元素并且是第n个
####表单选择器
1.$(":input"); 匹配所有表单中的控件(按钮，文本框，密码框，单选。。。。)
2.$(":password");匹配所有密码框
3.$(":radio"); 匹配所有单选
4.$(":checkbox"); 匹配所有多选
5.$(":checked"); 匹配所有被选中的 单选，多选，下拉选
如：<input type="radio/checkbox" checked="checked">
6.$(":input:checked"); 匹配所有被选中的 单选，多选。
7.$(":selected"); 匹配所有下拉选被选中的内容
//弹出所有 :checked 元素的value值" id="b4"
$("#b4").click(function(){
//遍历选择器选择到的每一个元素
$(":checked").each(function(){
//this代表遍历的每一个js元素对象
alert($(this).val());
})
})
###对页面中元素进行增删改查的操作
1.创建元素
js写法:var div = document.createElement("div");
jq写法:var div = $("<div id='a'>abc</div>");
2.添加元素
$("#big").append(div);//添加到后面
$("#big").prepend(h);//添加到前面
3.插入元素
兄弟元素.after(div) //兄弟元素的后面
兄弟元素.before(div);//兄弟元素的前面
4.删除元素
$("#abc").remove();// 删除id为abc的元素
5.样式
$("#abc").css("属性名","值");
$("#abc").css({"属性名1":"值1":",属性名2":"值2"});
6. 文本 等效 innerText
$("#abc").text("文本内容");//写入内容
$("#abc").text();//取值
7.html 等效 innerHTML
$("#abc").html("<h1>abc</h1>");//写入内容
$("#abc").html();//取值
- Java Web知识点整理：第一章：Html入门、CSS介绍、Java和JavaScript区别
- eclipse aptana插件 —— 【javascript|html|css|jquery|…】自动提示
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- HTML5 eclipse中写java,html,css,javascript代码提示
- HTML, CSS, Javascript, jQuery, Stylesheet, Xml之间的关系
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- jap,asp,css,html,java,javaScript中的注释
- HTML CSS JAVASCRIPT JQUERY阶段考核
- javaScript JSP HTML Java CSS 注释
- 在线运行Javascript,Jquery,HTML,CSS代码
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- 自己对html、javascript、jQuery、css的区别
- 让你的eclipse实现写JAVA代码，HTML,CSS,JAVASCRIPT代码提示
- 开始专注于Python/Django/HTML/CSS/Javascript/jQuery
- Java、JavaScript、asp.net 、jquery 详细分析
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理
- 求助 javascript以及css滤镜详细介绍，在IE以及火狐、chrome等主流浏览器下的详细应用教程
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- HTML、HTML DOM、Javascript、CSS以及jQuery使用小结