一、AJAX
1.jQuery和ajax
1.1load
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <button id="btn">按钮</button> <div id="box"></div> <script> /* * * load(url,callback) * * url:需要加载的资源,地址或者相对路径 * callback:加载完成之后的响应函数 * */ /*$("#btn").click(function(){ $("#box").load("red.html"); })*/ $("#btn").click(function(){ //reponseText,status,XMLHttPRequst 加载到的数据,加载之后的状态,加载之后的信息 //三个只是一个形参,可以是任意的标识符,默认参数会自动赋值 $("#box").load("red.html",function(reponseText,status,XMLHttPRequst){ console.log(reponseText); console.log(status); console.log(XMLHttPRequst); }); }) </script> </body> </html>
1.2 . g e t ( ) 和 .get()和 .get()和.post()
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="text" id="username" /><br /> <input type="text" id="content" /><br /> <input type="button" id="btn" value="提交" /> <div id="responseText"></div> </form> <script> /* * $.get(url,data,callback,type) * urL:请求的服务器的地址 * data:发送给服务器的数据,通过key:value形式传递 * callback:请求成功之后的回调函数【服务器的响应数据】,回调函数中有默认参数 * type:预判服务器的数据类型,可写可不写,jQuery会自动判断 */ $("#btn").click(function(){ $.get("http://10.20.152.27/get1.php",{username:$("#username").val(),content:$("#content").val()},function(data,status){ //$("#responseText").html(data); //解析json数据\ //$jsonStr = json_encode($dataArray); 编码 var result = JSON.parse(data); //解码,得到的结果为一个数组 /* * * if(!empty($_GET['username']) && !empty($_GET['content'])){ $username = $_GET['username']; $content = $_GET['content']; $dataArray = array("username"=>$username,"content"=>$content); $jsonStr = json_encode($dataArray); echo $jsonStr; } * */ //获取数组中的字段,数组对象.字段名 $("#responseText").html("用户名:" + result.username + "内容:" + result.content); }); }) /* */ </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="text" id="username" /><br /> <input type="text" id="content" /><br /> <input type="button" id="btn" value="提交" /> <div id="responseText"></div> </form> <script> /* * $.post(url,data,callback,type) * urL:请求的服务器的地址 * data:发送给服务器的数据,通过key:value形式传递 * callback:请求成功之后的回调函数【服务器的响应数据】,回调函数中有默认参数 * type:预判服务器的数据类型,可写可不写,jQuery会自动判断 */ $("#btn").click(function(){ $.post("http://10.20.152.27/post1.php",{username:$("#username").val(),content:$("#content").val()},function(data,status){ var result = JSON.parse(data); $("#responseText").html("用户名:" + result.username + "内容:" + result.content); }); }) </script> </body> </html>
1.3$.getScript()
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 200px; height: 200px; background-color: red; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <button id="btn">修改</button> <div id="box"></div> <script> /* * getScript(url,callback),在操作html的同时出发加载js文件的操作,提高工作效率 * * 类似于load() * * 如果加载外部的js文件,一般有两种用法: * a.先加载js文件,然后再使用 * b.先加载html标签,后再加载js文件【js中操作了html标签】 */ $("#btn").click(function(){ $.getScript("js/alert.js",function(){ $("#btn").click(function(){ $("#box").css("background-color","blue"); }) }) }) </script> </body> </html>
1.4$.ajax()
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="text" id="username" /><br /> <input type="text" id="content" /><br /> <input type="button" id="btn" value="提交" /> <div id="responseText"></div> </form> <script> /* * $.ajax()综合了get和post的功能 * * $.ajax(options) * options:请求设置,格式为key:value的形式,既可以发送请求,也可以接受服务器返回的操作 * 包括请求方式,请求的服务器的地址,发送的数据,请求你成功之后的回调函数 * */ $(function(){ $("#btn").click(function(){ $.ajax({ type:"post", url:"http://10.20.152.27/post1.php", data:{username:$("#username").val(),content:$("#content").val()}, success:function(data,status){ var result = JSON.parse(data); //解码,得到的结果为一个数组 //获取数组中的字段,数组对象.字段名 $("#responseText").html("用户名:" + result.username + "内容:" + result.content); } }); }) }) </script> </body> </html>
二、Bootstrap
1.基础使用
代码演示:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>重置浏览器大小查效果。</p> <p> 在移动设备上,即屏幕宽度小于 576px 时,四个列将会上下堆叠排版。</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>
2.栅格系统【网格系统】
代码演示:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>重置浏览器大小查效果。</p> <p> 在移动设备上,即屏幕宽度小于 576px 时,四个列将会上下堆叠排版。</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>