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)
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>
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>
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; width: 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. 把黄袍哥开除的例子
