###事件模拟
模拟触发某个元素的某个事件
格式: 元素对象.trigger(“事件名称”);
$(“input”).trigger(“click”);
###鼠标移入移出事件合并 hover
将鼠标移入和移出两个事件合并到一起
//给元素添加鼠标移入移出合并事件
$(“div”).hover(function(){
//鼠标移入时执行
$(this).css(“color”,“red”);
},function(){
//鼠标移出时执行
$(this).css(“color”,“green”);
});
###动画相关
隐藏 元素对象.hide(时间,方法);
显示 元素对象.show(时间,方法);
淡出 元素对象.fadeOut(时间,方法);
淡入 元素对象.fadeIn(时间,方法);
上滑 元素对象.slideUp(时间,方法);
下滑 元素对象.slideDown(时间,方法);
自定义 元素对象.animate({“样式名”:“值”},时间);
练习
1.轮播图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" /> </head> <body> <div>div1</div> <div class="well">div2</div> <h3>按钮种类</h3> <a class="btn btn-default" href="#">按钮1</a> <button class="btn btn-default" type="button">按钮2</button> <input class="btn btn-default" type="button" value="按钮3" /> <input class="btn btn-default" type="submit" value="按钮4" /> <h3>按钮样式</h3> <button class="btn btn-default">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-danger">按钮</button> <button class="btn btn-link">按钮</button> <h3>按钮尺寸</h3> <button class="btn btn-success btn-lg">按钮</button> <button class="btn btn-success"> 按钮</button> <button class="btn btn-success btn-sm">按钮</button> <button class="btn btn-success btn-xs">按钮</button> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> </html>
2.字体图标
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/> <style type="text/css"> i1{ background-color: #000000; margin: 0;/* 去掉自带的外边距 */ } i1{ font } </style> </head> <body> <span class="glyphicon glyphicon-music">音乐</span><br> <span class="glyphicon glyphicon-qrcode">二维码</span> <hr /> <i id="i1" class="fa fa-address-book" aria-hidden="true"> 通讯录</i> <span class="fa fa-bath"> 洗澡</span> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> </html>
3.导航组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/> </head> <body> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <h3>胶囊式</h3> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">中国</a></li> <li role="presentation"><a href="#">美国</a></li> <li role="presentation"><a href="#">俄罗斯</a></li> </ul> <h3>胶囊式</h3> <ul class="nav nav-pills"> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 魏国 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li role="presentation"><a href="#">曹操</a></li> <li role="presentation"><a href="#">司马懿</a></li> <li role="presentation"><a href="#">夏侯惇</a></li> </ul> </li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 蜀国 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li role="presentation"><a href="#">刘备</a></li> <li role="presentation"><a href="#">诸葛亮</a></li> <li role="presentation"><a href="#">马超</a></li> </ul> </li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 吴国 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li role="presentation"><a href="#">周瑜</a></li> <li role="presentation"><a href="#">小乔</a></li> <li role="presentation"><a href="#">孙尚香</a></li> </ul> </li> </ul> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> <script type="text/javascript"> //给所有li添加点击事件 $("li").click(function(){ //this代表当前点击的li $(this).attr("class","active"); //让其他两个不选中 $(this).siblings().attr("class",""); }) </script> </html>
4.综合练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" /> </head> <body> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a class="fa fa-plus" href="#">新增</a></li> <li role="presentation"><a class="fa fa-pencil" href="#">编辑</a></li> <li role="presentation"><a class="fa fa-search" href="#">查询</a></li> </ul> <div><b>左对齐加粗</b></div> <div class="text-center"><i>中间对齐斜体</i></div> <div class="text-right"><small>右对齐小字</small></div> <button class="btn btn-primary btn-lg">按钮1</button> <button class="btn btn-info">按钮2</button> <button class="btn btn-warning btn-sm">按钮3</button> <button class="btn btn-danger btn-xs">按钮4</button> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> </html>
