day 48

1. os和sys都是干什么的？

　　os模块是跟操作系统相关

　　　　　　os.path.join("a", "b") 拼接地址

　　　　　　print(os.sep) # 获取当前操作系统的路径分隔符

　　　　　　os.path.exists("文件的路径") 判断文件是否存在

　　　　　　os.path.getsize("文件路径") 文件大小

　　　　　　os.mkdir("文件路径") 　　创建文件

　　　　　　ret = os.path.abspath(__file__) 获取文件的绝对路径　

　　　　　　os.path.dirname(ret)   获取当前文件夹的绝对路径

　　sys是合Python解释器相关

　　　　sys.path 　　获取模块的路径集返回一个路径列表

　　　　sys.modules # 获取Python解释器加载的所有模块

　　　　sys.argv 　　# 获取脚本运行时的参数

　　　　sys.exit()

2. 你工作中都用过哪些内置模块？

　　time/re/json/hashlib/random/socket/
　　# collection/functools

3. 有没有用过functools模块？

　　import functools
　　from functools import partial, reduce, wraps

　　　　 partial 偏函数, 制定一个默认参数，包装成另外一个函数

import functools



print(int("100", base=2)) # 2进制->10进制

int2 = functools.partial(int, base=2)
print(int2("100"))


# 打印结果都是4

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .menu {
             100px;
            border: 1px solid darkgrey;
        }
        .item-title {
            height: 30px;
            line-height: 30px;
            background-color: #449900;
            color: white;
            text-align: center;
            border-bottom: 1px dotted darkgrey;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="menu">
    <div class="item">
        <div class="item-title">菜单一</div>
        <div class="item-body hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="item-title">菜单二</div>
        <div class="item-body hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="item-title">菜单三</div>
        <div class="item-body hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="jquery-3.3.1.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script>
    var $titleEles = $(".item-title");
    for (var i=0;i<$titleEles.length;i++){
        $titleEles[i].onclick=function () {
            console.log(this);
            // 把我自己的hide移除
            //$(this).next().toggleClass("hide");
            // 把其他的item-body标签 添加上hide
            //$(this).parent().siblings().find(".item-body").addClass("hide");
            $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
        }
    }

    // $(".item-title").click(function () {
    //     $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
    // })
</script>
</body>
</html>

菜单

组合选择器： $("div ,.c1") 找到所有div 标签内有c1类的标签

层级选择： $("div .c1") 找到div标签下所有含有c1类的标签

jQuery选择器
                1. 基本选择器
                    1. $("div")
                    2. $("#d1")
                    3. $(".c1")
                    4. $("*")
                2. 组合选择器
                    1. $("div, .c1")      --> 找到所有div标签和有c1样式类的标签
                3. 层级选择器
                    1. $("#d1 span")      --> id是d1标签下面所有的span标签
                    2. $("#d1>span")      --> id是d1标签下面一层的span标签
                    3. $("label+input")   --> 找到紧挨着label标签的input标签
                    4. $(".c1~div")       --> 找到c1样式类下面的div标签
                4. 基本筛选器
                    1. :first/:last
                    2. :eq()/:gt()/:lt()
                    3. :even/:odd
                    4. $("div:not(.c1)")  --> 找到没有c1样式类的div标签
                    5. $("div:has(.c1)")  --> 找到后代中有c1样式类的div标签
                5. 属性选择器
                    1. $("[s14]")
                    2. $("[type='text']")
                    3. $("[type!='text']")
                6. 表单筛选器
                    1. $(":text")
                    2. $(":password")
                    3. ...
                    4. $(":disabled")
                    5. $("input:checked")
                    6. $(":selected")
                7. 筛选器方法
                    1. .next()/.prev()
                    2. .parent()/.children()/.siblings()
                    3. .find('选择器条件')      --> 在后代查找符合要求的
                    4. .filter('选择器条件')    --> 根据条件对已经找到的结果进行二次过滤
                    5. .first()/.last()
                    6. .not()/.h

jQuery选择器

                    1. .addClass()
                    2. .removeClass()
                    3. .hasClass()
                    4. .toggleClass()
                2. 
                    .css("color")         --> 获取值
                    .css("color", "red")  --> 设置值、

Jquery操作class

位置相关：

1. position() --> 获取相对定位过的祖先元素的偏移
2. offset() --> 获取相对当前窗口的偏移
3. scrollTop() --> 相对顶部的偏移
4. scrollLeft() --> 相对左侧的偏移

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });






  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });




  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

返回顶部示例

3. 尺寸

　　1. height/width 元素
　　2. innerHeight/innerWidth 元素 + 内填充
　　3. outerHeight/outerWidth 元素 + 内填充 + 边框

4. 求值（input/select/textarea）

　　text() /text（“xx”）相当于 .innerText 不能识别标签
　　html() / html("<a> x</a>")相当于 .innerHTML 支持写入嵌入标签
　　val() 获取选择框的value值

　　1. .val()　　
　　2. .val("新值")
　　3. .val(["1", "2"])

5. 属性
　　　　.attr() 文本：查看属性值，设定属性，删除属性

　　判断选择框有没有被选中
　　　　

　　prop() 选择框有没有被选中，返回布尔值

6. 绑定事件的方式
.click(function(){...})