4 Jun 18 jQuery

# 图片太多，详细见link 以及文本

4 Jun 18

一、今日面试

题目：每次调用f的时候在打印"2018-06-04"之前打印一句开始，之后再打印一句结束

from functools import wraps

def wrapper(func):

# 装饰器修复技术

@wraps(func)

def inner(*args, **kwargs):

print("start")

ret = func(*args, **kwargs)

print("end")

return ret

return inner

@wrapper

def f(*args, **kwargs):

"""

这是一个测试装饰器的函数，没什么其他的用法

:param args:

:param kwargs:

:return:

"""

print("2018-06-04")

f()

print(f.__doc__) # 如果不加装饰器的修复技术，打出的inner函数的__doc__

print(f.__name__) # 如果不修复，打出的是inner

# 不加装饰器修复技术的输出

# 加装饰器修复技术，以及之后的输出

装饰器的相关知识点

1.装饰器的原理及为什么要用装饰器

2. 装饰器的基本用法

3. 带参数的装饰器

4. 被装饰的函数有返回值怎么处理

5. 多个装饰器的执行顺序

6. 装饰类的装饰器

Python的知识点

1. 语法基础

2. 数据类型及内置方法

3. 函数

1. 匿名函数

2. 三元运算

3. 递归

4. 装饰器

4. 迭代器和生成器

5. 模块

1. 内置模块

- os

- sys

- re

- json

- time和datetime

- socket

- random

- hashlib

...

2. 第三方模块

- pymysql

...

6之前

1. 面向过程

6. 面向对象

-类

-三大特性

7. 网络编程

- socket通信的简单示例

8. 并发编程

-面试问的比较多

9. 数据库

增

删

改

查

-连表查询

10. 前端

HTML

1.展示信息

2. 获取用户输入信息

form表单系列

form表单提交数据的注意事项

1. form表单要设置action和method

2. 所有获取用户输入内容的input等都要放在form内部，并且都要有name属性

3. 提交按钮一定要是submit类型

CSS

1. CSS选择器

2. CSS属性

1. 语法基础

1. 变量

2. 函数

2. 内置的对象

- RegExp

- JSON

- Date

3. BOM和DOM

- location

- DOM树的概念

- 如何创建标签

- 如何找标签

- 如何修改标签的样式

二、jQuery

1. jQuery是什么？是一个轻量级的，兼容多浏览器的JS库（write less, do more）

1. 是一个工具，简单方便的实现一些DOM操作

2. 不用jQuery完全可以，但是不明智。

3. jQuery能做的事儿

1. 查找标签

2. 修改样式

3. 事件

4. AJAX （Django中讲）

5. 插件机制

4. jQuery是一个类库，类似于Python中的模块

A、使用时将相关文件（.js）拖进html文件中 <script src="jquery-3.3.1.min.js"></script>

B、想要使用jQuery，一定要先导入再使用！！！

C、jQuery == $（使jQuery更简洁）

5. 初识jQuery（更简洁）

# 用DOM实现对样式进行更改

# 导入jQuery，用jQuery实现对样式进行更改

2. jQuery版本

官网：https://jquery.com

压缩版和未压缩版的区别（两者实现的功能是一致的，压缩版的size更小；有上线需求的时候用压缩版，在开发过程中（可能需要查看源码）时用未压缩版）

2. 1.x和3.x都可以使用（1.x兼容ie678，目前主要维护的是3.x）

3. jQuery的内容

用jQuery方法找标签后得到的是jQuery对象，jQuery对象[index]，转成DOM对象

用DOM方法找标签后得到的是DOM对象，$(DOM对象)，转成jQuery对象

约定：在声明一个jQuery对象变量时在变量名前加$

Ps（补充）：

A、p标签不能套div标签（硬套的话，前面和后面的p自动加闭合）

B、label与input连用的两种方式（如果单写一个input飘黄；加上label后，在鼠标在页面上点击label相应的input-text有反应）

<label>username

</label>

<label for="i1">password</label>

C、li{$$$}*5+ Tab

基本的语法：(找标签).(要做的事儿)$(selector).action()

找标签（大体上同CSS）

A、选择器

id选择器：$("#id")

标签选择器：$("tagName")

class选择器：$(".className")

配合使用（交集选择器）：$("div.c1") // 找到有c1 class类的div标签

所有元素选择器（通配符选择器）：$("*")

组合选择器（并集选择器）：$("#id, .className, tagName")

层级选择器（x和y可以为任意选择器）：

$("x y"); // x的所有后代y（子子孙孙）

$("x > y"); // x的所有儿子y（儿子）

$("x + y"); // 找到所有紧挨在x后面的y

$("x ~ y"); // x之后所有的兄弟y

基本筛选器（和之后的筛选器达到的效果一致，更倾向用后者，使结构更简洁）：

:first // 第一个

:last // 最后一个

:eq(index) // 索引等于index的那个元素

:even // 匹配所有索引值为偶数的元素，从0 开始计数

:odd // 匹配所有索引值为奇数的元素，从0 开始计数

:gt(index) // 匹配所有大于给定索引值的元素

:lt(index) // 匹配所有小于给定索引值的元素

:not(元素选择器) // 移除所有满足not条件的标签

:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

基本筛选器例子：

$("div:has(h1)")//找到所有后代中有h1标签的div标签

$("div:has(.c1)")//找到所有后代中有c1样式类的div标签

$("li:not(.c1)")//找到所有不包含c1样式类的li标签

$("li:not(:has(a))")//找到所有后代中不含a标签的li标签

$(“#my-checkbox input: not(:checked)”)

属性选择器

[attribute]

[attribute=value] // 属性等于

[attribute!=value] // 属性不等于

属性选择器例子：

$("input[type='checkbox']"); // 取到checkbox类型的input标签

$("input[type!='text']"); // 取到类型不是text的input标签

表单常用筛选

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

表达常用筛选例子：

$(":checkbox") // 找到所有的checkbox

表单对象属性：

:enabled

:disabled

:checked

:selected

表单对象例子：

<form>

</form>

$("input:enabled") // 找到可用的input标签

</select>

$(":selected") // 找到所有被选中的option

B、筛选器

下一个元素：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()

$("#id").parents() // 查找当前元素的所有的父辈元素

$("#id").parentsUntil()//查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们

$("#id").siblings();// 兄弟们

查找元素：

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充：

.first()// 获取匹配的第一个元素

.last()// 获取匹配的最后一个元素

.not()// 从匹配元素的集合中删除与指定表达式匹配的元素

.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

jQuery版的模态框

<!DOCTYPE html>

<head>

<title>jQuery版模态框</title>

<style>

.cover {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 999;

}

.modal {

background-color: white;

height: 300px;

500px;

position: absolute;

top: 50%;

left: 50%;

z-index:1000;

margin-top: -150px;

margin-left: -250px;

}

.hide {

display: none;

}

</style>

</head>

<body>

<div>

<p>在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>

</div>

<p>

<label>用户名

</label>

</p>

<p><label>密码

</label></p>

<p>

</p>

</form>

</div>

// 找到按钮，给它绑定事件

var b1Ele = $("#b1")[0];

b1Ele.onclick = function () {

// 事件触发后，找到那两个div,移除它们的hide 样式类

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

};

var cancelButton = $("#cancel")[0];

cancelButton.onclick = ()=>{

// 事件触发后，找到那两个div,给它们添加hide 样式类

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

}

</script>

</body>

</html>

jQuery支持链式调用
1. 链式调用的原理：调用一个实例化方法返回的是当前的实例对象

class Person(object):

def __init__(self, name):

self.name = name

def sleep(self):

print("{} 在睡觉！".format(self.name))

return self

def play_majiang(self):

print("{} 在打麻将".format(self.name))

return self

p1 = Person("张学友")

p1.sleep().play_majiang()

jQuery支持链式调用

3. 操作标签的样式

1. 直接改

2. 通过class名去改

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。