这里对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插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.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="异步访问服务器端" οnclick="fn1()">
<span id="span1"></span>
<br>
<input type="button" value="同步访问服务器端" οnclick="fn2()">
<span id="span2"></span>
<br>
<input type="button" value="测试按钮" οnclick="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访问服务器端" οnclick="fn1()">
<span id="span1"></span>
<br>
<input type="button" value="post访问服务器端" οnclick="fn2()">
<span id="span2"></span>
<br>
<input type="button" value="ajax访问服务器端" οnclick="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));
//进度+1
sub = 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> <span
class="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"> <span
class="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> <input
type="email" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label> <input
type="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）会持续进行更新哦！！！！！！！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/12445.html
