Web前端基础（15）-阿里云开发者社区

Web前端基础（15）

2021-11-23 174

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Web前端基础

###事件模拟

模拟触发某个元素的某个事件

格式: 元素对象.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>

Web前端基础（15）

练习

热门文章

最新文章

相关课程

相关电子书

相关实验场景