JavaWeb总结
HTML
字体标签
<!-- 字体标签 需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸) color 属性修改颜色 face 属性修改字体 size 属性修改文本大小 --> <font color="blue">早安，jerry</font><br> <font color="red" face="宋体" size="7">我是字体标签</font> <br>
标题标签
<!-- 标题标签 需求 1：演示标题 1 到 标题 6 的 h1 - h6 都是标题标签 h1 最大 h6 最小 align 属性是对齐属性 left 左对齐(默认) center 剧中 right 右对齐 --> <h1 align="left">标题 1</h1> <h2 align="center">标题 2</h2> <h3 align="right">标题 3</h3> <h4>标题 4</h4> <h5>标题 5</h5> <h6>标题 6</h6> <h7>标题 7</h7>
超链接标签
<!-- a 标签是 超链接 href 属性设置连接的地址 target 属性设置哪个目标进行跳转 _self 表示当前页面(默认值) _blank 表示打开新页面来进行跳转 --> <br> <a href="http://localhost:8080">百度</a><br/> <a href="http://localhost:8080" target="_self">百度_self</a><br/> <a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
表格标签
<!--需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 table 标签是表格标签 border 设置表格标签 width 设置表格宽度 height 设置表格高度 align 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距 tr 是行标签 th 是表头标签 td 是单元格标签 align 设置单元格文本对齐方式 b 是加粗标签 colspan 属性设置跨列 rowspan 属性设置跨行 --> <table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table>
ifarme内联标签
<!--ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面 ifarme 和 a 标签组合使用的步骤: 1 在 iframe 标签中使用 name 属性定义一个名称 2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值 --> <iframe src="1_hellohtml.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> <li><a href="1.font 标签.html" target="abc">1.font 标签.html</a></li> <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul>
form表单标签
<!--需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。 隐藏域，自我评价（多行文本域）。重置，提交。--> <!-- form 标签就是表单 input type=text 是文件输入框 value 设置默认显示内容 input type=password 是密码输入框 value 设置默认显示内容 input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中 input type=checkbox 是复选框 checked="checked"表示默认选中 input type=reset 是重置按钮 value 属性修改按钮上的文本 input type=submit 是提交按钮 value 属性修改按钮上的文本 input type=button 是按钮 value 属性修改按钮上的文本 input type=file 是文件上传域 input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的 时候同时发送给服务器） select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中 textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度 --> <form> 用户名称：<input type="text" value="默认值"/><br/> 用户密码：<input type="password" value="abc"/><br/> 确认密码：<input type="password" value="abc"/><br/> 性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/> 兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input type="checkbox" />C++<br/> 国籍：<select> <option>--请选择国籍--</option> <option selected="selected">中国</option> <option>美国</option> <option>小日本</option> </select><br/> 自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/> <input type="reset" value="abc" /> <input type="submit"/> </form>
form表单提交细节
<!-- form 标签是表单标签 action 属性设置提交的服务器地址 method 属性设置提交的方式 GET(默认值)或 POST 表单提交的时候，数据没有发送给服务器的三种情况： 1、表单项没有 name 属性值 2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器 3、表单项不在提交的 form 标签中 GET 请求的特点是： 1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value 2、不安全 3、它有数据长度的限制 POST 请求的特点是： 1、浏览器地址栏中只有 action 属性值 2、相对于 GET 请求要安全 3、理论上没有数据长度的限制 --> <form action="http://localhost:8080" method="post"> <input type="hidden" name="action" value="login" /> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td> 用户名称：</td> <td> <input type="text" name="username" value="默认值"/> </td> </tr> <tr> <td> 用户密码：</td> <td><input type="password" name="password" value="abc"/></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" value="boy"/>男 <input type="radio" name="sex" checked="checked" value="girl" />女 </td> </tr> <tr> <td> 兴趣爱好：</td> <td> <input name="hobby" type="checkbox" checked="checked" value="java"/>Java <input name="hobby" type="checkbox" value="js"/>JavaScript <input name="hobby" type="checkbox" value="cpp"/>C++ </td> </tr> <tr> <td>国籍：</td> <td> <select name="country"> <option value="none">--请选择国籍--</option> <option value="cn" selected="selected">中国</option> <option value="usa">美国</option> <option value="jp">小日本</option> </select> </td> </tr> <tr> <td>自我评价：</td> <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td> </tr> <tr> <td><input type="reset" /></td> <td align="center"><input type="submit"/></td> </tr> </table> </form>
CSS
CSS样式
<!--方式一：直接写在body里--> <!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。--> <div style="border: 1px solid red;">div 标签 1</div> <div style="border: 1px solid red;">div 标签 2</div> <span style="border: 1px solid red;">span 标签 1</span> <span style="border: 1px solid red;">span 标签 2</span>
<!-- 方式二：写在style里--> <!--style 标签专门用来定义 css 样式代码--> <style type="text/css"> /* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/ div{ border: 1px solid red; } span{ border: 1px solid red; } </style>
<!--方式三：外部引用--> <link rel="stylesheet" type="text/css" href="1.css"/>
CSS 选择器
标签名选择器
标签名选择器的格式是： 标签名{ 属性：值; }
<style type="text/css"> div{ border: 1px solid yellow; color: blue; font-size: 30px; } span{ border: 5px dashed blue; color: yellow; font-size: 20px; } </style>
id 选择器
id 选择器的格式是： #id 属性值{ 属性：值; }
<style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted ; } </style> <div id="id002">div 标签 1</div> <div id="id001">div 标签 2</div>
class 选择器（类选择器）
class 类型选择器的格式是： .class 属性值{ 属性：值; }
<style type="text/css"> .class01{ color: blue; font-size: 30px; border: 1px solid yellow; } .class02{ color: grey; font-size: 26px; border: 1px solid red; } </style> <div class="class01">div 标签 class01</div> <div class="class02">div 标签</div> <span class="class01">span 标签 class01</span>
组合选择器
组合选择器的格式是： 选择器 1，选择器 2，选择器 n{ 属性：值; }
<style type="text/css"> .class01 , #id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style>
JavaScript
特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码
<script type="text/javascript"> // alert 是 JavaScript 语言提供的一个警告框函数。 // 它可以接收任意类型的参数，这个参数就是警告框的提示信息 alert("hello javaScript!"); </script>
使用 script 标签引入 单独的 JavaScript 代码文件
<!--现在需要使用 script 引入外部的 js 文件来执行 src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径） script 标签可以用来定义 js 代码，也可以用来引入 js 文件 但是，两个功能二选一使用。不能同时使用两个功能 --> <script type="text/javascript" src="1.js"></script>
关系（比较）运算
等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
逻辑运算
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用
0 、null、 undefined、””(空串) 都认为是 false；
/* && 且运算。 有两种情况： 第一种：当表达式全为真的时候。返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值 || 或运算 第一种情况：当表达式全为假时，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值 并且 && 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行 */
函数
function 关键字
使用的格式如下:
function 函数名(形参列表){ 函数体 }
在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可
函数的第二种定义方式，格式如下：
var 函数名 = function(形参列表) { 函数体 }
Object 形式的自定义对象
<script type="text/javascript"> // 对象的定义： // var 变量名 = new Object(); // 对象实例（空对象） // 变量名.属性名 = 值; // 定义一个属性 // 变量名.函数名 = function(){} // 定义一个函数 var obj = new Object(); obj.name = "华仔"; obj.age = 18; obj.fun = function () { alert("姓名：" + this.name + " , 年龄：" + this.age); } // 对象的访问： // 变量名.属性 / 函数名(); // alert( obj.age ); obj.fun(); </script>
{}花括号形式的自定义对象
对象的定义： var 变量名 = { // 空对象 属性名：值, // 定义一个属性 属性名：值, // 定义一个属性 函数名：function(){} // 定义一个函数 }; var obj = { name:"华仔", age:18, fun : function () { alert("姓名：" + this.name + " , 年龄：" + this.age); } }; 对象的访问： 变量名.属性 / 函数名(); alert(obj.name); obj.fun();
事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
onload 加载完成事件
<script type="text/javascript"> // 静态注册 onload 事件 // onload 事件是浏览器解析完页面之后就会自动触发的事件 // <body οnlοad="onloadFun();"> // onload 事件的方法 function onloadFun() { alert('静态注册 onload 事件，所有代码'); } // onload 事件动态注册。是固定写法 window.onload = function () { alert("动态注册的 onload 事件"); } </script>
onclick 单击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onclickFun() { alert("静态注册 onclick 事件"); } // 动态注册 onclick 事件 window.onload = function () { // 1 获取标签对象 /* * document 是 JavaScript 语言提供的一个对象（文档）<br/> * get 获取 * Element 元素（就是标签） * By 通过。。 由。。经。。。 * Id id 属性 * * getElementById 通过 id 属性获取标签对象 **/ var btnObj = document.getElementById("btn01"); // alert( btnObj ); // 2 通过标签对象.事件名 = function(){} btnObj.onclick = function () { alert("动态注册的 onclick 事件"); } } </script> </head> <body> <!--静态注册 onClick 事件--> <button onclick="onclickFun();">按钮 1</button> <button id="btn01">按钮 2</button> </body> </html>
onblur 失去焦点事件
<script type="text/javascript"> // 静态注册失去焦点事件 function onblurFun() { // console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用 // log() 是打印的方法 console.log("静态注册失去焦点事件"); } // 动态注册 onblur 事件 window.onload = function () { //1 获取标签对象 var passwordObj = document.getElementById("password"); // alert(passwordObj); //2 通过标签对象.事件名 = function(){}; passwordObj.onblur = function () { console.log("动态注册失去焦点事件"); } } </script> </head> <body> 用户名:<input type="text" οnblur="onblurFun();"><br/> 密码:<input id="password" type="text" ><br/> </body>
onchange 内容发生改变事件
<script type="text/javascript"> function onchangeFun() { alert("女神已经改变了"); } window.onload = function () { //1 获取标签对象 var selObj = document.getElementById("sel01"); // alert( selObj ); //2 通过标签对象.事件名 = function(){} selObj.onchange = function () { alert("男神已经改变了"); } } </script>
onsubmit 表单提交事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" > // 静态注册表单提交事务 function onsubmitFun(){ // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交 alert("静态注册表单提交事件----发现不合法"); return flase; } window.onload = function () { //1 获取标签对象 var formObj = document.getElementById("form01"); //2 通过标签对象.事件名 = function(){} formObj.onsubmit = function () { // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交 alert("动态注册表单提交事件----发现不合法"); return false; } } </script> </head> <body> <!--return false 可以阻止 表单提交 --> <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();"> <input type="submit" value="静态注册"/> </form> <form action="http://localhost:8080" id="form01"> <input type="submit" value="动态注册"/> </form> </body> </html>
DOM 模型
DOM 全称是 Document Object Model 文档对象模型
Document 对象的理解：
第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签 都 对象化
第四点：我们可以通过 document 访问所有的标签对象。
Document 对象中的方法
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
<script type="text/javascript"> // 全选 function checkAll() { // document.getElementsByTagName("input"); // 是按照指定标签名来进行查询并返回集合 // 这个集合的操作跟数组 一样 // 集合中都是 dom 对象 // 集合中元素顺序 是他们在 html 页面中从上到下的顺序。 var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++){ inputs[i].checked = true; } } </script>
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
<script type="text/javascript"> // 全选 function checkAll() { // document.getElementsByTagName("input"); // 是按照指定标签名来进行查询并返回集合 // 这个集合的操作跟数组 一样 // 集合中都是 dom 对象 // 集合中元素顺序 是他们在 html 页面中从上到下的顺序。 var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++){ inputs[i].checked = true; } } </script>
document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
<script type="text/javascript"> window.onload = function () { // 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上 // 标签的内容就是：<div>我爱你</div> var divObj = document.createElement("div"); // 在内存中 <div></div> var textNodeObj = document.createTextNode("我爱你"); // 有一个文本节点对象 #我爱你 divObj.appendChild(textNodeObj); // <div>我爱你</div> // divObj.innerHTML = "我爱你";//不会显示在浏览器上 // <div>我爱你</div>,但，还只是在内存中 // 添加子元素 document.body.appendChild(divObj); } </script>
注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
DOM查询练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dom 查询</title> <link rel="stylesheet" type="text/css" href="style/css.css"/> <script type="text/javascript"> window.onload = function () { //1.查找#bj 节 document.getElementById("btn01").onclick = function (){ var bjObj = document.getElementById("bj") alert(bjObj.innerText); } //2.查找所有 li 节 document.getElementById("btn02").onclick = function (){ var liTag= document.getElementsByTagName("li") alert(liTag.length) } //3.查找 name=gender 的所有节 document.getElementById("btn03").onclick = function (){ var genderLen = document.getElementsByName("gender") alert(genderLen.length) } //4.查找#city 下所有 li 节点 document.getElementById("btn04").onclick = function (){ var liChild = document.getElementById("city").getElementsByTagName("li"); alert(liChild.length) } //5.返回#city 的所有子节 document.getElementById("btn05").onclick = function (){ alert(document.getElementById("city").childNodes.length) } //6.返回#phone 的第一个子节 document.getElementById("btn06").onclick = function (){ alert(document.getElementById("phone").firstChild.innerHTML) } //7.返回#bj 的父节点 document.getElementById("btn07").onclick = function (){ alert(document.getElementById("bj").parentNode.innerHTML) } //8.返回#android 的前一个兄弟节点 document.getElementById("btn08").onclick = function (){ alert(document.getElementById("android").previousSibling.innerHTML) } //9.读取#username 的 value 属性值 document.getElementById("btn09").onclick = function (){ alert(document.getElementById("username").value) } //10.设置#username 的 value 属性值 document.getElementById("btn10").onclick = function (){ alert( document.getElementById("username").value="hello") } //11.返回#bj 的文本值 document.getElementById("btn11").onclick = function (){ alert(document.getElementById("bj").innerText) } } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p> 你喜欢哪款单机游戏? </p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br/> <br/> <p> 你手机的操作系统是? </p> <ul id="phone"> <li>IOS</li> <li id="android">Android</li> <li>Windows Phone</li> </ul> </div> <div class="inner"> gender: <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="female"/> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde"/> </div> </div> <div id="btnList"> <div> <button id="btn01">查找#bj 节点</button> </div> <div> <button id="btn02">查找所有 li 节点</button> </div> <div> <button id="btn03">查找 name=gender 的所有节点</button> </div> <div> <button id="btn04">查找#city 下所有 li 节点</button> </div> <div> <button id="btn05">返回#city 的所有子节点</button> </div> <div> <button id="btn06">返回#phone 的第一个子节点</button> </div> <div> <button id="btn07">返回#bj 的父节点</button> </div> <div> <button id="btn08">返回#android 的前一个兄弟节点</button> </div> <div> <button id="btn09">返回#username 的 value 属性值</button> </div> <div> <button id="btn10">设置#username 的 value 属性值</button> </div> <div> <button id="btn11">返回#bj 的文本值</button> </div> </div> </body> </html>
