常用标签
分类 | |
---|---|
显示标签 | 文本 font、label 图片 img 声音 audio 视频 video |
输入标签 | inputtext\password\radio\file\checkbox\button\reset\submit\image\date\number\color select option textarea |
布局标签 | br ul/li ol/li table p div hr |
功能标签 | a form |
页面框架 | iframe |
盒子模型
常用样式
3D样式
transform: rotate(90deg) scale(2.0) translate(100px,-200px);
自定义动画
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义动画*/
@keyframes wahaha{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#myImg{
width: 200px;
height: 200px;
border-radius: 50%;
animation: wahaha 3s linear infinite;
}
</style>
</head>
<body>
<img src="img/a.png" id="myImg"/>
</body>
</html>
基础语法
内置对象(String\Math\RegExp\Date\Array\ global
)
BOM对象(window\screen\navigator\location\history\document)
DOM对象—document
节点:标签、属性、文本
节点种类 | nodeType | nodeName | nodeValue |
---|---|---|---|
标签 | 1 | 标签名 | null |
属性 | 2 | 属性名 | 属性值 |
文本 | 3 | #text | 文本值 |
选择节点
document.getElementById();
document.getElementsByName();
document.getElementsByClassName();
document.getElementsByTagName("img");
创建节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function test4(){
var cts = ["北京","上海","广州","深圳","大武汉"];
var selectTag = document.getElementById("city");
for(var i=0; i<cts.length; i++){
var optionTag = document.createElement("option"); //<option></option>
optionTag.innerHTML = cts[i]; //<option>北京</option>
optionTag.value = cts[i]; //<option value="北京">北京</option>
selectTag.appendChild(optionTag);
}
}
</script>
</head>
<body>
<select id="city"></select>
<hr>
<button onclick="test4()">测试4</button>
</body>
</html>
添加子节点
删除节点
替换节点
前端提交数据到服务端的方式:同步和异步
同步
异步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UsO0JpoR-1594747800840)(imgs/1594609040990.png)]
jQuery就是一个js函数库,为我们提供简便的HTML操作、属性操作、样式操作、事件处理、动画实现、ajax交互等Javascript操作
jQuery设计宗旨:write less,do more
在网页中使用一个JS的函数库
npm安装
离线下载使用:
官网下载: https://jquery.com/
将js文件拷贝到项目中
在html文件引用jQuery.js文件
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
使用CDN(Content Delivery NetWork)
ID选择器:根据id获取HTML文档中的某一个元素
标签选择器:获取到当前文档中所有指定的标签元素
class选择器:根据class属性值获取HTML文档的元素
ID选择器 | $("#ID属性值") |
---|---|
标签选择器 | $(“标签名”) |
class选择器 | $(".class属性值") |
多个选择器的组合关系
说明 | |
---|---|
selector1,selector2 | 获取selector1和selector2并集 |
selector1 selector2 | 获取selector1选择元素下的所有符合selector2的元素(父标签 后代标签) |
selector1>selector2 | 获取selector1选择元素下的子标签中符合 selector2的元素(父标签 子标签) |
selector1+selector2 | 获取紧挨着selector1元素的selector2的元素 |
selector1~selector2 | 获取selector1元素后面的所有同级的selector2的元素 |
:first | $(“tr:first”) 获取第一个tr元素 |
:last | $(“tr:last”) 获取最后一个tr元素 |
:eq(index) | $(“tr:eq(index)”) 先获取所有的tr,再过滤指定索引的某一个tr |
:gt(index) | $(“tr:gt(index)”) 获取所有tr中大于指定索引的tr |
:lt(index) | $(“tr:lt(index)”) 获取所有tr中小于指定索引的tr |
:even | $(“tr:even”) 获取所有tr中索引为偶数的tr(奇数行) |
:odd | $(“tr:odd”) 获取所有tr中索引为奇数的tr(偶数行) |
[attrName 运算符 attrValue] | 从选择器选择的元素中,过滤满足[]指定的属性条件的元素 |
:hidden | (“img:hidden”) 获取HTML文档中所有隐藏的img |
:visible | (“img:visible”) 获取HTML文档中所有可见的img |
:input | ("#form1 :input") 获取指定表单中的所有的input元素 |
:text | |
:password | |
:radio | |
:checkbox |
根据选择器选择的元素再进行条件的筛选
$(“selector”).first()
事件:就是在html文档中发生的例如鼠标点击、键盘输入等动作
$(selector).action(fn);
使用jQuery改变元素的属性/获取元素的属性值
//获取元素的value属性值
var v = $(selector).val();
//设置元素的value属性值
$(selector).val(v);
//获取其他属性值
var v = $(selector).attr("attrName");
//设置其他属性值
$(selector).attr("attrName","attrValue");
//移除某个属性
$(selector).removeAttr("attrName");
//添加css样式
$(selector).addClass("css style name");
//移除css样式
$(selector).removeClass("css style name");
//取反css样式
$(selector).toggleClass("css style name");
<div id="div1" style="width: 200px; height: 100px; border: 1px solid green;"></div>
<button id="btn6">设置div标签中的内容</button>
$("#btn6").click(function(){
//$("#div1").text("<label style='color:red;text-shadow:green 3px 3px 3px'>从前有座山</label>");
$("#div1").html("<label style='color:red;text-shadow:green 3px 3px 3px'>从前有座山</label>");
//var v = $("#div1").text();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="width: 300px; height: 300px; border: 2px solid deepskyblue; overflow: scroll;
position: absolute; left: 200px; top: 100px; border-radius: 50%;">
<img src="img/e.jpg" />
</div>
<button id="btn1">获取偏移数据</button>
<button id="btn2">获取滚动条偏移数据</button>
<button id="btn3">获取样式值</button>
<button id="btn4">设置样式值</button>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//设置滚动偏移
$("#div1").scrollLeft(353);
$("#div1").scrollTop(210);
});
$("#btn1").click(function(){
var p = $("#div1").position();
alert(p.left +"*"+p.top);
});
$("#btn2").click(function(){
//获取div的横向滚动偏移
var sleft = $("#div1").scrollLeft();
//获取div纵向滚动偏移
var stop = $("#div1").scrollTop();
alert(sleft +"*"+stop);
});
$("#btn3").click(function(){
var left = $("#div1").css("left");
var br = $("#div1").css("borderRadius");
alert(left + "*"+br);
});
$("#btn4").click(function(){
$("#div1").css("left","600px");
$("#div1").css("borderRadius","20px");
});
</script>
</html>
jQuery效果:对元素显示和隐藏的效果
<div id="div1" style="width: 100px; height: 100px; background: red;"></div>
<button id="btn1">测试hide()</button>
<button id="btn2">测试show()</button>
<button id="btn3">测试toggle()</button>
$("#btn1").click(function(){
$("#div1").hide();
});
$("#btn2").click(function(){
$("#div1").show();
});
$("#btn3").click(function(){
$("#div1").toggle();
});
<div id="div2" style="width: 100px; height: 100px; background: blue;"></div>
<button id="btn4">测试slideDown()</button>
<button id="btn5">测试slideUp()</button>
<button id="btn6">测试slideToggle()</button>
$("#btn4").click(function(){
$("#div2").slideDown();
});
$("#btn5").click(function(){
$("#div2").slideUp();
});
$("#btn6").click(function(){
$("#div2").slideToggle();
});
<div id="div3" style="width: 100px; height: 100px; background: green;"></div>
<button id="btn7">测试fadeIn-显示</button>
<button id="btn8">测试fadeOut()-隐藏</button>
<button id="btn9">测试fadeToggle()</button>
<button id="btn10">测试fadeTo()</button>
$("#btn7").click(function(){
$("#div3").fadeIn(3000);
});
$("#btn8").click(function(){
$("#div3").fadeOut(3000);
});
$("#btn9").click(function(){
$("#div3").fadeToggle();
});
$("#btn10").click(function(){
$("#div3").fadeTo(2000,0.3);
});
效果函数可以有三个参数
- speed 效果完成的时间 (“slow”,“normal”,“fast”)或者 毫秒数
- easing 默认“swing” 可选“linear”
- fn 效果完成之后的回调函数
//$("#div2").slideUp();
//$("#div2").slideUp(3000);
//$("#div2").slideUp("fast");
//$("#div2").slideUp(function(){
// alert("隐藏完毕");
//});
//$("#div2").slideUp(3000,function(){
// alert("隐藏完毕");
//});
$("#div2").slideUp(3000,"linear",function(){
alert("隐藏完毕");
});
<div id="div4" style="width: 30px; height: 30px; background: purple; border-radius:50% ;
position: relative; top: 0px; left: 0px;"></div>
<button id="btn11">测试animate</button>
<button id="btn12">测试stop</button>
$("#btn11").click(function(){
//移动
$("#div4").animate({left:"100px",top:"0px"},1000);
$("#div4").animate({left:"100px",top:"100px"},1000);
$("#div4").animate({left:"0px",top:"100px"},1000);
$("#div4").animate({left:"0px",top:"0px"},1000);
});
$("#btn12").click(function(){
$("#div4").stop();
});
DOM操作就是对HTML文档中元素的操作
- 操作元素的属性和样式
- 节点操作
parent.append(child、HTMLstring) 在当前父节点中拼接新的子节点(在原有的内容的后面拼接)
$("#div1").append("<img src='img/a.jpg' width='30' />");
$("#div1").append( $("#zlyImg"));
child.appendTo(parent) 将child节点作为子节点拼接的parent中(在原有的内容的后面拼接)
$("#zlyImg").appendTo( "#div1");
$("#zlyImg").appendTo( $("#div1"));
parent.prepend(child) 在当前父节点中拼接新的子节点(在原有的内容的前面插入节点)
$("#div1").prepend("<img src='img/a.jpg' width='30' />");
$("#div1").prepend( $("#zlyImg"));
child.prependTo(parent) 将child节点作为子节点拼接的parent中(在原有的内容的前面插入节点)
$("#zlyImg").prependTo( "#div1");
$("#zlyImg").prependTo( $("#div1"));
案例:验证用户名是否可用
创建用于响应ajax请求的ResultVO
public class ResultVO {
private int code; // 0 表示成功 ; 1 表示失败
private String msg; // 返回给前端的提示信息
private Object data; // 返回给前端携带的数据
}
创建一个用于将Java对象转换成JSON的帮助类
public class JSONUtil {
public String toJsonString(Object obj) throws Exception {
StringBuilder builder = new StringBuilder("{");
Class c = obj.getClass();
Field[] fs = c.getDeclaredFields();
for (int i=0 ; i<fs.length ; i++) {
Field f = fs[i];
String name = f.getName(); //code
String methodName = "get"+name.substring(0,1).toUpperCase()+name.substring(1); // getCode
Method m = c.getDeclaredMethod(methodName); // 获取当前属性的get方法
Object value = m.invoke(obj);
builder.append("\""+name+"\":"+ (f.getType().toString().equals("class java.lang.String")?"\""+value+"\"":value ));
if(i<fs.length-1){
builder.append(",");
}else{
builder.append("}");
}
}
return builder.toString();
}
}
创建用于接收ajax请求并进行响应的的servlet类
@WebServlet("/checkname")
public class CheckUsernameServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String username = request.getParameter("username");
ResultVO vo = null;
if(username.startsWith("admin") || username.length()<8 || username.length()>20 ){
//用户名不可用
vo = new ResultVO(1,"用户名已经被占用!");
}else{
//用户名可用
vo = new ResultVO(0,"用户名可用!");
}
//将vo转换成JSON格式字符串
String jsonstr = new JSONUtil().toJsonString(vo);
//将json字符串通过输出流响应给请求者
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonstr);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
Javascript实现ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="userName"/><label></label>
<button onclick="checkUsername()">检查用户名是否可用</button>
</body>
<script type="text/javascript">
var ajaxReq;
function checkUsername(){
//1.创建ajax请求对象
if(window.XMLHttpRequest){
ajaxReq = new XMLHttpRequest();
}else{
alert("请更换更新版本的浏览器...");
}
//0 请求对象已经创建,但是没有进行初始化
//1 完成初始化,但未与服务器建立连接
//2 请求已经达到服务器,但未获得相应
//3 ajax请求与服务器进行通信
//4 服务器相应完成
//2.封装请求数据
var username = document.getElementById("userName").value;
var url = "http://localhost:8080/webserver_war_exploded/checkname?username="+username;
ajaxReq.open("GET",url,true);
//3.指定回调函数
ajaxReq.onreadystatechange = callback;
//4.发送请求
ajaxReq.send(null);
}
function callback(){
if(ajaxReq.readyState == 4 && ajaxReq.status==200){
var str = ajaxReq.responseText;
alert(str);
}
}
</script>
</html>
跨域:发送请求的客户端与接收请求的服务端不在同一个应用服务器(ip或者port不一样)
//设置允许跨域
response.setHeader("Access-Control-Allow-Origin","*"); //设置允许跨域
response.setHeader("Access-Control-Allow-Methods","*"); //设置允许多种请求方式
response.setHeader("Access-Control-Max-Age","3600"); //设置跨域缓存的最大时间
response.setHeader("Access-Control-Allow-Headers","*"); //设置允许携带header
response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie
在ajax的回调函数中处理结果
function callback(){
if(ajaxReq.readyState == 4 && ajaxReq.status==200){
var str = ajaxReq.responseText;
var obj = eval("("+str+")");
console.log(obj);
document.getElementById("tips").innerHTML = obj.msg;
if(obj.code == 0){
document.getElementById("tips").style.color="green";
}else{
document.getElementById("tips").style.color="red";
}
}
}
var url = "http://localhost:8080/webserver_war_exploded/checkname?username="+$("#userName").val();
$.get(url,function(res){
$("#tips").html(res.msg);
if(res.code==0){
$("#tips").css("color","green");
}else{
$("#tips").css("color","red");
}
});
var url = "http://localhost:8080/webserver_war_exploded/checkname";
$.post(url,{username:$("#userName").val()},function(res){
$("#tips").html(res.msg);
if(res.code==0){
$("#tips").css("color","green");
}else{
$("#tips").css("color","red");
}
},"json");
$.ajax({
url:"http://localhost:8080/webserver_war_exploded/checkname",
type:"post",
data:{username:$("#userName").val()},
headers:{
},
beforeSend:function(){
},
success:function(res){
//回调函数:当服务器成功相应之后,执行此函数
$("#tips").html(res.msg);
if(res.code==0){
$("#tips").css("color","green");
}else{
$("#tips").css("color","red");
}
},
error:function(){
},
complete:function(){
}
});
mysql> create database db_pca;
Query OK, 1 row affected (0.00 sec)
mysql> use db_pca;
Database changed
mysql> create table tb_provinces(
-> pid int primary key auto_increment,
-> pname varchar(50) not null
-> )charset=utf8;
Query OK, 0 rows affected (0.02 sec)
mysql> create table tb_cities(
-> cid int primary key auto_increment,
-> cname varchar(50) not null,
-> pid int,
-> constraint fk_cp foreign key(pid) references tb_provinces(pid)
-> )charset=utf8;
Query OK, 0 rows affected (0.01 sec)
mysql> create table tb_areas(
-> aid int primary key auto_increment,
-> aname varchar(100) not null,
-> cid int,
-> constraint fk_ac foreign key(cid) references tb_cities(cid)
-> )charset=utf8;
Query OK, 0 rows affected (0.02 sec)
导入数据库驱动
创建实体类
public class Province {
private int pid;
private String pname;
}
public class City {
private int cid;
private String cname;
}
创建帮助类
public class DBUtil {
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/db_pca";
private static final String USERNAME = "root";
private static final String PASSWORD = "admin123";
private static ThreadLocal<Connection> local = new ThreadLocal<>();
static {
try {
Class.forName(DRIVER);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection() {
Connection connection = local.get();
try {
if (connection == null) {
connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);
local.set(connection);
}
} catch (SQLException e) {
e.printStackTrace();
}
return connection;
}
//自行完成关闭连接
}
DAO完成查询操作
public class ProvinceDAO {
private Connection conn;
private PreparedStatement psmt;
private ResultSet rs;
public List<Province> listProvinces() {
List<Province> pros = new ArrayList<>();
try {
conn = DBUtil.getConnection();
String sql = "select * from tb_provinces";
psmt = conn.prepareStatement(sql);
rs = psmt.executeQuery();
while(rs.next()){
int pid = rs.getInt("pid");
String pname = rs.getString("pname");
Province p = new Province(pid,pname);
pros.add(p);
}
} catch (SQLException e) {
e.printStackTrace();
}
return pros;
}
}
public class CityDAO {
private Connection conn;
private PreparedStatement psmt;
private ResultSet rs;
public List<City> listCitiesByPid(int pid){
List<City> cities = new ArrayList<>();
try {
conn = DBUtil.getConnection();
String sql = "select * from tb_cities where pid = ?";
psmt = conn.prepareStatement(sql);
psmt.setInt(1,pid);
rs = psmt.executeQuery();
while(rs.next()){
int cid = rs.getInt("cid");
String cname = rs.getString("cname");
City city = new City(cid,cname);
cities.add(city);
}
} catch (SQLException e) {
e.printStackTrace();
}
return cities;
}
}
创建服务接口
public interface ProvinceService {
public List<Province> listProvinces();
}
public interface CityService {
public List<City> listCities(int pid);
}
创建服务实现类
public class ProvinceServiceImpl implements ProvinceService {
private ProvinceDAO provinceDAO = new ProvinceDAO();
@Override
public List<Province> listProvinces() {
return provinceDAO.listProvinces();
}
}
public class CityServiceImpl implements CityService {
private CityDAO cityDAO = new CityDAO();
@Override
public List<City> listCities(int pid) {
return cityDAO.listCitiesByPid(pid);
}
}
创建用于封装ajax响应数据的ResultVO
public class ResultVO {
private int code;
private String msg;
private Object data;
}
创建ListProvincesServlet,返回省份信息
@WebServlet("/ListProvincesServlet")
public class ListProvincesServlet extends HttpServlet {
private ProvinceService provinceService = new ProvinceServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.查询省份信息
List<Province> provinces = provinceService.listProvinces();
//2.将省份信息封装到vo中
ResultVO vo = new ResultVO(0,"success",provinces);
//3.将vo转换成JSON格式
String jsonstr = new Gson().toJson(vo);
response.setHeader("Access-Control-Allow-Origin","*"); //设置允许跨域
response.setHeader("Access-Control-Allow-Methods","*"); //设置允许多种请求方式
response.setHeader("Access-Control-Max-Age","3600"); //设置跨域缓存的最大时间
response.setHeader("Access-Control-Allow-Headers","*"); //设置允许携带header
response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonstr);
out.flush();
out.close();
}
}
创建ListCitiesByPidServlet,返回城市信息
@WebServlet("/ListCitiesByPidServlet")
public class ListCitiesByPidServlet extends HttpServlet {
private CityService cityService = new CityServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String pid1 = request.getParameter("pid");
int pid = pid1!=null?Integer.parseInt(pid1):1;
List<City> cities = cityService.listCities(pid);
ResultVO vo = new ResultVO(0,"success",cities);
String jsonstr = new Gson().toJson(vo);
response.setHeader("Access-Control-Allow-Origin","*"); //设置允许跨域
response.setHeader("Access-Control-Allow-Methods","*"); //设置允许多种请求方式
response.setHeader("Access-Control-Max-Age","3600"); //设置跨域缓存的最大时间
response.setHeader("Access-Control-Allow-Headers","*"); //设置允许携带header
response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonstr);
out.flush();
out.close();
}
}
jQuery实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width: 120px;
height: 25px;
border:1px lightgray solid;
border-radius: 3px;
color: gray;
}
</style>
</head>
<body>
<select id="province">
<option value="0">-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
<select id="area">
<option>-请选择-</option>
</select>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$.get("http://localhost:8080/pca/ListProvincesServlet",function(res){
if(res.code == 0){
var arr = res.data;
for(var i=0; i<arr.length; i++){
var optionStr = "<option value='"+arr[i].pid+"'>"+arr[i].pname+"</option>";
$("#province").append(optionStr);
}
}
});
});
$("#province").change(function(){
var provinceId = $("#province").val();
$("#city").html("<option value='0'>-请选择-</option>");
if(provinceId != "0"){
$.post("http://localhost:8080/pca/ListCitiesByPidServlet",{pid:provinceId},function(res){
var arr = res.data;
for(var i=0; i<arr.length; i++){
var optionStr = "<option value='"+arr[i].cid+"'>"+arr[i].cname+"</option>";
$("#city").append(optionStr);
}
});
}
});
</script>
</html>
ect id=“city”>
-请选择-
-请选择-
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$.get("http://localhost:8080/pca/ListProvincesServlet",function(res){
if(res.code == 0){
var arr = res.data;
for(var i=0; i<arr.length; i++){
var optionStr = "<option value='"+arr[i].pid+"'>"+arr[i].pname+"</option>";
$("#province").append(optionStr);
}
}
});
});
$("#province").change(function(){
var provinceId = $("#province").val();
$("#city").html("<option value='0'>-请选择-</option>");
if(provinceId != "0"){
$.post("http://localhost:8080/pca/ListCitiesByPidServlet",{pid:provinceId},function(res){
var arr = res.data;
for(var i=0; i<arr.length; i++){
var optionStr = "<option value='"+arr[i].cid+"'>"+arr[i].cname+"</option>";
$("#city").append(optionStr);
}
});
}
});
</script>
本文地址:https://blog.csdn.net/qq_40298175/article/details/107351756
如对本文有疑问, 点击进行留言回复!!
XSS训练网站XSS Challenges所有题目解(中篇)
如何给未越狱的ios下载历史版本的app?未越狱IOS系统安装历史版本软件的方法,iPhone未越狱的手机如何安装旧版本APP?
网友评论