JavaWeb学习路线（总结⾃尚硅⾕雷神SSM极其详细思路清晰适合⼊门总复
习）
⽂章⽬录
JavaWeb
前⾔
该博⽂只会对每个技术点知识点做最宽泛的总结，想要熟练掌握还需⾃⼰⽤功学习
说明
Java web中最核⼼的思想就是B/S的交互，即浏览器与服务器的交互
前端技术
html（掌握）
html称为超⽂本标记语⾔（HyperText Mark-up Language），浏览器是HTML⽂件的解释器，对⼤⼩写不敏感这⾥说明⼀下html与jsp的执⾏者
在web服务器中，html⽂件将直接返回给浏览器执⾏
⽽jsp⽂件是由web服务器执⾏，将执⾏⽣成的结果返回给浏览器
1.标签
普通标签
<p></p><!--段落元素-->jquery在线免费学习
<a href=""name=""></a><!--超链接元素-->
<h1></h1><!--标题元素-->
<br><!--换⾏元素-->
<img src=""alt=""/><!--图⽚标记，src所放的位置，alt是⿏标放在图⽚上所显⽰的⽂字-->
 <!--空格，如果想要很多空格就必须使⽤这个，在编辑时⽤键盘打出空格会在浏览器⾃动保留为⼀个-->重要标签
<table>表格</table><tr>⾏</tr><td>表元</td><th>表头（标题）</th>等等
<form action="表单提交的位置"method="发送请求的⽅式(get/post)"
enctype="⽂件上传(有默认表单提交⽅式的取值，当我们要⽂件上传时要⽤multipart/form-data)">
表单
<input type=""/><!--  input标签的type属性有很多很多，可以查⽂档  -->
<select multiple>
<option value="">选项</option>
</select>
<textarea></textarea><!--  可以设置⾏数跟列数  -->
</form>
<script>写脚本的地⽅</sctipt>
<link>引⼊css样式</link>
<style>编写样式</style>
当标签遗忘⽤法时，记得去什么地⽅查⽂档就好
css（了解）
1.简介
css是“层叠样式表单”，是⼀种标记性语⾔
作⽤：
B/S开发中，B端的三要素为：结构（HTML）-表现（CSS）-⾏为（Javascript）
2.常⽤样式定义
语法实例：
选择器：{
样式名：样式值;
样式名：样式值;
样式名：样式值;
}
#subBtn{
color:red;
}......
同样知道去那⾥查询就好。
JavaScript（掌握）
1.简介
JS是⼀个脚本语⾔。
2.基本语法
2.1声明变量
var关键字="asdasd";
var关键字⽆类型之分
2.2声明对象
var obj ={
username:"xxx",
name:"xxx",
age:xxx
};
//输出
alert(obj.username);
/
/往⾥⾯添属性
2.3声明⽅法
//第⼀种声明
function⽅法名(){
⽅法体;
};
//第⼆种声明
var⽅法名=function(){
⽅法体;
};
/
/调⽤
⽅法名.();
3.事件
⽤户和浏览器交互的⾏为
//调⽤慢，但保险
//当调⽤两次时，第⼆次⾥⾯的内容有效，相当于值覆盖的操作load=function(){
⽂档加载完成(页⾯⾥⾯的所有内容全部显⽰成功);
};
//调⽤快
$(function(){
也称之为⽂档加载完成(dom准备就绪);
});
常⽤事件：如何给⼀个事件绑定标签
<a href="hello"id="aaa">你好</a>
var aaa = ElementById("aaa");
alert("你好");
//这是取消默认⾏为（例如取消点击a标签的跳转页⾯⾏为）return false;
};)
其他事件，每个对象的属性同样去查询⽂档就好JQuery（精通）
1.简介
JQuery（第三⽅js库）就是为了简化JavaScript的开发
2.选择器（是⼀串特殊的字符串）
在掌握选择器时建议把⽂档⾥⾯的所有选择器都做⼀遍
这⾥只演⽰⼏个最重要的选择器
//基本选择器
#id:$("#btn01")//到⼀个id为btn01的元素
element:$("a")//到所有a标签
.class:$(".big")//到所有class为big的元素
*:$("*")//到所有元素
selector1.selector2.selectorN:$("#btn01","a",".big"......)
//到id为btn01的元素和class为big元素和所有a标签
//层级选择器
ancestor descendant://后代
parent > child://⼦元素
$("a > #btn01")//到a标签下id为btn01的⼦元素
prev + next://下⼀个兄弟
$("#btn01 + .big")//到id为btn01的下⼀个class为big的同级元素
prev ~ siblings://到所有同辈兄弟
$("#deleBtn01 ~ a")//到id为deleBtn01元素的所有兄弟元素，但是必须是a标签
//⽐较重要的选择器
:first  :last  :eq(index)
$("a:first")//到第⼀个a标签
$(":first")//到⽂档第⼀个标签即为<html>
$("a :first")//到a的第⼀个后代元素
$("a > :first")//到a的第⼀个⼦元素
$("#btn01 > a:eq(1)")//到btn01下的第⼆个a标签
:empty  [attribute][attribute=value]
$("a:empty")//到所有没有标签体的标签即标签⾥⾯没有任何内容
$("a[id]")//有id属性的所有a标签
$("a[id=btn01]")//到id为btn01的a  等同于$("btn01")
:checked  //到所有选中的（复选框、单选框等，不包括select中的option）
:selected  //匹配所有选中的option元素
//⽐较重要的⽅法选择器
//⼦元素和后代元素的区别请⼤家留⼼注意
find(expr|obj|ele):$("div").find(".big")//到div后代所有class为big的标签
children([expr]):$("div").children(".big")//到div下所有class为big的⼦元素
parent([expr]):$("#div01").parent(".big")//到id为div01的⽗元素，⽽且⽗元素的class为big
parents([expr]):$("#div01").parent(".big")//到class为big的祖先元素
3.⽂档的增删改
append()//在被选元素的标签体结尾插⼊内容可以链式添加
a.append(b)//a⾥⾯加b
<p id="p01">张三</p>$("#p01').append("<a href='hello'>Hello</a>")
结果：<p id="p01">张三<a href='hello'>Hello</a></p>
appendTo()//将前⾯的添加到后⾯的元素⾥⾯去
$("<a href='hello'>Hello</a>").apppendTo($("#p01"))
prepend()-在被选元素的开头插⼊内容
只要这些选择器或⽅法返回的还是jQuery对象（返回最开始调⽤者本⾝的jQuery）就是能使⽤链式调⽤，没有讲到的看⽂档就好4.属性操作
获取⼀个元素的属性值，⽂本内容等等
<form>
<input id="01" name="username">
</form>
<a href="hello"><h1>Hello</h1></a>
attr()设置或返回被选元素的属性/值⾃定义属性的获取和设置推荐⽤attr
$("#01").attr("username");//返回username的值
$("#01").attr("username","张三")//设置username的值
$("a:first").attr("lalala")
prop()设置或返回被选元素的属性/值  prop获取也设置不了⾃定义的值，获取标签原本⾃⼰的属性推荐⽤prop  ⽐如获取checked的属性，返回是true\false更加直观⼀点
$("#01").prop("username");//返回username的值
html()设置或返回被选元素的内容
$("a").html()//获取标签体内的值结果为：<h1>Hello</h1>
$("a").html("<x>...</x>")//结果会根据<x>标签的具体功能来显⽰，加粗就是加粗效果
text()设置或返回被选元素的⽂本内容
$("a").text()//获取标签体内的值结果为：hello
$("a").text("<x>...</x>")//结果会是<x>...</x>
val()设置或返回被选元素的属性值（针对表单元素）
5.事件
jQuery 是为事件处理特别设计的。
遇到不会的查询⽂档就好
6.核⼼函数
$:
作⽤：
dom和jQuery相互转换就是为了调⽤各⾃的⽅法
传⼊参数为[函数]时 $(functiion(){}) 相当于 load = function(){}
选择器 $(“选择器”) $("#btn01")
传⼊参数为[html字符串]时，创建html元素（jQuery对象）
var btn01 = ElementById("btn01");//这是dom对象
将dom对象转为jQuery对象：
$(btn01).append()
将jQuery对象转为dom对象：
$(btn01)[0];
XML（了解）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。