django开源项目bootcamp核心js-feeds.js分析(1)
更新:HHH   时间:2023-1-7


本文比较基础的分析了该项目的js文件,大神就可以忽略了

首先打开feeds.js就可以看见整个文件包裹在下面这样的一个函数中

$(function () {

.........

.........

}

上面这个$(function () {};是$(document).ready(function(){});的简写,而$(document).ready里面的代码是在整个页面内容都加载完才执行的。好了,下面进入正题:

var page_title = $(document).attr("title");

/*上面这一句定义变量page_title,并且取得全局属性title的值赋给它*/

  function hide_stream_update() {

    $(".stream-update").hide();

    $(".stream-update .new-posts").text("");

    $(document).attr("title", page_title);

  };

/*定义无参函数hide_stream_update,前两行选择器取指定类分别执行hide()隐藏和text()取得对应属性的文本值,最后一个又用到了attr(""),但这次是给属性title赋后面的值*/

  $("body").keydown(function (evt) {

    var keyCode = evt.which?evt.which:evt.keyCode;

    if (evt.ctrlKey && keyCode == 80) {

      $(".btn-compose").click();

      return false;

    }

  });

/*上面这段定义了在body中keydown按键按下后产生的事件*/

$("#compose-form textarea[name='post']").keydown(function (evt) {

    var keyCode = evt.which?evt.which:evt.keyCode;

    if (evt.ctrlKey && (keyCode == 10 || keyCode == 13)) {

      $(".btn-post").click();

    }

  });

/*上面这段选择器选择了id=compose-form和name=post的文本框,规定了按键事件*/

  $(".btn-compose").click(function () {

    if ($(".compose").hasClass("composing")) {

      $(".compose").removeClass("composing");

      $(".compose").slideUp();

    }

    else {

      $(".compose").addClass("composing");

      $(".compose textarea").val("");

      $(".compose").slideDown(400, function () {

        $(".compose textarea").focus();

      });

    }

  });

/*这是一个点击事件,进入后有一个判断含有.compose的元素是否也含有composing类,如果有进入下面操作,第一个就是删除该元素中的composing类,同时该元素向上滑动。如果没有则执行else里面的操作,首先是添加类,然后用val方法设置选定元素中的值为空,最后向下滑动指定大小后聚焦*/

  














返回开发技术教程...