jQuery+Ajax+Bootstrap学习干货（二）

来源：互联网发布：网速限制软件编辑：程序博客网时间：2024/06/07 01:49

这里对jQuery中的一些实际运用的例子再进行讲解一下，然后再简单的说一下关于Ajax这个方面的应用，还有一个前端框架Bootstrap的使用！！！都比较基础，想了解的可以进行更深入的学习哦！！

jQuery的实例运用

（1）jQuery实现下拉列表选项

<title>下拉列表左右选择</title><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script>$(function(){/*1.选中单击去右边*/$("#selectOneToRight").click(function(){$("#left option:selected").appendTo($("#right"));});/*2.单击全部去右边*/$("#selectAllToRight").click(function(){$("#left option").appendTo($("#right"));});/*3.选中双击去右边*/$("#left option").dblclick(function(){$("#left option:selected").appendTo($("#right"));});});</script>

<body><table border="1" width="600" align="center"><tr><td>分类名称</td><td><input type="text" name="cname" value="手机数码"/></td></tr><tr><td>分类描述</td><td><textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea></td></tr><tr><td>分类商品</td><td><span style="float: left;"><font color="green" face="宋体">已有商品</font><br/><select multiple="multiple" style="width: 100px;height: 200px;" id="left"><option>IPhone6s</option><option>小米4</option><option>锤子T2</option></select><p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p><p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p></span><span style="float: right;"><font color="red" face="宋体">未有商品</font><br/><select multiple="multiple" style="width: 100px;height: 200px;" id="right"><option>三星Note3</option><option>华为6s</option></select><p><a href="#" ><<</a></p><p><a href="#" ><<<</a></p></span></td></tr><tr><td colspan="2"><input type='submit' value="修改"/></td></tr></table></body>

（2）jQuery实现表单验证（重要，这个需要掌握下规则）

案例1：validate入门

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><!--validate.js是建立在jquery之上的，所以得先导入jquery的类库--><script type="text/javascript" src="../../js/jquery.validate.min.js" ></script><!--引入国际化js文件--><script type="text/javascript" src="../../js/messages_zh.js" ></script><script>$(function(){$("#checkForm").validate({rules:{username:{required:true,minlength:6},password:{required:true,digits:true,minlength:6}},messages:{username:{required:"用户名不能为空!",minlength:"用户名不得少于6位！"},password:{required:"密码不能为空!",digits:"密码必须是整数!",minlength:"密码不得少于6位!"}}});});</script></head><body><form action="#" id="checkForm">用户名：<input type="text" name="username" /><br />密码：<input type="password" name="password"/><br /><input type="submit"/></form></body>

案例2：实现表单内容的验证（其中的出生日期和验证码没有进行验证，这两个需要特别的进行处理）

<script>$(function(){$("#registForm").validate({rules:{user:{required:true,minlength:3},password:{required:true,digits:true,minlength:6},repassword:{required:true,equalTo:"[name='password']"},email:{required:true,email:true},username:{required:true,maxlength:5},sex:{required:true}},messages:{user:{required:"用户名不能为空!",minlength:"用户名不得少于3位!"},password:{required:"密码不能为空!",digits:"密码必须是整数!",minlength:"密码不得少于6位!"},repassword:{required:"确认密码不能为空!",equalTo:"两次输入密码不一致!"},email:{required:"邮箱不能为空!",email:"邮箱格式不正确!"},username:{required:"姓名不能为空!",maxlength:"姓名不得多于5位!"},sex:{required:"性别必须勾选!"}},errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是labelsuccess: function(label) { //验证成功后的执行的回调函数//label指向上面那个错误提示信息标签labellabel.text(" ") //清空错误提示消息.addClass("success"); //加上自定义的success类}});});</script>

<form action="#" method="get" id="registForm"><div id="father"><div id="form2"><table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"><tr><td colspan="2" >          <font size="5">会员注册</font>   USER REGISTER </td></tr><tr><td width="180px">               <label for="user" >用户名</label></td><td><em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/></td></tr><tr><td>               密码</td><td><em style="color: red;">*</em>   <input type="password"  name="password" size="35px" id="password" /></td></tr><tr><td>               确认密码</td><td><em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/></td></tr><tr><td>               Email</td><td><em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/></td></tr><tr><td>   姓名</td><td><em style="color: red;">*</em>   <input type="text" name="username" size="35px"/></td></tr><tr><td>               性别</td><td><span style="margin-right: 155px;"><em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女<em></em><label for="sex" class="error" style="display: none;"></label></span></td></tr><tr><td>出生日期</td><td><em style="color: red;">*</em>   <input type="text" name="birthday"  size="35px"/></td></tr><tr><td>   验证码</td><td><em style="color: red;">*</em>   <input type="text" name="yanzhengma" /><img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/></td></tr><tr><td colspan="2">            <input type="submit" value="注      册" height="50px"/></td></tr></table></div></div></form>

Ajax知识点：

（1）：原生JS调用例子

<script type="text/javascript"> function fn1(){ //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象 var xmlHttp = new XMLHttpRequest(); //2、绑定监听 ---- 监听服务器是否已经返回相应数据 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ //5、接受相应数据 var res = xmlHttp.responseText; document.getElementById("span1").innerHTML = res; } } //3、绑定地址 xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true); //true为异步 //4、发送请求 xmlHttp.send(); } function fn2(){ //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象var xmlHttp = new XMLHttpRequest(); //2、绑定监听 ---- 监听服务器是否已经返回相应数据 xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState==4&&xmlHttp.status==200){ //5、接受相应数据 var res = xmlHttp.responseText; document.getElementById("span2").innerHTML = res; } } //3、绑定地址 xmlHttp.open("POST","/WEB22/ajaxServlet",false); //false为同步 //4、发送请求 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.send("name=wangwu"); } </script>

<body><input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span><br><input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span><br><input type="button" value="测试按钮" onclick="alert()"></body>

原生的方法大概就是上面的五个步骤，然后可以看到异步和同步之间的区别，这是首先要明白的内容

（2）GET 和 POST 和 jQuery结合aJax进行的使用

<script type="text/javascript"> function fn1(){ //get异步访问$.get( "/WEB22/ajaxServlet2", //url地址 {"name":"张三","age":25}, //请求参数function(data){ //执行成功后的回调函数 //{\"name\":\"tom\",\"age\":21} alert(data.name); }, "json" ); } function fn2(){ //post异步访问 $.post( "/WEB22/ajaxServlet2", //url地址 {"name":"李四","age":25}, //请求参数 function(data){ //执行成功后的回调函数 alert(data.name); }, "json" ); } function fn3(){ $.ajax({ url:"/WEB22/ajaxServlet2", async:true, type:"POST", data:{"name":"lucy","age":18}, success:function(data){ alert(data.name); }, error:function(){ alert("请求失败"); }, dataType:"json" }); } </script>

<body><input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span><br><input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span><br><input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span><br></body></html>

（3）实例：用aJax使用360搜索的jsonp接口，然后当输入内容的时候，能够进行响应的反馈搜索内容（就是类似百度这样的）

<script type="text/javascript">//实现一个简易版的搜索框事件$(function () {$('.inputkey').keyup(function() {var values = $('.inputkey').val();//用ajax请求公开的接口数据//该例子功能：通过360的一个搜索jsonp接口，然后当输入c的时候，获取360网页搜素框弹出来的内容$.ajax({url:'http://sug.so.360.cn/suggest?',type:'GET',dataType:'jsonp',data:{ word : values}           //这是设置一下关键字})//当请求成功执行下面：.done(function(data) {$('.list').empty();//将请求到的数据显示出来,jQuery知识中的添加节点for(var i =0 ; i <data.s.length ; i++){var $li = $('<li>'+data.s[i]+'</li>');$li.appendTo($('.list'));}})//请求失败执行下面：.fail(function() {alert("fail");})})})</script>

<body><input type="text" id ="inputkey" class="inputkey"><ul class="list" id="list"></ul></body>

(4)Ajax提交form表单

$.post("<%=basePath%>customer/update.action",$("#edit_customer_form").serialize(),function(data){alert("客户信息更新成功！");window.location.reload();});

备注：参数1：访问地址

参数2：需要传送的表单，并进行序列化

参数3：访问成功后，返回处理函数

Bootstrap知识点：

（1）实例：响应式改变页面布局（随不同屏幕尺寸进行改变）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Bootstrap</title></head><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link><style type="text/css">body {background-color: #e8fcfd;}.pic {max-width: 200px;border: 1px solid red;height: 200px;margin: 15px auto;background-color: yellow;}.picture {}</style><script type="text/javascript">$(function() {$('#dis').children().click(function() {alert($(this).index());return false;})})</script><body><div class="container"><div class="row" id="dis"><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">个人信息修改</div></div><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">密码修改</div></div><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">功能三</div></div><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">功能四</div></div><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">功能五</div></div><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">功能六</div></div><div class="col-log-3 col-md-4 col-sm-6"><div class="pic" id="di">功能七</div></div></div></div></body></html>

总结：其中主要就是属性class ="container" 和class="col-log-N" 其中这个需要符合12的倍数才行，否则布局会存在问题。比如上面的例子，大家应该就能看出来关系。然后其中这个参数可以为col-lg-N ,,col-md-N,,,,,,,,col-sm-N,,,,,col-xs-N （含义就是对于不同的尺寸屏幕进行适配）

（2）关于Bootstrap中的主要内容，用下面的这个例子来进行演示，大家可以运行看看

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width , user-scalable=no , initial-scale=1.0 ,maximum-scale=1.0, minimum-scale=1.0"  ><title>Bootstrap</title></head><script type="text/javascript" src = "js/jquery-1.12.4.min.js"></script><script type="text/javascript" src = "js/bootstrap.min.js"></script><link rel="stylesheet" href = "css/bootstrap.min.css" type="text/css"></link><style type="text/css">hr{color: green;}body{ background-color: #e8fcfd;}.pic{max-width: 200px;border: 1px solid red;height: 200px;margin: 15px auto;background-color: yellow;}.navbar-default .navbar-nav>li>a {    color: #ff0000;}.fclass{width: 500px;background-color: #f5f5f5;}.zclass{width:20px;background-color: blue;text-align: center;}.val{color: white;}</style><script type="text/javascript">$(function () {$('#dis').children().click(function() {alert($(this).index());return false;})//JS控制模态框$('#btn1').click(function() {$('#modal01').modal('show');});//进度条的控制var timer = null;  //计时器$('.fclass').click(function() {alert("开始加载，请稍后!");//每500毫秒一次timer = setInterval(jindutiaomove , 500);$('.fclass').unbind("click");//移除点击事件，防止多次点击})//进度条的控制function jindutiaomove() {//获取进度当前的数值var con = $('#val').text();//得到当前的进度var sub =parseInt(con.substring(0,con.length-1));//进度+1sub = sub + 1;//判断是否等于或超过100%,表示完成if(sub == 100){//隐藏标签$('.fclass').hide();alert("加载成功");//让进度条消失//定时器关闭clearInterval(timer);return ;}//否则设置显示内容$('#val').html(sub+"%"); var wid = parseInt($('.zclass').width());//因为父div标签有500的宽wid = wid + 5;if(wid > 20){//设置css内容，来表示进度条再变化$('.zclass').css({width:wid});}}})</script><body><!-- 巨幕效果 --><div class="jumbotron"><div class="container"><h1>欢迎访问</h1><p>欢迎正文</p></div></div><!-- 导航条的制作 --><div class="navbar navbar-default navbar-static-top"><div class="container"><!-- 导航头 --><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse"data-target="#togglemenu"><span class="icon-bar"></span> <span class="icon-bar"></span> <spanclass="icon-bar"></span></button><a href="#" class="navbar-brand">CSAPP</a></div><!-- 制订导航栏菜单内容 --><div class="collapse navbar-collapse" id="togglemenu"><ul class="nav navbar-nav "><li class="active"><a href="#" class="changecolor">首页</a></li><li><a href="#" class="changecolor">个人信息修改</a></li><li><a href="#" class="changecolor">密码修改</a></li><li><a href="#" class="changecolor">其他功能1</a></li><li><a href="#" class="changecolor">其他功能2</a></li><li><a href="#" class="changecolor">其他功能3</a></li><li><a href="#" class="changecolor">其他功能4</a></li><li><a href="#">其他功能5</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><div class="input-group"><input type="text" name="" class="form-control"> <spanclass="input-group-btn"><button class="btn btn-default"><span class="glyphicon glyphicon-search"></span>搜索</button></span></div></div></form></div></div></div><!--栅格系统 --><div class="container"><div class="row" id="dis"><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">个人信息修改</div></div><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">密码修改</div></div><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能三</div></div><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能四</div></div><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能五</div></div><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能六</div></div><div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能七</div></div></div></div><!-- 具有按钮的样式使用 --><button class="btn btn-success">我是Button</button><a class = "btn btn-warning" href="#">我是带有button效果的超链</a><button class="btn btn-info btn-block">我是满屏的按钮</button><button class="btn btn-danger btn-lg">我是变大的按钮</button><button class="btn btn-danger btn-sm">我是中等的按钮</button><button class="btn btn-danger btn-xs">我是最小的按钮</button><br><hr><!-- 按钮组的使用，就是将多个按钮设置为一组 ,也可以调整大小，通过btn-group-lg和sm和xs--><div class="btn-group btn-group-sm"><button class="btn btn-info ">我是按钮1</button><button class="btn btn-default ">我是按钮2</button><button class="btn btn-danger ">我是按钮3</button></div><br><hr><!-- 占满屏的按钮组 --><div class="btn-group btn-group-justified"><div class="btn-group"><button class="btn btn-info ">我是按钮1</button></div><div class="btn-group"><button class="btn btn-default ">我是按钮2</button></div><div class="btn-group"><button class="btn btn-danger ">我是按钮3</button></div></div><br><hr><!-- 表单的样式 --><form action="hello.html" method="post"><div class="form-group"><label for="exampleInputEmail1">Email address</label> <inputtype="email" class="form-control" id="exampleInputEmail1"placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label> <inputtype="password" class="form-control" id="exampleInputPassword1"placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label> <input type="file"id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label> <input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form><br><br><hr style="color: black;"><!-- 按钮带图标 --><button class="btn btn-success"><span class="glyphicon glyphicon-music"></span>音乐</button><!-- 多种模态框的使用 --><div class="container"><h1>模态框</h1><button class="btn btn-success" id="btn1">js控制弹出</button><button class="btn btn-primary" data-toggle="modal" data-target="#modal01">大摸态框</button><button class="btn btn-primary" data-toggle="modal" data-target="#modal02">一般摸态框</button><button class="btn btn-primary" data-toggle="modal" data-target="#modal03">小摸态框</button></div><!--大模态框 --><div class="modal fade" id="modal01"><div class="modal-dialog modal-lg"> <!-- 在这里设置大小就可以了 --><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>弹框的标题</div><div class="modal-body">弹框主体<br><br>主体文字</div><div class="modal-footer"><button class="btn btn-primary">确定</button><button class="btn btn-warning" data-dismiss="modal">取消</button></div></div></div></div><!--中等模态框 --><div class="modal fade" id="modal02"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">弹框的标题</div><div class="modal-body">弹框主体</div><div class="modal-footer"><button class="btn btn-primary">确定</button><button class="btn btn-warning" data-dismiss="modal">取消</button></div></div></div></div><!-- 小模态框 --><div class="modal fade" id="modal03"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header">弹框的标题</div><div class="modal-body">弹框主体</div><div class="modal-footer"><button class="btn btn-primary">确定</button><button class="btn btn-warning" data-dismiss="modal">取消</button></div></div></div></div><!-- 自己用jquery写的进度条 --><div class ="fclass"><div class="zclass"><p id="val" class ="val">0%</p></div></div><!-- Bootstrop自带的进度条 (静态的，自己可以根据我上面写的进行变化就可以了)--><div class="progress"><div class="progress-bar progress-bar-striped active"role="progressbar" aria-valuenow="45" aria-valuemin="0"aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div></div></body></html>

大家如果对Bootstrap中的内容很感兴趣，可以直接百度Bootstrap中文网官网，里面有很多的例子，可以进行参考

（3）会持续进行更新哦！！！！！！！！！

阅读全文

1 0