JAVA从零学re从零开始的JAVA学习01——<javaEE阶段三基础版>
day01 JAVAWEB基础简单的html、css、javaScript
1.html css的简单使用
html：超文本标记语言 概述：<html> <head></head> <body></body> </html>
这里主要学习下标签如何使用：
标题标签：<h1> 1-6 数字越大标题越小 水平线标签：<hr> 属性：size:粗细 noshade：是否有阴影
字体标签：<font> 属性：size color（不同赋值方式） <b>变粗<i>变斜
段落标签：<p>段落标签这里面的这段子前会留几格 <br/> 换行 这类标签不需要范围所以不需要两个
图片标签：<img> 属性：src：URL路径 alt：无法显示出现文本 width：宽 height：高
列表标签：<ol>有序 type：大小写字母数字 <ul>无序 type：disc实心圆 square方块 circle空圆
<li>列表标签的列表
链接标签：<a>属性：href路径 target：_blank：打开新页面 _self：替换当前页面
表格标签：<table>属性：border表格边框的宽度 width表格的宽度 cellpadding单元格与内容的空白
cellspacing单元格之间的空白 bgcolor表格的背景颜色
<tr>标签定义行有多少行
<td>列标签 colspan合并多少列 rowspan合并多少行 align居中位置left right nowrp是否折行显示
<th>自动居中加粗 一般用于表头
表单标签：<form>收集浏览器输入的数据发送至客户端 cation发送路径 method提交方式get post
<input>输入标签
1 <form action="#" method="get"> 2 <!-- 文本输入框 --> 用户名:<input type="text" value="" placeholder="请输入用户名" name="user"/> <br/> 3 <!-- 密码输入框 --> 密 码:<input type="password" placeholder="请输入密码" name="pass"/> <br/> 4 <!-- 单选按钮 --> 性 别:<input type="radio" name="gender" checked="checked"/>男 <input type="radio" name="gender" />女 <br/> <!-- 复选按钮 --> 爱 好:<input type="checkbox" checked="checked"/ name="hobby">抽烟 <input type="checkbox" name="hobby"/>喝酒 <input type="checkbox" name="hobby"/>打牌 <br /> <!-- 文件域 --> 上传头像:<input type="file" /> <br /> <!-- 普通按钮 --> <input type="button" value="点我提交"/> <!-- 重置按钮 --> <input type="reset" /> <!-- 提交按钮 --> <input type="submit" /> <input type="image" src="img/btn.jpg"/> </form>
<select>下拉菜单selected="selected"默认单选multiple=“multiple” <option>子标签
<textarea>文本域 cols列数 rows行数
块级标签：<div>块级标签配合css使用 美化显示 行级标签：<span>行级标签配合
css样式：层叠样式表用于美化html
css的三种引入方式：
一：行内引入 style=“属性：属性值” 作用域小优先级最高
二：内部引入 一般在haed标准中加<style type“text/css”>标签 选择器{ 属性：属性值}
三：外部引入 通过css文件 <link href="css/1.css" type="text/css" rel="stylesheet"/>
css的基本选择器：标签元素选择器<>{} id选择器#xx{} 类选择器.xx{}
属性选择器：标签名[标签属性=“属性值”] 包含选择器：<> <> 在前标签包含下的子标签生效
css的常用属性：width宽度 height高度 boder边框 10px solid/none/double color
font-size font-family color background-color background-image
css的转换属性：display：inline转为行级元素 block转为块级元素 none隐藏
css的浮动属性：float：left向左浮动 right向右浮动 none不浮动 clear：left right both
盒子模型：
2.简单的JavaScript
引入方式：<script type="text/javascript">...</> 外部引入<script src="URL" type="text/javascript"></>
javascrip基础：定义变量 var 变量名=值 未用var声明的为全局变量 alert（）弹框
数据类型：number boolean string（转义字符\'） object undefined
扩展知识点：`多行放引` ${省去连接} 很多地方于java相似
运算符：==和=== 前者会自动转换类型 后者不会
函数的使用：
function xxx（）{} 匿名函数function（）{}
事件：事件源：组件 事件：发生的动态 监听器：监听事件 处理方式：函数
DOM对象Document 文档对象模型
具体使用方法参考day03_javascript
在隔行换色案例中 使用匿名对象时 函数内所使用的对象必须在函数中有 不要搞混了 this可以解决使用当前对象的问题
正则表达式
辅助正则表达式后可以使用函数test对内容进行测试 看是否可以匹配
BOM对象：
基本弹框：alert 确认框：window.confirm("xxx") 输入框：window.prompt("xxx")
定时框：window.setTimeout( function ,3000(s)) 周期框：window.setInterval( function ,3000s)
取消周期框：window.clearInterval 跳转框Location.href("URL")
前端过时框架： bootstrap JQuery
bootstrap概述：基于html、css、jq的前端框架 基于JQuery
响应式布局：根据不同终端 响应不同效果 电脑和手机端的显示效果不同
栅栏系统
bootstrap提供的一些组件根据代码来修改可以获取想要达到的效果
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 9 <title>Template</title> 10 11 <!-- Bootstrap --> 12 <link href="../css/bootstrap.min.css" rel="stylesheet"> 13 <link href="../css/bootstrap-theme.min.css" rel="stylesheet"> 14 15 </head> 16 17 <body> 18 19 <div class="container"> 20 <nav class="navbar navbar-inverse"> 21 <div class="container-fluid"> 22 <!-- Brand and toggle get grouped for better mobile display --> 23 <div class="navbar-header"> 24 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 25 <!--<span class="sr-only">Toggle navigation</span>--> 26 <span class="icon-bar"></span> 27 <span class="icon-bar"></span> 28 <span class="icon-bar"></span> 29 </button> 30 <a class="navbar-brand" href="#">首页</a> 31 </div> 32 33 <!-- Collect the nav links, forms, and other content for toggling --> 34 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 35 <ul class="nav navbar-nav"> 36 <li class=> 37 <a href="#">电脑办公</a> 38 </li> 39 <li> 40 <a href="#">鞋包箱帽</a> 41 </li> 42 <li> 43 <a href="#">母婴健康</a> 44 </li> 45 <li> 46 <a href="#">锅碗瓢盆</a> 47 </li> 48 49 50 <li class="dropdown"> 51 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 优惠券 <span class="caret"></span></a> 52 <ul class="dropdown-menu"> 53 <li> 54 <a href="#">满100-50</a> 55 </li> 56 <li> 57 <a href="#">满200-150</a> 58 </li> 59 <li> 60 <a href="#">满500-250</a> 61 </li> 62 <li role="separator" class="divider"></li> 63 <li> 64 <a href="#">Separated link</a> 65 </li> 66 <li role="separator" class="divider"></li> 67 <li> 68 <a href="#">One more separated link</a> 69 </li> 70 </ul> 71 </li> 72 </ul> 73 <form class="navbar-form navbar-right"> 74 <div class="form-group"> 75 <input type="text" class="form-control" placeholder="粽子"> 76 </div> 77 <button type="submit" class="btn btn-default">搜索</button> 78 </form> 79 80 </div> 81 <!-- /.navbar-collapse --> 82 </div> 83 <!-- /.container-fluid --> 84 </nav> 85 </div> 86 87 <script src="../js/jquery-1.11.3.min.js"></script> 88 <script src="../js/bootstrap.min.js"></script> 89 </body> 90 91 </html>
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 9 <title>Template</title> 10 11 <!-- Bootstrap --> 12 <link href="../css/bootstrap.min.css" rel="stylesheet"> 13 <link href="../css/bootstrap-theme.min.css" rel="stylesheet"> 14 15 </head> 16 17 <body> 18 19 <div class="container"> 20 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 21 <!-- Indicators --> 22 <ol class="carousel-indicators"> 23 <li data-target="#carousel-example-generic" data-slide-to="0" ></li> 24 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 25 <li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li> 26 </ol> 27 28 <!-- Wrapper for slides --> 29 <div class="carousel-inner" role="listbox"> 30 <div class="item active"> 31 <img src="../img/1.jpg" alt="..."> 32 33 </div> 34 <div class="item"> 35 <img src="../img/2.jpg" alt="..."> 36 37 </div> 38 <div class="item "> 39 <img src="../img/3.jpg" alt="..."> 40 41 </div> 42 </div> 43 44 <!-- Controls --> 45 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 46 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 47 48 </a> 49 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 50 <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> 51 52 </a> 53 </div> 54 </div> 55 56 <script src="../js/jquery-1.11.3.min.js"></script> 57 <script src="../js/bootstrap.min.js"></script> 58 </body>
JQuery框架基础
概述：JavaScript的框架 简化了JavaScript代码做特效更方便简洁
核心语法： $() 相当于window.onload（）
和JavaScript的转换只需要var x=$x[0] 本质上是数组
根据类获取 . 根据id获取使用 # 可以通过标签名获标签
可以筛选出符合的条件的标签：
$("标签获取[筛选条件 prop^=xxx]") ^：开头包含 $：结尾包含 *：包含 [][]：多条件筛选
并列获得标签使用，隔开
层级： A .B A>.B A+.B A~.B 同级所有：A.sibings(b)
过滤：xxx:first/last取第一个/最后一个 xxx:not($())取反 xxx:even/odd偶数/单数 xxx:gt/eq/lt大于/等于/小于
绑定事件可以$("x").click()
修改标签的css属性：$("div [xx=xx]").css(key , value).css(key ,value );
dom操做：文本操作html（）、text（）、val（）
属性操作attr（一个参数获取，两个参数修改）、prop（这里是变化的值selected）
append（追加子节点）、prepend（在最前面添加子节点）、remove（移除子节点）、empty（清空子节点）
绑定多个事件：on
jQuery插件的使用
Validata的使用可以约束表单
使用方法 可以使用各种插件 这里的表单约束validata 中有用到日期约束
使用日期类需要了解该api的使用比如点击后才会显示的日期选择 加onclik点击事件处理函数Wdatepicker（）
浙公网安备 33010602011771号