jq学习第3天

1.卷曲方法，scroll里面scrollTop不带单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width: 4000px;
            height: 4000px;
        }
    </style>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //注册window  scroll事件    返回的是数字，不是带px的
        $(window).scroll(function () {
            console.log($(window).scrollTop());
        })
    })

2.on事件以及阻止冒泡（先执行自己的事件在执行委托，再执行外部的事件），阻止跳转所用到的事件处理参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<a href="http://www.baidu.com">百度</a>
<script>

    //on事件参数
    // 1：事件类型
    // 2：委托执行对象
    // 3：data数据
    // 4：回调函数
$(function () {
    // var num = 10;
    // $("a").on("click",num,function (e) {
    //     console.log(e.data);
    // });
        $("a").on("click",function (e) {
                console.log("哈哈");
            //如果不阻止冒泡，先执行本身事件，再执行外层的事件
            // e.stopPropagation();
            //阻止浏览器默认跳转
            // e.preventDefault();
            return false;
            });

        $("body").on("click",function () {
            console.log("嘻嘻");
        });

3.删除(remove())是指干掉节点，清除(empty())是指干掉节点内容,追加标签不能存在换行，如要换行得加 \n和+

$(function () {
    $("table").on("click","a",function () {
        $(this).parent().parent().remove();
    });
    $("#btn").on("click",function () {
        $("#j_tb").empty();
    });
    $("#btnAdd").on("click",function () {
        $('<tr><td>html</td><td>中微-前端与移动开发学院</td><td><a href="javascrip:;class ="get">DELETE</a></td></tr>').appendTo($("#j_tb"));
    });

4.事件解绑（$().off()），触发($().事件名 $().trigger.("事件名") ) ---------注意这里带引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button"value="btn1">
<input type="button"value="btn2">
<p>这是一个p</p>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("p").click(function () {
            alert();
        });
        $("input").eq(0).click(function () {
           // $("p").trigger("click");           //trigger触发事件
            $("p").click;                        //对象.click直接触发事件
        });

        $("input").eq(1).click(function () {
            $("p").off("click");
        });

        //点击按钮触发事件
        $("p").on("click",function () {
            console.log("hah");
        });
        $("input").click(function () {
            $("p").trigger("click");
        });
    })
</script>
</body>
</html>

5.音乐导航栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .nav {
      width: 900px;
      height: 60px;
      background-color: black;
      margin: 0 auto;
    }
    
    .nav li {
      width: 100px;
      height: 60px;
      /*border: 1px solid yellow;*/
      float: left;
      position: relative;
      overflow: hidden;
    }
    
    .nav a {
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: 24px;
      color: blue;
      text-align: center;
      line-height:60px;
      text-decoration: none;
      z-index: 2;
    }
    
    .nav span {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: yellow;
      top: 60px;
    }
  </style>
 
</head>
<body>
<div class="nav">
  <ul>
    <li>
      <a href="javascript:void(0);">导航1</a>
      <span></span>
    </li>
    <li><a href="javascript:void(0);">导航2</a><span></span></li>
    <li><a href="javascript:void(0);">导航3</a><span></span></li>
    <li><a href="javascript:void(0);">导航4</a><span></span></li>
    <li><a href="javascript:void(0);">导航5</a><span></span></li>
    <li><a href="javascript:void(0);">导航6</a><span></span></li>
    <li><a href="javascript:void(0);">导航7</a><span></span></li>
    <li><a href="javascript:void(0);">导航8</a><span></span></li>
    <li><a href="javascript:void(0);">导航9</a><span></span></li>
  </ul>
  
  <!--音频标签-->
  <!--<audio src="mp3/1.ogg" controls="controls"></audio>-->

  <div>
    <audio src="mp3/1.ogg"></audio>
    <audio src="mp3/2.ogg"></audio>
    <audio src="mp3/3.ogg"></audio>
    <audio src="mp3/4.ogg"></audio>
    <audio src="mp3/5.ogg"></audio>
    <audio src="mp3/6.ogg"></audio>
    <audio src="mp3/7.ogg"></audio>
    <audio src="mp3/8.ogg"></audio>
    <audio src="mp3/9.ogg"></audio>
  </div>
  <!--<video src="movie/movie01.mp4" controls autoplay loop width="400"></video> -->
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
     
      $(".nav>ul>li").mouseenter(function () {
          $(this).children("span").stop().animate({top:0});
          var index = $(this).index();
          $("audio").get(index).load();
          $("audio").get(index).play();
      });
      $(".nav>ul>li").mouseleave(function () {
          $(this).children("span").stop().animate({top:60});
      });

      //用按键
      var flag = true;       //节流阀，判断按键是否弹起
      $(document).keydown(function (e) {
          if(flag) {                 //如果按键按下，给flag返回true，下次不会再执行按下的操作了
              flag=false;
              if (e.keyCode >= 49 && e.keyCode <= 57) {
                  $(".nav li").eq(e.keyCode - 49).mouseenter();      //如果按键的值-49等于第一个音那么就触发移入事件
              }
          }
      });
      $(document).keyup(function (e) {
          flag = true;                //一旦弹起，那么再次按下时，又会执行按下操作
          if (e.keyCode >= 49 && e.keyCode <= 57) {
              $(".nav li").eq(e.keyCode - 49).trigger("mouseleave");      //如果按键的值-49等于第一个音那么就触发移入事件
          }
      });    
  });

6.需要注意的点

$（window）不用打双引号，与document一样，计算机认识，加括号是因为将对象变成jq对象，如果加上双引号，就是选择器了，那是标签选择器

卷曲事件srcoll() scrollTop获得的是数值

出现的错误，本该出现的多效果只出现了某一个1.this多加了引号，2.没用this

1.卷曲方法，scroll里面scrollTop不带单位

2.on事件以及阻止冒泡（先执行自己的事件在执行委托，再执行外部的事件），阻止跳转所用到的事件处理参数

3.删除(remove())是指干掉节点，清除(empty())是指干掉节点内容,追加标签不能存在换行，如要换行得加 \n和+

4.事件解绑（$().off()），触发($().事件名 $().trigger.("事件名") ) ---------注意这里带引号

5.音乐导航栏

6.需要注意的点

猜你喜欢