zoukankan html css js c++ java

day49 面向对象面试 + 文档操作和事件

1. 内容回顾
1. 今日面试题

　　1. 谈谈你对面向对象的理解？
　　　　对象 = 数据 + 方法

　　2. Python面向对象中的继承有什么特点？

　　3. 面向对象深度优先和广度优先是什么？

　　　　继承多个对象，有相同的方法，该听谁的？

　　必须得了解：
　　　　MRO
　　　　深度优先广度优先

　　　　　　　　C3算法 => http://python.jobbole.com/85685/

　　4. 面向对象中super的作用？
　　　　在子类中执行父类的方法
　　5. 列举面向对象中特殊成员(带双下划线的特殊方法，如：__new__、__init__、__call__等)
　　　　　__new__(): 开辟空间，创建对象
　　　　　__init__(): 初始化对象，对象属性的赋值
　　　　__call__(): 对象()直接执行的代码
　　　　__str__(): print(对象)时执行的
　　　　__repr__(): 解释器环境下直接输入对象展示的内容
　　　　__len__(): len()
　　　　__del__(): 析构
　　　　__hash__():
　　　　__eq__():
　　　　__setitem__():
　　　　__getitem__():
　　　　__delitem__():
　　6. 静态方法和类方法区别？

class Person(object):
    name = "黄袍哥"

    def __init__(self, name):
        self.name = name

    @staticmethod
    def yongshou():
        print("不可描述...")

    @classmethod
    def haiyongshou(cls):
        """
        修改静态属性
        :return:
        """
        cls.name = "蝇蝇"
        print("再次不可描述...")
        print(cls.name)

    @property
    def age(self):
        return "本是同根生，相煎何太急！"



Person.yongshou()
Person.haiyongshou()
p1 = Person("康抻")
print(p1.age)

View Code

2. 作业讲解
1. 练习题：登录验证

判断输入值是否为空

<!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>d登录验证练习题</title>
</head>
<body>

<form action="" id="f1">
    <p>
        <label>用户名：
            <input type="text" name="username" id="i1">
            <span></span>
        </label>
    </p>
    <p>
        <label>密码：
            <input type="password" name="password" id="i2">
            <span></span>
        </label>
    </p>
    <button type="button" id="b1">登录</button>
</form>

<script src="jquery-3.3.1.js"></script>
<script>
    $("#b1").click(function () {
        var $inputEles = $("#f1 input");
        for (var i=0;i<$inputEles.length;i++){
            var tmp = $inputEles[i];
            if ($(tmp).val().length === 0){
                // 表示该input框的值为空
                console.log($(tmp).parent().text().trim().slice(0,-1));
                var s = $(tmp).parent().text().trim().slice(0,-1);
                $(tmp).next().text(s + "不能为空").css("color", "red");
            }
        }
    });
</script>
</body>
</html>

View Code

2. 作业：全选、反选和取消

<!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>
</head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>蝇蝇</td>
        <td>用手</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>康抻</td>
        <td>gay in gay out</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>黄袍哥</td>
        <td>吹牛逼</td>
    </tr>
    </tbody>
</table>
<hr>
<button id="b1">全选</button>
<button id="b2">反选</button>
<button id="b3">取消</button>
<script src="jquery-3.3.1.js"></script>
<script>
    // 全选
    $("#b1").click(function () {
        // 找到所有的checkbox,选中:prop("checked", true)
        $(":checkbox").prop("checked", true);
    });
    // 取消
    $("#b3").click(function () {
        // 找到所有的checkbox,取消选中:prop("checked", false)
        $(":checkbox").prop("checked", false);
    });
    // 反选
    $("#b2").click(function () {
        // 找到所有选中的checkbox取消选中
        // $("input:checked").prop("checked", false);   // 此时全部都没选中
        // // 找到所有没选中的checkbox选中
        // $("input:not(:checked)").prop("checked", true)  // 此时都全选中

        // var $check = $(":checkbox");
        // for (var i=0;i<$check.length;i++){
        //     var tmp = $check[i];
        //     var s = $(tmp).prop("checked");
        //
        //     // 如果s是true就改成false，如果是false就改成true
        //     // if (s){
        //     //     $(tmp).prop("checked", false);
        //     // }else {
        //     //     $(tmp).prop("checked", true);
        //     // }
        //
        //     $(tmp).prop("checked", !s);
        // }

        // 找到所有选中的checkbox;
        var $checked = $("input:checked");
        // 找到没有选中的
        var $unchecked = $("input:not(:checked)");
        $checked.prop("checked", false);
        $unchecked.prop("checked", true);
    });
</script>
</body>
</html>

View Code

3. jQuery操作
　　1. 昨日内容回顾
　　　　1. 操作样式
　　　　　　1. 操作class
　　　　　　2. 操作CSS
　　　　　　　　$("").css("color") --> 获取选中标签的颜色值
　　　　　　　　$("").css("color", "yellow") --> 设置选中标签的颜色值

　　　　2. 位置操作
　　　　　　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>

    .c2 {
      height: 50px;
       50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>

<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>






  $(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. 文本操作
　　　　　　1. text()
　　　　　　2. html() 认识标签
　　　　5. 求值（input/select/textarea）

　　　　　　默认返回第一个值，设置的话全部设置的
　　　　　　1. .val()
　　　　　　2. .val("新值")
　　　　　　3. .val(["1", "2"])
　　　　6. 属性操作
　　　　　　1. attr 属性值
　　　　　　2. prop 布尔

　　2. 补充
　　　　1. val()取值和设置值
　　　　2. attr()和prop()的区别

2. 今日内容
　　1. 文档操作
　　　　　　创建标签用：document.createElement("div")
　　　　　　　　　　　　var divEle = document.createElement("div")

　　　　　　　　　　　　divEle.innerText = "呵呵"

　　　　　　　　　　　　然后再添加divEle 就行了
　　　　　　1. 内部添加
　　　　　　　　1. 前面加
　　　　　　　　　　1. $(A).prepend(B)
　　　　　　　　　　2. $(A).prependTo(B)
　　　　　　　　2. 后面加
　　　　　　　　　　1. $(A).append(B)
　　　　　　　　　　2. $(B).appendTo(A)
　　　　　　2. 外部添加
　　　　　　　　1. 前面加
　　　　　　　　　　1. $(A).before(B)
　　　　　　　　　　2. $(B).insertBefore(A)
　　　　　　　　2. 后面加
　　　　　　　　　　1. $(A).after(B)
　　　　　　　　　　2. $(B).insertAfter(A)

<!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>
</head>
<body>

<button id="b1">添加</button>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>康抻</td>
        <td>gay in gay out</td>
        <td><button class="delete">开除</button></td>
    </tr>
    <tr>
        <td>2</td>
        <td>蝇蝇</td>
        <td>用手</td>
        <td><button class="delete">开除</button></td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    $("#b1").click(function () {
        // 在表格的最后添加一行数据
        // 1. 先有数据
        var trEle = document.createElement("tr");  // trEle是一个DOM对象

        // var tdEle1 = document.createElement("td");
        // tdEle1.innerText = "3";
        // $(trEle).append(tdEle1);
        // var tdEle2 = document.createElement("td");
        // tdEle2.innerText = "黄袍哥";
        // $(trEle).append(tdEle2);
        // var tdEle3 = document.createElement("td");
        // tdEle3.innerText = "吹牛逼";
        // $(trEle).append(tdEle3);
        trEle.innerHTML = `
            <td>3</td>
            <td>黄袍哥</td>
            <td>吹牛逼</td>
            <td><button class="delete">开除</button></td>
        `;
        // 2. 追加到tbody的最后
        $("tbody").append(trEle);
    })
</script>
</body>
</html>

文档操作

　　　　　　3. 移除和清空
　　　　　　　　　　1. remove() --> 把选中过的标签从文档树中移除
　　　　　　　　　　2. empty() --> 把选中的标签内部的元素都移除
　　　　　　4. 替换
　　　　　　　　　　1. $(A).replaceWith(B)
　　　　　　　　　　2. $(B).replaceAll(A)

用aele 替换p标签

　　　　　　5. clone
　　　　　　　　　　注意参数true,加上true会把标签绑定的事件也复制

<!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>
</head>
<body>

<button class="btn">屠龙宝刀，点击就送！</button>
<script src="jquery-3.3.1.js"></script>
<script>
    $(".btn").click(function () {
        // 自己复制自己，然后把复制的结果插到我的后面
        $(this).clone(true).insertAfter(this);
    })
</script>
</body>
</html>

自己复制自己，然后把复制的结果插到我的后面

　　　　2. 事件
　　　　　　1. jQuery绑定事件的方式
　　　　　　　　1. 给标签绑定事件的方式
　　　　　　　　　　1. 在标签上写 onclick=函数();
　　　　　　　　　　2. 在js代码中标签对象.onclick = function(){}
　　　　　　2. jQuery绑定事件
　　　　　　　　1. $("选择器").click(function(){...});
　　　　3. 事件委托
　　　　　　原理：事件冒泡
　　　　　　　　　　1. 如何阻止事件冒泡（向上传递）
　　　　　　　　　　　　e.stopPropagation()
　　　　　　目的：解决未来的标签如何绑定事件！
　　　　　　语法：
　　　　　　　　　　　　$("祖先标签").on("click", "选择器", function(){...})

3. 今日作业
1. 整理blog
2. 把课上的代码自己敲一遍
3. 事件冒泡的例子自己敲一遍
4. 把黄袍哥开除的例子

查看全文

相关阅读:
关于分布式系统中雷同集群技术及原理，你知道多少？
如何在PHP中进行会话处理？
PHP的isset()、is_null、empty()使用总结
 Mycatweb的介绍与搭建
 企业如何部署开源邮箱系统？
企业如何选择合适的邮箱系统？
Ansible原理与安装部署
 gRPC的简介与实例详解
 高效的性能测试工具-wrk
轻松玩转windows之wamp开发环境部署

原文地址：https://www.cnblogs.com/zhuangdd/p/12991163.html