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() // 移除属性

例子:

<input type="checkbox" value="1">

<input type="radio" value="2">

<script>

$(":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>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style>

.hide {

display: none;

}

.title {

height: 40px;

width: 100px;

color: white;

border-bottom: 1px solid black;

line-height: 40px;

text-align: center;

}

</style>

</head>

<body>

<div class="menu">

<div class="item">

<div class="title">菜单一</div>

<div class="body hide">

<div>内容一</div>

<div>内容一</div>

<div>内容一</div>

<div>内容一</div>

</div>

</div>

<div class="item">

<div class="title">菜单二</div>

<div class="body hide">

<div>内容二</div>

<div>内容二</div>

<div>内容二</div>

<div>内容二</div>

</div>

</div>

<div class="item">

<div class="title">菜单三</div>

<div class="body hide">

<div>内容三</div>

<div>内容三</div>

<div>内容三</div>

<div>内容三</div>

</div>

</div>

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

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>

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

}

.hide {

display: none;

}

</style>

<script src="jquery-3.3.1.min.js"></script>

</head>

<body>

<div class="c3">1</div>

<div class="c3">2</div>

<div class="c3">3</div>

<div class="c3">4</div>

。。。。

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>

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

2. 自定义登陆校验示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style>

.error {

color: red;

}

</style>

</head>

<body>

<form action="">

<p>

<label for="username">用户名</label>

<input type="text" id="username" name="username">

<span class="error"></span>

</p>

<p>

<label for="pwd">密码</label>

<input type="password" id="pwd" name="pwd">

<span class="error"></span>

</p>

<p>

<input type="submit" id="b1" value="登录">

</p>

</form>

<script src="jquery-3.3.1.min.js"></script>

<script>

$("#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>

<html lang="en">

<head>

<meta charset="UTF-8">

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

</head>

<body>

<button id="b1">全选</button>

<button id="b2">取消</button>

<button id="b3">反选</button>

<table border="1">

<thead>

<tr>

<th>#</th>

<th>姓名</th>

<th>爱好</th>

</tr>

</thead>

<tbody>

<tr>

<td><input type="checkbox"></td>

<td>Egon</td>

<td>喊麦</td>

</tr>

<tr>

<td><input type="checkbox"></td>

<td>Alex</td>

<td>吹牛逼</td>

</tr>

<tr>

<td><input type="checkbox"></td>

<td>Yuan</td>

<td>不洗头</td>

</tr>

</tbody>

</table>

<script src="jquery-3.3.1.min.js"></script>

<script>

// 全选

$("#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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>克隆</title>

<style>

.b1 {

height: 50px;

width: 100px;

color: white;

}

</style>

</head>

<body>

<button class="b1">屠龙宝刀,点击就送</button>

<script src="jquery-3.3.1.min.js"></script>

<script>

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

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

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

})

#  clone()只克隆标签;clone(true)克隆标签和事件

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/zhangyaqian/p/py20180605.html

时间: 2024-11-08 15:27:18

5 Jun 18 jQuery的相关文章

8 Jun 18 Bootstrap

8 Jun 18 一.今日面试题 设计表结构(外键约束怎么建?) http://www.cnblogs.com/linhaifeng/articles/7238814.html#_label6 二.昨日内容补充:滚动的进度条 三.今日内容 Bootstrap常用组件 导航条不用放在container中:页面其他内容(大部分)需要放在container中 导航条中的悬浮用.navbar_left: 页面其他内容(大部分)的悬浮用pull_left 2. Bootstrap常用插件 1. 模态框 2

11 Jun 18 复习, pymsql

12   Jun 18 复习 pymysql,orm pymysql 的安装 pip3 install pymysql 2.  pymysql的基本语法 mport pymysql conn = pymysql.connect( host="127.0.0.1", port=3306, user="root", password="123", database="day62", charset="utf8"

13 Jun 18 复习, Mac中不同版本的python调用

13   Jun 18 复习 mac中python的安装 调python3 :/usr/local/bin/python3 调python2(系统自带): /usr/bin/python 在/etc/paths中设置环境变量路径的搜索优先级 当做如上设定时,先检索/usr/local/bin,后检索/usr/bin,故而在cmd中输入python可直接调出python3 原文地址:https://www.cnblogs.com/zhangyaqian/p/py201806130.html

15 Jun 18 复习, shutil模块

15 Jun 18 复习shutil模块(高级的文件.文件夹.压缩包 处理模块) shutil.copyfileobj(fsrc, fdst[, length])  #将文件内容拷贝到另一个文件中 import shutil shutil.copyfileobj(open('old.xml','r'), open('new.xml', 'w')) shutil.copyfile(src, dst)  # 拷贝文件 import shutil shutil.copyfile('f1.log', '

5 Jun 18 复习,模块

5 Jul 17 复习,内置模块与第三方模块 一.time与datetime import time # 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量. print(time.time())  # 1528188733.8373 # 格式化的时间字符串(Format String) print(time.strftime("%Y-%m-%d %X"))  # 2018-06-05 16:52:13 # 结构化的时间(st

18 Jquery 过滤查找方法

原文地址:https://www.cnblogs.com/springsnow/p/9461734.html

JS /jquery 时间戳与日期转换

(function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /** * 日期 转换为 Unix时间戳 * @param <string> 2014-01-01 20:20:20 日期格式 * @return <int> unix时间戳(秒) */ DateT

jQuery基础(样式篇,DOM对象,选择器,属性样式)

1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. $(document).ready(function() {   内容  }); 1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的 普通处理,通过标准JavaScript处理: var p = document.getElementById

jQuery基础(DOM篇,append(),after(),prepend(),insertAfter(),节点删除,遍历方法each())

1.DOM创建节点及节点属性   创建流程比较简单,大体如下: - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法: - 创建元素:document.createElement - 设置属性:setAttribute - 添加文本:innerHTML - 加入文档:appendChild   2.jQuery节点创建与属性的处理 创建元素节点: 可以有几种方式,后面会慢慢接触.常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来