jQuery 操作标签
Posted yangli0504
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 操作标签相关的知识，希望对你有一定的参考价值。
一. 今日面试
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>
以上是关于jQuery 操作标签的主要内容，如果未能解决你的问题，请参考以下文章