jQuery&BootStrap

最新推荐文章于 2023-07-25 15:29:45 发布

weixin_44322364

最新推荐文章于 2023-07-25 15:29:45 发布

阅读量467

点赞数

分类专栏：前端基础添加到右侧添加到左侧文章标签： jq选择器 jQuery bootStrap 表单校验 trigger

本文链接：https://blog.csdn.net/weixin_44322364/article/details/92801566

版权

前端基础同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

添加到右侧

1 篇文章 0 订阅

订阅专栏

添加到左侧

1 篇文章 0 订阅

订阅专栏

传统使用JQ完成下拉列表左右选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				//添加到右侧
				document.getElementById("addRight").onclick = function(){
					//获得左侧的下拉列表
					var selectleft =document.getElementById("selectleft");
					//遍历左侧列表中的所有的option元素
					for(var i=selectleft.options.length -1; i>=0;i-- ){
						//判断该元素是否被选中
						if(selectleft.options[i].selected == true){
							document.getElementById("selectRight").appendChild(selectleft.options[i]);
						}
					}
				}
				//全部到右侧
				document.getElementById("addAll").onclick = function(){
					//获得左侧的下拉列表
					var selectleft =document.getElementById("selectleft");
					//遍历左侧列表中的所有的option元素
					for(var i=selectleft.options.length -1; i>=0;i-- ){
						//判断该元素是否被选中
							document.getElementById("selectRight").appendChild(selectleft.options[i]);
					}
				}
			}
		</script>
	</head>
	<body>
		<form>
		<table border="1" width="500" align="center">
			<tr>
				<td>分类名称：</td>
				<td><input type="text" name="cname" value="手机数码"></td>
			</tr>
			<tr>
				<td>分类描述：</td>
				<td><textarea name="cdesc" cols="20" rows="4">手机数码</textarea></td>
			</tr>
			<tr>
			<td>分类商品</td>
			<td>
				<samp style="float: left;">
				已有的商品<br/>
				<select multiple="multiple" id="selectleft">
					<option>IPhone</option>
					<option>三星</option>
					<option>小米</option>
					<option>华为</option>
				</select>
				<p id="addRight">&gt;&gt;</p>
				<p id="addAll">&gt;&gt;&gt;</p>
				</samp>
				<samp style="float: right;">
				未有的商品<br/>
				<select id="selectRight" multiple="multiple">
					<option>HTC</option>
					<option>锤子</option>
				</select>
				<p id="removeLeft">&lt;&lt;</p>
				<p id="removeAll">&lt;&lt;&lt;</p>
				</samp>
			</td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="确定"></td>
			</tr>
		</table>
		</form>
	</body>
</html>

JQuery的选择器
enabled
disabled
checked
selected

$(function(){
				//添加左侧选中的元素到右侧
				$("#addRight").click(function(){
					$("#selectleft option:selected").appendTo("#selectRight");
				});
				//添加所有到右侧
				$("#addAll").click(function(){
					$("#selectleft option").appendTo("#selectRight");
				});
				//添加右侧选中的元素到左侧
				$("#removeLeft").click(function(){
					$("#selectRight option:selected").appendTo("#selectleft");
				});
				//添加所有到左侧
				$("#removeAll").click(function(){
					$("#selectRight option").appendTo("#selectleft");
				});
				//双击左侧的某个元素，移动到右侧
				$("#selectleft").dblclick(function(){
					$("option:selected",this).appendTo("#selectRight")
				});
				$("#selectRight").dblclick(function(){
					$("option:selected",this).appendTo("#selectleft")
				});
			})

JQ的事件切换：
1.toggle(); --单击事件的切换
2.hover(); --鼠标悬停的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/style.css"/>
		<script src="../../js/jquery-1.8.3.js"></script>
		<script>
			//隔行换色
			$(function(){
				/*$("tr:odd").addClass("odd");
				$("tr:even").addClass("even")*/
				$("tbody tr:odd").addClass("odd");
				$("tbody tr:even").addClass("even");

			});
			//复选框全选和全不选
			$(function(){
				//获得上面的复选框
			//var $selectAll = $("#selectAll")
			
		   /* $selectAll.click(function(){
		    	if($selectAll.prop("checked")==true){
		    		$(":checkbox[name='ids']").prop("checked",true);
		    	}else{
		    		$(":checkbox[name='ids']").prop("checked",false);
		    	}
		      });*/
		     //简化
		      $("#selectAll").click(function(){
		      	$(":checkbox[name='ids']").prop("checked",this.checked);
		      })
			});
			$(function(){
				/*$("tbody tr").toggle(function(){
					$(this).addClass("selected");
				},function(){
					$(this).removeClass("selected");
				});*/
				$("tbody tr").hover(function(){
					$(this).addClass("selected");
				},function(){
					$(this).removeClass("selected");
				});
			});
		</script>
	</head>
		<table id="d1" border="1" width="80%" align="center">
			<thead>
			<tr>
				<td><input type="checkbox" id="selectAll"></td>
				<td>分类管理</td>
				<td>分类名称</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="edit.html">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>2</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>3</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>4</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>5</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>6</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>7</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids"></td>
				<td>8</td>
				<td>手机数码</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>&nbsp&nbsp<a href="">删除</a></td>
			</tr>
			</tbody>
		</table>
</html>

JQuery的事件处理
trigger和triggerHandler区别：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				$("#content").focus(function(){
					$(this).val("Hello");
				});
				$("#but1").click(function(){
					$("#content").trigger("focus");
				});
				$("#but2").click(function(){
					$("#content").triggerHandler("focus");
				})
			})
		</script>
	</head>
	<body>
		<input type="text" id="content"/>
		
		<input type="button" id="but1" value="trigger"/>
		<input type="button" id="but2" value="triggerHandler" />
	</body>
</html>

表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/style2.css" />
		<style>
			div{
				border: 1px solid blue;
			}
			.bodyDiv{
				width: 90%;
				
			}
			.bodyDiv >div{
				width: 100%;
			}
			.logoDiv{
				width: 33%;
				height: 50px;
				float:left;
			}
			.clear{
				clear: both;
			}
			ul li{
				display: inline;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				//定义数组
			var arrs=new Array(3);
			arrs[0]=new Array("石家庄","邢台","邯郸");
			arrs[1]=new Array("安阳","洛阳","郑州");
			arrs[2]=new Array("武汉","襄阳","荆州");
			var $city=$("#city");
				//获得省份的下拉列表
				$("#province").change(function(){
					$city.get(0).options.length=1;
					var val=this.value;
					$.each(arrs, function(i,n) {
						if(i==val){
							$(n).each(function(j,m){
								$city.append("<option>"+m+"</option>")
							})
						}
					});
				})
			});
		</script>
		<script>
			$(function(){
					// 步骤一：为必填项添加一个 *.
				$("form input.required").each(function(){
					// 获得他的父元素：
					$(this).parent().append("<b class='high'> *</b>");
					
				});
				//第二步：获得所有的输入项，为输入项添加一个blur事件
				$("form input").blur(function(){
					//获得该元素的父元素；
					var $parent = $(this).parent();
					// 将原有的信息清除掉.
					$parent.find(".formtips").remove();
					// 确定点击的输入项是谁?
					if($(this).is("#username")){
						//判断用户名是否为空：
						if(this.value==""){
							//向文本框后添加一个错误提示
							$parent.append("<span class='formtips onError'>用户名不能为空</span>")
						}else{
							//向文本框后添加一个正确提示
							$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>")
						}
					}
					
					if($(this).is("#password")){
						//判断用户名是否为空：
						if(this.value==""){
							//向文本框后添加一个错误提示
							$parent.append("<span class='formtips onError'>密码不能为空</span>")
						}else{
							//向文本框后添加一个正确提示
							$parent.append("<span class='formtips onSuccess'>密码输入正确</span>")
						}
					}
				}).keyup(function(){
					$(this).triggerHandler("blur");
				}).focus(function(){
					$(this).triggerHandler("blur");
				});
				//为表单添加一个submit事件
				$("form").submit(function(){
					//执行表单中的blur事件
					$("form :input").trigger("blur");
					//获得错误信息的长度
					var errorLength = $(".onError").length;
					if(errorLength > 0){
						return false;
					}
				})
			})
		</script>
	</head>
	<body>
		<!--整体DIV-->
		<div class="bodyDiv">
            <div>
            	<div class="logoDiv">
            		<img src="../img/logo2.png" height="50"/>
            	</div>
            	<div class="logoDiv">
            		<img src="../img/header.png" height="50"/>
            	</div>
            	<div class="logoDiv" style="margin: top:0px;padding-top:10px;height: 40px;">
            		<a href="">登陆</a>
            		<a href="">注册</a>
            		<a href="">购物车</a>
            	</div>
            	<div class="clear"></div>
            </div>
            <div style="height: 50px;background-color: black;color: white;font-size: 20px;display: block;margin:top:0px;padding-top:10px;">
            	<ul style="display:initial;">
            		<li>首页</li>
            		<li>电脑办公</li>
            		<li>鞋靴箱包</li>
            		<li>手机数码</li>
            		<li>烟酒糖茶</li>
            	</ul>
            </div>
            <div style="height: 500px;background-image:url(../img/regist_bg.jpg) ;">
            	<div style="border:5px solid gray; position: absolute;left: 350px;top: 160px;width: 500px;">
            		<form action="/使用js定时弹出广告/定时弹出广告.html" method="post">
            		<table border="0" width="100%" bgcolor="white" cellspacing="15">
            			
            			<tr>
            				<td>用户名:</td>
            				<td><input type="text" id="username" name="username" class="required"></td>
            			</tr>
            			<tr>
            				<td>&nbsp;&nbsp;&nbsp;密码:</td>
            				<td><input type="password" id="password" name="password" class="required"></span></td>
            			</tr>
            			<tr>
            				<td>确认密码:</td>
            				<td><input type="password" name="password" class="required"></td>
            			</tr>
            			<tr>
							<td>&nbsp;&nbsp;&nbsp;邮箱：</td>
							<td><input type="text" name="emall" /></td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;性别：</td>
							<td>
								<input type="radio" name="sex" value="男" checked="checked"/>男
								<input type="radio" name="sex" value="女"/>女
							</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;爱好：</td>
							<td>
								<input type="checkbox" name="hobby" value="唱歌" checked="checked"/>唱歌
								<input type="checkbox" name="hobby" value="看书"/>看书
								<input type="checkbox" name="hobby" value="运动"/>运动
								<input type="checkbox" name="hobby" value="旅游"/>旅游
							</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;籍贯：</td>
							<td>
								<select id="province" name="province">
									<option value="">---请选择---</option>
									<option value="0">河北</option>
									<option value="1">河南</option>
									<option value="2">湖北</option>
								</select>
							<select id="city" name="city">
								<option>---请选择---</option>
							</select>
							</td>
						</tr>
						<tr align="center">
							<td colspan="2">
								<input type="submit" value="注册" maxlength="6" readonly="readonly" />
								<input type="reset" value="重置" />
							</td>
						</tr>
						
            		</table>
            		</form>
            	</div>
            </div>
            <div>
            	<img src="../img/footer.jpg" width="90%"/>
            </div>
			<div>
				<center>
					<a href="">关于我们 </a>
					<a href="">联系我们 </a>
					<a href="">招贤纳士 </a>
					<a href="">法律声明 </a>
					<a href="">友情链接</a>
					<a href="">支付方式 </a>
					<a href="">配送方式</a>
					<a href="">服务声明</a>
					<a href="">广告声明</a>
				</center>
			</div>
		</div>
	</body>
</html>

Bootstrap概述
什么是Bootstrap
bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简介灵活，使的WEB开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它既是由动态CSS语言Less写成。Bootsrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC的Breaking News都使用了该项项目。国内一些移动开发者较为熟悉点的框架。如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来的。
Bootstrap可以在那些地方使用：
Bootstrap设计出响应式页面，由它设计页面可以在手机、PAD、PC都可以直接访问
Bootsrap的使用：
下载BootStrap:
网址：http：//www.bootcss.com
引入的文件
在这里插入图片描述
添加一个标签：

BootStrap的全局Css
bootStrap的框架提供了一些列的CSS的样式，这些样式可以直接使用
1.布局容器

2.栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义，还有强大的mixin用于生成更具语义的布局。
使用.row样式定义栅格的行
定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--根据设备宽度，调整跳转缩放比例-->
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>BootStrap的栅格系统</title>
	</head>
	<!--引入BootStrap的CSS-->
	<link rel="stylesheet"  href="../../css/bootstrap.min.css"/>
	<link rel="stylesheet" href="../../css/bootstrap-theme.min.css" />
    <!--引入JS-->
    <script type="application/javascript" src="../../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
     <style>
     	div{
     		border:1px solid #bbffaa;
     	}
     </style>
   <body>
   	<!--栅格布局-->
   	   <div>
   	   	<div class="row">
   	   		<div class="col-md-3 col-sm-6 col-xs-12" >
   	   			<h1>关于我们</h1>
   	   		</div>
   	   		<div class="col-md-3 col-sm-6 col-xs-12">
   	   			<h1>友情链接</h1>
   	   		</div>
   	   		<div class="col-md-3 col-sm-6 col-xs-12">
   	   			<h1>社会动态</h1>
   	   		</div>
   	   		<div class="col-md-3 col-sm-6 col-xs-12">
   	   			<h1>社会娱乐</h1>
   	   		</div>
   	   	</div>
   	   </div>
		
	</body>
</html>

weixin_44322364

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery&BootStrap

传统使用JQ完成下拉列表左右选择<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ //添加到右侧 document....
复制链接

扫一扫

专栏目录