5 Jun 18 jQuery

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

5 Jun 18

一. 今日面试

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

os 这个模块提供了一种方便的使用操作系统函数的方法。

os: This module provides a portable way of using operating system dependent functionality.

sys 这个模块可供访问由解释器使用或维护的变量和与解释器进行交互的函数。

sys: This module provides access to some variables used or maintained by the interpreter and to functions that interact strongly with the interpreter.

总结就是，os模块负责程序与操作系统的交互，提供了访问操作系统底层的接口;sys模块负责程序与python解释器的交互，提供了一系列的函数和变量，用于操控python的运行时环境。

import os

BASE_DIR = os.path.abspath(__file__) # 取当前文件的绝对路径

BASE_DIR2 = os.path.dirname(os.path.abspath(__file__)) # 取当前文件的父目录的路径

path = os.path.join(BASE_DIR, "abc") # 在当前父目录下拼接一个abc的文件夹路径

# path1 = BASE_DIR + "\abc" # 不推荐使用硬编码的形式拼接路径,不同平台的拼接方式不同

import sys

sys.path.append() # 向当前运行的环境变量中添加一个指定的路径

if __name__ == '__main__': # 取用户输入的参数

print(sys.argv)

print(sys.argv[1])

print(sys.argv[2])

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

re json hashlib time datetime socket thread functools

3. 有没有用过functools模块？

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

from functools import partial

def f(a, b):

return a + b

f(1, 2)

f(100, 200)

f3 = partial(f,3) #利用partial和f生成一个默认加3 的一个f3函数

ret = f3(100) # 默认加3

print(ret)

from functools import reduce

a = range(1,6)

print(reduce(lambda x,y:x+y,a))# 15

4. 执行完第一个for循环后，查看trELe（for循环内部的）发现trELe是for循环结束后产生的trELe。原因，但查看时trELe时，for循环已经全部结束

执行完第二个for循环后，查看到的trELe.innerHTML（for循环内部的)是每一次循环的到的trEle.innerHTML

二、内容回顾

1. find()和filter（）

2. 作业讲解（见文档后）

this：点谁是谁；触发方法的那个一

三. 今日内容

1. 操作样式

1. 直接操作css属性（一个参数，获取值；两个参数，设置值）

$("p").css("color","red") //DOM操作：tag.style.color="red"

2. 位置相关（固定定位和绝对定位是脱离文档流的）

1. 相对定位 --> 相对自己原来的位置

2. 绝对定位 --> 相对已经定位过的父标签

3. 固定定位 --> 相对浏览器窗口

offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置（相对定位）（可查，可改）

position() // 获取匹配元素相对父元素的偏移（绝对定位）（只能查，不能改）

scrollTop() // 获取匹配元素相对滚动条顶部的偏移

scrollLeft() // 获取匹配元素相对滚动条左侧的偏移

应用：返回顶部（见文档后）

3. 尺寸

盒子模型：内容-> 内填充-> 边框-> 外边距

height() # content

width() # content

innerHeight() # content+padding

innerWidth() # content+padding

outerHeight() # content+padding+border

outerWidth() # content+padding+border

4. 文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容

html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容

text(val)// 设置所有匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值

val(val)// 设置所有匹配元素的值

val([val1, val2])// 设置checkbox、select的值

示例：

$("input[name='gender']:checked").val()

$("#s1").val("shanghai");

$("#s2").val(["basketball", "football"]);

应用：自定义登陆校验示例（见文档后）

5. 属性操作

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值

attr(attrName, attrValue)// 为所有匹配元素设置一个属性值

attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值

removeAttr()// 从每一个匹配的元素中删除一个属性

# 如果把attr应用与checkbox或radio，选中的为checked，未选中的为undefined，不利于后续布尔判断；因此，不推荐将attr应用与checkbox或radio，推荐使用prop

用于checkbox和radio

prop() // 获取属性

removeProp() // 移除属性

例子：

$(":checkbox[value='1']").prop("checked", true);

$(":radio[value='2']").prop("checked", true);

</script>

应用：全选，反选，取消（见文档后）

6. 文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A

$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A

$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面

$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面

$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。

empty()// 删除匹配的元素集合中所有的子节点

替换

replaceWith()

replaceAll()

克隆

clone()// 参数

应用：克隆（见文档后）

7. 注意：jQuery没有创建标签的功能，创建标签只能用DOM

四. 应用练习

0.左侧菜单（作业）

<!DOCTYPE html>

<head>

<title>左侧菜单作业</title>

<style>

.hide {

display: none;

}

.title {

height: 40px;

100px;

color: white;

border-bottom: 1px solid black;

line-height: 40px;

text-align: center;

}

</style>

</head>

<body>

</div>

</div>

</div>

var $titleEles = $(".title");

// $titleEles.on("click", function () {}

$titleEles.click(function () {

// 方法一

// $(".body").addClass("hide");

// $(this).next().removeClass("hide");

// 方法二

$(this).next().removeClass("hide").parent().siblings().find(".body").addClass("hide");

})

</script>

</body>

</html>

1.返回顶部

<!DOCTYPE html>

<head>

<title>位置相关示例之返回顶部</title>

<style>

.c2 {

height: 50px;

50px;

position: fixed;

bottom: 15px;

right: 15px;

}

.hide {

display: none;

}

</style>

</head>

<body>

。。。。

$(window).scroll(function () {

if ($(window).scrollTop() > 100) {

$("#b2").removeClass("hide");

}else {

$("#b2").addClass("hide");

}

});

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

$(window).scrollTop(0);

})

</script>

</body>

</html>

2. 自定义登陆校验示例

<!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");

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

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

flag = false;

}

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

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

flag = false;

}

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

# return false, 阻止进行下一个事件（如果不满足条件，按submit，不刷新）

})

</script>

</body>

</html>

3. 全选，反选，取消

<!DOCTYPE html>

<head>

<title>全选反选取消练习</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

// 全选

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

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

});

// 取消

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

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

});

// 反选

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

// 方法1

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

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

// var $currentCheckbox = $($checkboxs[i]);

// if ($currentCheckbox.prop("checked")){

// // 如果之前是选中的

// $currentCheckbox.prop("checked", false);

// }else {

// // 之前没有选中

// $currentCheckbox.prop("checked", true);

// }

// 方法1

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

var $currentCheckbox = $($checkboxs[i]);

var flag = $currentCheckbox.prop("checked");

$currentCheckbox.prop("checked", !flag)

}

});

</script>

</body>

</html>

4. 克隆

<!DOCTYPE html>

<head>

<style>

.b1 {

height: 50px;

100px;

color: white;

}

</style>

</head>

<body>

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

// $(this).after($(this).clone());

$(this).clone(true).insertAfter(this);

})

# clone（）只克隆标签；clone（true）克隆标签和事件

</script>

</body>

</html>