6 Jun 18 jQuery

6 Jun 18

一、今日面试题（面向对象）

1. 谈谈你对面向对象的理解?

扩展方便；上帝视角，造一些对象(对象是特征与技能的结合体)，让他们之间发生反应

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

方便代码重用，可以多继承

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

菱形继承的背景下，查找属性时：

1、经典类：深度优先

在python2中，A为经典类，F->D->B->A->E->C

2、新式类：广度优先

在python3中，A为新式类，F->D->B->E->C-A->object

4. 面向对象中super的作用？

A内super会基于C.mro()继续往后找；子代继承父代的方法

5. 列举面向对象中特殊成员(带双下划线的特殊方法，如：__new__、__init__、__call__等)

__new__ # 创建对象

__init__ # 初始化对象

__call__ # 调用对象

__str__ # print打印一个对象时 __unicode__(python2中)

__repr__ # 输入对象回车找的是__repr__; print先找__str__，没有__str__找__repr__

__doc__ # 查看文档注释

__getattr__

__setattr__

__del__ # 删除对象

6. 静态方法和类方法区别？

@staticmethod 不主动传值，只是一个单纯的函数

@classmethod 类调用时，将类本身作为第一个参数传入

7. 面向对象三大特性：封装、继承、多态

二、作业讲解（新增，删除，取消）

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.cover {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(0,0,0,0.4);

z-index: 9;

}

.modal {

position: absolute;

left:50%;

top: 50%;

height: 300px;

400px;

background-color: white;

z-index: 10;

margin-top: -150px;

margin-left: -200px;

}

.hide {

display: none;

}

</style>

</head>

<body>

<thead>

<tr>

<th>HOBBY</th>

<th>OPERATION</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

<tr>

<td>Dance</td>

<td>

</td>

</tr>

<tr>

<td>Speak</td>

<td>

</td>

</tr>

</tbody>

</table>

<p>

<button id="submit">submit</button>

<button id="cancel">cancel</button>

</p>

</div>

// 定义一个隐藏模态框的函数

function hideModel(){

$(".cover,.modal").addClass("hide");

}

$("#add").click(function(){

// 点击新增按钮要做的事儿

// 1. 弹出模态框

$(".cover,.modal").removeClass("hide");

});

$("#submit").click(function(){

// 点击提交按钮要做的事儿

// 1. 取值，取模态框中用户填写的值

let username=$("#username").val();

let hobby=$("#hobby").val();

// 2. 隐藏模态框

hideModel()

// 3. 创建tr标签，追加td，要拼接序号和用户填写的信息

let trELe=document.createElement("tr");

let td1=document.createElement("td");

td1.innerText=$("table tr").length;

$(trELe).append(td1);

let td2=document.createElement("td");

td2.innerText=username;

$(trELe).append(td2);

let td3=document.createElement("td");

td3.innerText=hobby;

$(trELe).append(td3);

// clone,不推荐使用clone；如果表中没有数据，没有可clone的对象

// $("table td").last().clone().appendTo(trEle);

let td4=document.createElement("td");

td4.innerHTML =`

$(trELe).append(td4);

// 4. 追加到table tbody标签的最后

$("tbody").append(trELe);

});

$("#cancel").on("click",function(){

// 点击取消

// 1. 把模态框隐藏

hideModel();

// 2. 把之前填写的清空掉

$("#username,#hobby").val("");

});

// 如果不用委托，会导致新增的数据删除不了；这是因为绑定事件发生在最开始（刷新时），后续用js方法创建的对象的相应属性没有被绑定上该事件

// 事件委托: 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

// 事件冒泡：是从触发事件的那个节点一直到document，是自下而上的去触发事件。

$("table").on("click",".delete",function(){

// 删除按钮点击要做的事儿

// 1.更新序号...

// 把当前行后面的所有tr的第一个td的值-1

let $currentTr=$(this).parent().parent();

let $nextAllTr=$currentTr.nextAll();

for (let i=0;i<$nextAllTr.length;i++){

let n=$($nextAllTr[i]).children().first().text();

$($nextAllTr[i]).children().first().text(n-1);

}

// 2. 把当前点击按钮所在的行删掉

$currentTr.remove();

})

</script>

</body>

</html>

三、今日内容

A. 常用事件

1. hover

应用：导航条中，鼠标悬浮于购物车时显示购物车内容

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body {

margin: 0;

}

.nav {

height: 40px;

background-color: #3d3d3d;

100%;

}

ul {

list-style-type: none;

padding: 0;

margin: 0;

}

a {

text-decoration: none;

}

.nav a {

color: #999;

}

.nav a:hover {

color: white;

}

.nav li {

float: left;

height: 40px;

line-height: 40px;

margin-right: 15px;

padding: 0 10px;

}

.nav li:hover {

background-color: black;

}

.father {

position:relative;

}

.son {

height: 100px;

200px;

background-color: blue;

color: white;

position: absolute;

left: 0;

top: 40px;

margin: 0;

display: none;

}

.show {

display: block;

}

</style>

</head>

<body>

<ul>

<li><a href="">login</a></li>

<li><a href="">register</a></li>

<li class="father"><a href="">shopping cart</a>

</li>

</ul>

</div>

// 鼠标移到.father 上时让.son 添加一个.show

// hover()接收两个参数，一个为鼠标悬浮的事件，一个为鼠标移除的事件

$(".father").hover(

function(){

$(this).find(".son").addClass("show");

function(){

$(this).find(".son").removeClass("show");

}

)

</script>

</body>

</html>

2. keydown和keyup

3. change

应用：批量操作（键盘按住shift，可以批量修改选中行的值）（含each的应用）

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<thead>

<tr>

<th>operation</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<option value="1">operation1</option>

<option value="2">operation2</option>

<option value="3">operation3</option>

</select>

</td>

</tr>

<tr>

<td>

<option value="1">operation1</option>

<option value="2">operation2</option>

<option value="3">operation3</option>

</select>

</td>

</tr>

<tr>

<td>

<option value="1">operation1</option>

<option value="2">operation2</option>

<option value="3">operation3</option>

</select>

</td>

</tr>

<tr>

<td>

<option value="1">operation1</option>

<option value="2">operation2</option>

<option value="3">operation3</option>

</select>

</td>

</tr>

<tr>

<td>

<option value="1">operation1</option>

<option value="2">operation2</option>

<option value="3">operation3</option>

</select>

</td>

</tr>

</tbody>

</table>

let flag=false;

// 如何获取用户按下那个按键

// e表示事件本身；shift的keycode是16

$(window).on("keydown",function(e){

console.log(e.keyCode);

if (e.keyCode===16){

flag=true;

}

});

// 绑定一个按键抬起的事件,将flag重置为false，即将批量修改的效果取消

$(window).on("keyup",function(e){

if(e.keyCode===16){

flag=false;

}

});

// 找到select标签绑定change事件

$("select").on("change",function () {

// 拿到当前select标签的值

let v=$(this).val();

// 判断一下当前行是否被选中

let isCheck=$(this).parent().parent().find("input:checkbox").prop("checked");

// 如果是批量编辑模式，就要找到所有被选中的行，然后将其select置为和我一样的值

// 如果shift被按住且被触发的确实被选中

if (flag && isCheck){

// 用for循环，找到所有被选中的行

// let $allChecked=$("input:checked");

// for (let i=0;i<$allChecked.length;i++){

// $($allChecked[i]).parent().parent().find("select").val(v);

// }

// 也可使用each循环

$("input:checked").each(function () {

$(this).parent().parent().find("select").val(v);

})

}

// 如果不是批量编辑模式，什么都不干

});

$("#b1").click(

function(){

$("table :checkbox").prop("checked",true);

}

);

$("#b2").click(

function(){

$("table :checkbox").prop("checked",false);

}

);

$("#b3").click(

function(){

var $checkboxs=$("table :checkbox")

for (let i=0;i<$checkboxs.length;i++){

current_checkbox=$checkboxs[i]

$(current_checkbox).prop("checked",!$(current_checkbox).prop("checked"))

}

)

</script>

</body>

</html>

4. focus和blur

5. input

应用：获取光标，移除光标，输入框内容变化（input）

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

// 当input框获取焦点时触发

$("#i1").on("focus",function(){

console.log(123);

});

// 当input框失去焦点时触发

$("#i1").on("blur",function(){

console.log($(this).val());

});

// 当input框的值发生变化时触发

$("#i1").on("input",function(){

console.log($(this).val());

})

</script>

</body>

</html>

B. 事件绑定的方式（详见前面例子）

1. .click(function(){...})

2. .on("事件名称", function(){...}) # 1,2效果等同

3. 事件委托

语法：

.on("事件名称", "选择器", function(){...})

特点：

1. 利用事件冒泡的特点

2. 基于一个已经存在的标签给未来的标签添加事件处理函数

C. return false；阻止后续事件的执行

应用：登陆注册示例

<!DOCTYPE html>

<head>

<title>登录注册示例</title>

<style>

.error {

color: red;

}

</style>

</head>

<body>

<p>

</p>

<p>

</p>

<p>

</p>

</form>

$("#b1").click(function () {

var flag = true;

$(".error").text("");

var $username = $("#username");

var $pwd = $("#pwd");

// 取input框的值判断长度是否为0

if ($username.val().length === 0){

// 用户名没有输入, 提示

$username.next().text("用户名不能为空！");

flag = false;

}

if ($pwd.val().length === 0){

// 用户名没有输入, 提示

$pwd.next().text("密码不能为空！");

flag = false;

}

return flag; // 阻止后续事件的执行

})

</script>

</body>

</html>

D. 页面加载完成后执行（ready）

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

不用ready的话，可以将script放在body的最后面；否则报错
可以用ready，并将要执行的代码放入ready里
一般，我们会将代码放入ready，并将ready放在body的最后面

ready的两种写法

$(document).ready(function(){

//在这里写你的JS代码...

})

$(function(){

//你在这里写你的代码

}) # 一般不用，要看懂

应用：页面加载完执行

<!DOCTYPE html>

<head>

<title>页面加载完执行</title>

</head>

<body>

// ready的第一种写法

$(document).ready(function () {

var d1Ele = document.getElementById("d1");

console.log(d1Ele);

console.log(d1Ele.innerText);

});

// ready的第二种写法，一般不用，要看懂

// $(function () {

// var d1Ele = document.getElementById("d1");

// console.log(d1Ele);

// console.log(d1Ele.innerText);

// })

</script>

</body>

</html>

E. jQuery自带的动画效果（一般不用）

// 基本

show([s,[e],[fn]])

hide([s,[e],[fn]])

toggle([s],[e],[fn])

// 滑动

slideDown([s],[e],[fn])

slideUp([s,[e],[fn]])

slideToggle([s],[e],[fn])

// 淡入淡出

fadeIn([s],[e],[fn])

fadeOut([s],[e],[fn])

fadeTo([[s],o,[e],[fn]])

fadeToggle([s,[e],[fn]])

// 自定义（了解即可）

animate(p,[s],[e],[fn])

应用：点赞

<!DOCTYPE html>

<head>

<title>点赞动画示例</title>

<style>

div {

position: relative;

display: inline-block;

}

div>i {

display: inline-block;

color: red;

position: absolute;

right: -16px;

top: -5px;

opacity: 1;

}

</style>

</head>

<body>

$("#d1").on("click", function () {

var newI = document.createElement("i");

newI.innerText = "+1";

$(this).append(newI);

$(this).children("i").animate({

opacity: 0

}, 1000)

})

</script>

</body>

</html>

F. each（详见前面示例）

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]

$.each(li,function(i, v){

console.log(i, v);//index是索引，ele是每次循环的具体元素。

})

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this 总是指向这个元素。

// 为每一个li标签添加foo

$("li").each(function(){

$(this).addClass("c1");

});

在遍历过程中可以使用return false提前结束each循环。

return只能结束本次循环，不能跳出each循环

G. .data() (具体应用详见明天作业)

$("div").data("k",100); //给所有div标签都保存一个名为k，值为100

$("div").data("k"); //返回第一个div标签中保存的"k"的值

$("div").removeData("k"); //移除元素上存放k对应的数据