首页 > 编程语言 >学习Java的日子 Day68 jQuery操作节点，Bootstrap

学习Java的日子 Day68 jQuery操作节点，Bootstrap

时间：2024-08-14 13:56:46浏览次数：18  
标签：jQuery function 元素 Java img text Bootstrap 事件 click

jQuery

1.jQuery操作DOM

DOM为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式

在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性attr、内容html、值value、CSS 的操作

1.1 操作内容

获取和设置元素内容

操作元素内容的方法包括html()和text()，比如文本框后面的提示信息

获取和设置元素值

要获取元素的值通过val()方法实现

比如文本框的值之类的

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("#btn01").click(function(){
			console.log($("#span01").text());
		})
				
		$("#btn02").click(function(){
			$("#span01").text("<h1>做真实的自己</h1>");
		})
				
		$("#btn03").click(function(){
			console.log($("#span02").html());
		})
		
		$("#btn04").click(function(){
			$("#span02").html("<h1>做真实的自己</h1>");
		})
			
	})
</script>
</head>
<body>
		
	<button id="btn01">获取内容 - text</button>
	<button id="btn02">设置内容 - text</button>
	<br />
	<span id="span01">用良心做教育</span>
	<br />
		
	<button id="btn03">获取内容 - html</button>
	<button id="btn04">设置内容 - html</button>
	<br />
	<span id="span02">用良心做教育</span>
		
</body>
</html>

1.2 操作属性

获取元素属性：

使用attr(name)方法获取元素的属性

设置元素的属性：

通过attr(name,value)的方式设置元素的属性

删除元素的属性

使用removeAttr(name)方法可以将元素的属性删除

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		$("#btn01").click(function(){
			console.log($("img").attr("src"));
			console.log($("img").attr("width"));
			console.log($("img").attr("height"));
		})
				
		$("#btn02").click(function(){
			$("img").attr("src","../img/樱井步.jpg");
			$("img").attr("width","100px");
			$("img").attr("height","100px");
		})
				
		$("#btn03").click(function(){
			$("img").removeAttr("width");
			$("img").removeAttr("height");
		})
				
	})
			
</script>
</head>
<body>
		
	<button id="btn01">获取属性</button>
	<button id="btn02">设置属性</button>
	<button id="btn03">删除属性</button>
	<br />
	<img src="../img/波多野结衣.jpg" width="50px" height="50px" />
		
</body>
</html>

val () 方法返回或设置被选元素的value值

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("#btn01").click(function(){
			//console.log($("input").attr("value"));
					
			console.log($("input").val());
		})
				
		$("#btn02").click(function(){
			//$("input").attr("value","用良心做教育");
				
			$("input").val("用良心做教育");
		})
				
	})
</script>
</head>
<body>
		
	<input type="text" />
	<button id="btn01">获取输入框的数据</button>
	<button id="btn02">设置输入框的数据</button>
</body>
</html>

操作属性案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{color: red;}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//给表单绑定一个提交事件，false就提交不了，true就可以提交
				$("form").submit(function(){
                    
					//先清空
					$("#username+span").text("");
					$("#password+span").text("");
					$("#repassword+span").text("");
					
					var bool = true;
					//trim去空格
					if($.trim($("#username").val()) == ""){
						$("#username+span").text("账号不能为空");
						bool = false;
					}
					
					if($.trim($("#password").val()) == ""){
						$("#password+span").text("密码不能为空");
						bool = false;
					}
					
					if($.trim($("#repassword").val()) == ""){
						$("#repassword+span").text("确认密码不能为空");
						bool = false;
					}else if($.trim($("#repassword").val()) != $.trim($("#password").val())){
						$("#repassword+span").text("确认密码和密码不一致");
						bool = false;
					}
					
					return bool;
				})			
							
			})
		</script>
	</head>
	<body>
		
		<form action="#" method="post">
			
			账号：<input type="text" id="username" name="username" /><span></span><br/>
			密码：<input type="password" id="password" name="password" /><span></span><br/>
			确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br/>
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>

运行结果：

在这里插入图片描述

1.3 操作样式（CSS）

在页面中，元素样式的操作包含：直接设置样式、增加CSS类别、删除类别、类别切换

调用css(name,value)方法直接设置元素的值

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/**
		 * 案例：点击图片，使图片自动变大
		 * 案例：点击字体，是字体变粗，背景颜色变蓝
		 */
		$("img").click(function(){
			$(this).css("width","200px");
			$(this).css("height","200px");
		})
				
		$("p").click(function(){
			$(this).css("font-size","50px");
			$(this).css("background-color","blue");
			})
		})
</script>
</head>
<body>
		
	<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
	<p>用良心做教育</p>
		
</body>
</html>

<style type="text/css">
	.big{
		width: 200px;
		height: 200px;
	}
</style>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/**
		 * 案例：点击图片，使图片自动变大，再次点击又变小，循环往复
		 */
		$("img").click(function(){
			//判断当前对象的class属性是否有big，有就返回true
			if($(this).hasClass("big")){
				$(this).removeClass("big");
			}else{
				$(this).addClass("big");
			}
		})
        
	})
</script>
</head>
<body>
		
	<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
</body>
</html>

更好的方法

<style type="text/css">
	.big{
		width: 200px;
		height: 200px;
	}
</style>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("img").click(function(){
					
			//判断当前对象的class属性是否有big，有就删除，没有就添加
			$(this).toggleClass("big");
			
		})

	})
</script>
</head>
<body>
		
	<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
</body>
</html>

1.4 操作节点

1.4.1 创建元素节点

使用$(html)函数动态创建节点元素

函数$(html)只完成DOM元素创建，加入到页面还需要通过元素节点的插入或追加操作；同时，在创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果。

案例：

给页面添加图片元素节点

在页面中动态创建元素需要执行节点的插入或追加操作，append

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn01").click(function(){
					
					var img = $("<img src='../img/波多野结衣.jpg'/>");//创建一个jQuery对象
					
					//将图片添加到div里 -- 末尾
					//$("#manager").append(img);
					//$(img).appendTo($("#manager"));
					
					//将图片添加到div里 -- 首位
					//$("#manager").prepend(img);
					//$(img).prependTo($("#manager"));
					
					//将图片添加到div标签后面 -- 并列关系
					//$("#manager").after(img);
					//$(img).insertAfter($("#manager"));
					
					//将图片添加到div标签前面 -- 并列关系
					//$("#manager").before(img);
					$(img).insertBefore($("#manager"));
				})
				
				$("#btn02").click(function(){
					$("img:first").remove();
				})
				
			})
		</script>
	</head>
	<body>
		
		<button id="btn01">添加节点</button>
		<button id="btn02">删除节点</button>
		
		<div id="manager">
			<img src="../img/樱井步.jpg"/>
		</div>
		
	</body>
</html>

运行结果：

在这里插入图片描述

1.4.2 遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。

在传统的JavaScript中，先获取元素的总长度，然后以for循环语句递减总长度，访问其中的某个元素，代码相对复杂；

而在jQuery中，可以直接使用each(callback)方法实现元素的遍历

$(“img”).each(function(){ …})

案例：点击图片，就会变成其他的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("img").each(function(){//遍历所有img标签
					$("img").click(function(){//给每一个img便签绑定一个点击事件
						$(this).attr("src","../img/乐乐.jfif");
					})
				})					
				
			})
		</script>
	</head>
	<body>

		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		
	</body>
</html>
1.4.3 练习案例

实现管理页面的全选功能

实现批量删除的功能

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
                //点击全选按钮，就可以选三个按钮
				$("#chkAll").click(function(){
					if($(this).attr("checked")){
						$("td>input").attr("checked","checked");
					}else{
						$("td>input").removeAttr("checked");
					}
				})
				
				$("td>input").each(function(){
					
					$(this).click(function(){
						
						if($("td>input").length == $("td>input:checked").length){
							$("#chkAll").attr("checked","checked");
						}else{
							$("#chkAll").removeAttr("checked");
						}
					})
					
				})
				
                //删除功能
				$("#btnDel").click(function(){
					
					$("td>input:checked").each(function(){
						var deleteId = $(this).val();
						$("tr[id=" + deleteId + "]").remove();
					})
					
					if($("td>input").length == 0){
						$("#chkAll").removeAttr("checked");
					}
				})
				
			})
		</script>
	</head>
	<body>
		
		<table border="1">
	        <tr>
	           <th>选项</th>
	           <th>编号</th>
	           <th>姓名</th>
	           <th>性别</th>
	        </tr>
	        <tr id="1">
	           <td><input type="checkbox" value="1"/></td>
	           <td>1001</td>
	           <td>小明</td>
	           <td>男</td>
	        </tr>
	        <tr id="2">
	           <td><input type="checkbox" value="2"/></td>
	           <td>1002</td>
	           <td>明明</td>
	           <td>女</td>
	        </tr>
	        <tr id="3">
	           <td><input type="checkbox" value="3"/></td>
	           <td>1003</td>
	           <td>小红</td>
	           <td>女</td>
	        </tr>
	        <tr>
	           <td colspan="4">
	           	<span><input id="chkAll" type="checkbox" />全选</span>
               	<span><input id="btnDel" type="button" value="删除"/></span>
	           </td>
	        </tr>
		</table>

	</body>
</html>

2.jQuery事件

众所周知，页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用

2.1 事件冒泡现象：(可能会考)

事件在触发后分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）；但大多数浏览器并不是都支持捕获阶段，jQuery也不支持。因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

案例：掌握什么是事件的冒泡现象

冒泡现象：子元素的事件向上传递给了父级元素（一直往上传，直到找到body为止，类似于绝对定位）

就是一层层往上冒

如何阻止冒泡的发生

在jQuery中，可以通过e.stopPropagation()方法可以阻止冒泡过程的发生。

还可以通过语句return false实现停止事件的冒泡过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager{
				width: 200px;
				height: 200px;
				border: orange 1px solid;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				/**
				 * 冒泡现象：子元素的事件向上传递给了父级元素
				 */
				
				$("#manager").click(function(){
					alert("div被点击了");
				})
				
				$("#btn").click(function(event){
					alert("按钮被点击了");
					
					//阻止冒泡现象 -- 解决方案一
					//event.stopPropagation();
					
					//阻止冒泡现象 -- 解决方案二
					return false;
				})
			})
		</script>
	</head>
	<body>
		
		<div id="manager">
			
			<input id="btn" type="button" value="普通按钮" />
			
		</div>
		
	</body>
</html>

2.2 页面载入事件$(function(){}）

一直在用

$(function(){ ......})

2.3 绑定事件 bind()

比如像这种方式来绑定事件click、mouseout

使用bind()方法绑定事件

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：

bind(type,[data],fn)

这种方式相比之前：其中参数type为一个或多个类型的字符串，如"click"或"change"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//绑定事件
                //通过映射方式绑定事件（类似于json格式）
				$("img").bind({
					"click":function(){
						console.log("图片被点击了");
					},
					"mouseout":function(){
						console.log("鼠标移出图片了");
					}
				})
				

			})
		</script>
	</head>
	<body>
		
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
	</body>
</html>

2.4 解绑事件 unbind()

unbind()方法移除元素绑定事件

unbind(type,[fn]])

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//绑定事件				
				$("img").bind("click mouseout",function(){
					console.log("触发事件了");
				})
				
				$("#btn").click(function(){
					//解绑所有的事件
					//$("img").unbind();
					
					//解绑指定的事件
					$("img").unbind("click");
				})

			})
		</script>
	</head>
	<body>
		<button id="btn">解绑事件</button><br />
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
	</body>
</html>

2.5 切换事件hover() toggle()

hover()方法

鼠标移入、移出事件来回切换

toggle()方法

鼠标单击事件循环切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//切换事件：鼠标移入、移出事件来回切换
				$("img").hover(
					function(){
						console.log("aaa");
					},
					function(){
						console.log("bbb");
					}
				)
				
			})
		</script>
	</head>
	<body>
		
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//切换事件：鼠标单击事件循环切换
				$("img").toggle(
					function(){
						console.log("aaa");
					},
					function(){
						console.log("bbb");
					},
					function(){
						console.log("ccc");
					}
				)
				
			})
		</script>
	</head>
	<body>
		
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
	</body>
</html>

2.6 事件应用案例

2.6.1 表单验证

为各个表单项添加事件，检查其数据的合理性

为表单绑定提交事件，并做好正确的控制（事件的触发）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{color: red;}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				var bool = true;
				
				$("#username").blur(function(){
					if($.trim($(this).val()) == ""){
						$("#username+span").text("账号不能为空");
						bool = false;
					}else{
						$("#username+span").text("");
					}
				})
				
				$("#password").blur(function(){
					if($.trim($(this).val()) == ""){
						$("#password+span").text("密码不能为空");
						bool = false;
					}else{
						$("#password+span").text("");
					}
				})
				
				$("#repassword").blur(function(){
					if($.trim($(this).val()) == ""){
						$("#repassword+span").text("确认密码不能为空");
						bool = false;
					}else if($.trim($(this).val()) != $.trim($("#password").val())){
						$("#repassword+span").text("确认密码与密码不一致");
						bool = false;
					}else{
						$("#repassword+span").text("");
					}
				})
				
				$("form").submit(function(){
					
					bool = true;
					
					//触发username、password、repassword的失去焦点事件
					$("#username").trigger("blur");
					$("#password").trigger("blur");
					$("#repassword").trigger("blur");
					
					return bool;
				})
				
				
				
			})
		</script>
	</head>
	<body>
		
		<form action="#" method="post">
			
			账号：<input type="text" id="username" name="username" /><span></span><br/>
			密码：<input type="password" id="password" name="password" /><span></span><br/>
			确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br/>
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>
2.6.2 实现选项卡

案例：点击php，下面会显示php的内容，.net也是一样的

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#tab li {
				text-align: center;
				float: left;
				padding: 5px;
				margin-right: 2px;
				width: 50px;
				cursor: pointer
			}
			
			#tab li.tabFocus {
				width: 50px;
				font-weight: bold;
				background-color: powderblue;
				border: solid 1px #666;
				border-bottom: 0;
				z-index: 100;
				position: relative
			}
			
			#content {
				width: 260px;
				height: 80px;
				padding: 10px;
				background-color: powderblue;
				clear: left;
				border: solid 1px #666;
				position: relative;
				top: -1px
			}
			
			#content li {
				display: none
			}
			
			#content li.contentFocus {
				display: block
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function() {
	
				$("#tab>li").each(function(index){
					
					$(this).click(function(){
						
						$("#tab>li[class='tabFocus']").removeClass("tabFocus");
						$(this).addClass("tabFocus");
						
						$("#content>li[class='contentFocus']").removeClass("contentFocus");
						$("#content>li:eq(" + index + ")").addClass("contentFocus");
					})
					
				})
				

			})
		</script>
	</head>

	<body>
		<ul id="tab">
			<li class="tabFocus">javaee</li>
			<li>php</li>
			<li>.NET</li>
		</ul>
		<ul id="content">
			<li class="contentFocus">企业级应用占据领导地位</li>
			<li>中小型网站首选</li>
			<li>微软出品</li>
		</ul>
	</body>

</html>

3.Bootstrap

简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

为什么使用Bootstrap

1.移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

2.浏览器支持：所有的主流浏览器都支持 Bootstrap。

3.容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计

3.1 Bootstrap安装环境

CDN

注意：顺序不能乱

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

3.2 常用控件

标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

图片

<!--圆角-->
<img src="../img/纯蓝色.png" class="img-rounded"/>
<!--圆型-->
<img src="../img/纯蓝色.png" class="img-circle"/>
<!--缩略图-->
<img src="../img/纯蓝色.png" class="img-thumbnail"/>

列表组

<div class="list-group" style="width: 300px;">
	<a href="#" class="list-group-item active">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
</div>

表格

		<!--
			<table class="table table-condensed">
  			<caption>精简表格布局</caption>
  			
  			<table class="table table-striped">
  			<caption>条纹表格布局</caption>
  			
  			<table class="table table-bordered">
  			<caption>边框表格布局</caption>
			
			<table class="table table-hover">
 	  		<caption>悬停表格布局</caption>
        -->
        <table class="table">
  			<caption>基本的表格布局</caption>
		  	<thead>
		    	<tr>
			      	<th>名称</th>
			      	<th>年龄</th>
			      	<th>性别</th>
		    	</tr>
		  	</thead>
		  	<tbody>
			    <tr>
			      <td>小红</td>
			      <td>18</td>
			      <td>女</td>
			    </tr>
			    <tr>
			      <td>小黄</td>
			      <td>19</td>
			      <td>男</td>
			    </tr>
			    <tr>
			      <td>小绿</td>
			      <td>20</td>
			      <td>男</td>
			    </tr>
			  </tbody>
</table>

表单(输入框、密码框、单选、多选、下拉、各种按钮)

<form class="form-horizontal " role="form" >
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">输入框：</label>
			    <div class="col-sm-10 col-lg-4">
			      <input type="text" class="form-control" placeholder="请输入输入框">
			    </div>
			</div>
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">密码框：</label>
			    <div class="col-sm-10 col-lg-4">
			      <input type="password" class="form-control" placeholder="请输入密码框">
			    </div>
			 </div>
			 
			<div class="form-group">
			    <label class="col-sm-2 control-label">单选框：</label>
			    <div class="radio col-sm-10">
			    	<label>
			        	<input name="sex" type="radio" checked="checked">选项 1
			        </label>
			        <label>
			        	<input name="sex" type="radio" >选项 2
			        </label>
			    </div>
		    </div>
		    
		    <div class="form-group">
			    <label class="col-sm-2 control-label">多选框：</label>
			    <div class="col-sm-10">
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 1
				    </label>
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 2
				    </label>
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 3
				    </label>
			    </div>
		   	</div>
		    
		    <div class="form-group">
			    <label class="col-sm-2 control-label">下拉链表：</label>
			    <div class=" col-sm-10 col-lg-4">
				    <select class="form-control ">
					    <option>1</option>
					    <option>2</option>
					    <option>3</option>
					    <option>4</option>
					    <option>5</option>
				    </select>
			    </div>
		    </div>
		    
		  	<div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="submit" class="btn btn-default">提交按钮</button>
			      <button type="reset" class="btn btn-default">重置按钮</button>
			      <button type="button" class="btn btn-default">普通按钮</button>
			    </div>
		  	</div>
</form>

模态框

<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
		            </div>
		            <div class="modal-body">在这里添加一些文本</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="fun01()">关闭</button>
		                <button type="button" class="btn btn-primary" onclick="fun02()">提交更改</button>
		            </div>
		        </div>
		    </div>
		</div>		
		<script type="text/javascript">
			function fun01(){
				alert("no");
			}
			function fun02(){
				alert("yes");
			}
		</script>

3.3 可视化定制

http://www.bootcss.com/p/layoutit/

学习网站：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

总结

1.操作节点

2.各种事件
冒泡现象 – 重要

注重：案例

3.Bootstrap

标签：jQuery,function,元素,Java,img,text,Bootstrap,事件,click
From： https://blog.csdn.net/weixin_69595694/article/details/141180662

相关文章

  • JavaWeb登录实现验证码功能
    1、新建两个工具类importjava.util.Arrays;publicclassCreateVerificationCode{/***验证码难度级别*/publicenumSecurityCodeLevel{Simple,Medium,Hard}publicstaticStringgetSecurityCode(){......
  • Java面试题（Java Web）
    目录1.JSP有哪些内置对象？作用分别是什么？2.说一下JSP的4种作用域？3.session和cookie有什么区别？4.说一下session的工作原理？5.如果客户端禁止cookie能实现session还能用吗？6.如何避免SQL注入？7.什么是XSS攻击，如何避免？8.什么是CSRF攻击，如何避免？......
  • Java面试题（异常）
    目录1.throw和throws的区别？2.final、finally、finalize有什么区别？3.try-catch-finally中哪个部分可以省略？4.try-catch-finally中，如果catch中return了，finally还会执行吗？5.常见的异常类有哪些？1.throw和throws的区别？throw：是真实抛出一个异常。thr......
  • Java面试题（网络）
    1.forward和redirect的区别？forward是转发和redirect是重定向：地址栏url显示：fowardurl不会发生改变，redirecturl会发生改变；数据共享：      forward可以共享request里的数据，redirect不能共享；效       率：      forw......
  • 科普文：Java基础系列之【java框架基础：字节码增强技术框架ASM】
    ,之前的文章我们介绍了字节码的基础知识,今天我们将介绍字节码相关的应用场景，首先要介绍的是如何对字节码做解析和修改，本文将会详细给大家介绍一个工业级字节码操作框架ASM。ASM当我们需要对一个class文件做修改时，我们可以选择自己解析这个class文件，在符合Java字节码规......
  • 科普文：Java基础系列之【java框架基础：字节码增强技术框架ASM#ClassReader实现原理及源
    1概述ASM是Java中比较流行的用来读写字节码的类库，用来基于字节码层面对代码进行分析和转换。在读写的过程中可以加入自定义的逻辑以增强或修改原来已编译好的字节码，比如CGLIB用它来实现动态代理。ASM被设计用于在运行时对Java类进行生成和转换，当然也包括离线处理。ASM短小精......
  • 身份证实名认证类接口怎么选择？JavaScript身份证三要素核验接口返回参数说明
    当我们在选择身份证实名认证接口的时候，首先要考虑的是接口的稳定性和可靠性，翔云身份证实名认证接口，一般是指通过身份证三要素：身份证号、姓名、证件人像核验的方式来对身份证真伪的一致性进行核验，且接口的部署方式简单便捷。翔云身份证核验接口返回参数说明序号 名称 类......
  • Java开发中使用腾讯云OCR进行身份证识别与COS云存储实践
    文章目录完整代码代码讲解总结在Java开发中，处理身份证识别和云存储是一项常见的需求，尤其是在需要用户身份验证的应用场景中。今天，我想和大家分享一个实际的案例，展示如何利用腾讯云的OCR服务进行身份证识别，并将识别到的身份证信息上传到云存储中。完整代码以下......
  • Java 实现 B树（通俗易懂）
    目录一.概念二.节点定义三.插入操作1.查找位置2.插入3.分裂四.B+树和B*树1.B+树2.B*树一.概念B树是一颗多叉平衡树，空树也是多叉平衡树。一颗M阶的B树要满足以下条件：1.根节点至少有两个孩子；2.每个非根节点至少有(上取整)个关键字，至多有个关键字，并且以升序排列......
  • Java基础-学习笔记11
    11枚举、注解枚举枚举是一组常量的集合。可以这么理解：枚举属于一种特殊的类，里面只包含一组有限的特定的对象。比如，Season类，只包含SPRING、SUMMER、AUTUMN、WINTER四个对象常量。两种实现方式（1）自定义类实现枚举     1)构造器私有化     2)本类内部创建一组对......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99