前端-part7-jQurey选择定位
原创
1.实现一个弹出框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>我的弹出框</title>
<style>
* {
margin: 0;
padding: 0;
}
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 99;/*决定了覆盖的顺序*/
}
/**/
.modal {
height: 300px;
width: 700px;
position: absolute;
background-color: white;
margin-left: 350px;
margin-top: 200px;
z-index: 100;/*决定了覆盖的顺序*/
}
.close {
float: right;
padding: 10px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<button id="d1">点我</button>
<div class="cover hidden"></div>
<div class="modal hidden">
<span class="close" id="s1">X</span>
</div>
<script src="jQuery3.4.1.js"></script>
<script>
var d1Ele = document.getElementById("d1");
var coverEle = document.getElementsByClassName("cover")[0];
var modalEle = document.getElementsByClassName("modal")[0];
var closeEle = document.getElementById("s1");
d1Ele.onclick = function (ev) {
coverEle.classList.toggle("hidden");
modalEle.classList.toggle("hidden");
};
closeEle.onclick = function () {
coverEle.classList.toggle("hidden");
modalEle.classList.toggle("hidden");
}
</script>
</body>
</html>2.定时计时器的练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">停止</button>
<script>
var i1Ele = document.getElementById("i1");
var t;
function f() {
var now = new Date();
i1Ele.value = now.toLocaleString();
}
f();
var b1Ele = document.getElementById("b1");
// 点开始
b1Ele.onclick = function (ev) {
if (!t) { // 防止重复任务被提交
t = setInterval(f, 1000)
}
};
var b2Ele = document.getElementById("b2");
// 点停止
b2Ele.onclick = function (ev) {
clearInterval(t); // 根据id清除定时任务
console.log(t);
t = null;
}
</script>
</body>
</html>3.层级选择器
$("X Y"); // X的所有后代Y
$("X>Y");// X的所有儿子Y
$("X+Y");// 找到所有紧挨着X后面的Y
$("X~Y");// X之后的所有兄弟Y4.基本筛选器
:first // 第一个
:last // 最后一个
:ep(index) // 索引值等于 index 的那个元素
:event // 匹配所有索引值为偶数的元素
:odd // 匹配所有索引值为奇数的元素
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足 not 条件的标签
:has(元素选择器) // 选择包含一个或者多个标签在内的标签(指的是从后台元素里面查找)5.样式类
addClass(); // 添加指定样式类
removeClass(); // 移除指定样式类
hasClass(); // 判断是否具有样式类
toggleClass(); // 切换样式类，有的话就移除，没有的话就添加6.一般的属性选择，跟 selenium 里面的 css 定位是一样的
$("input[type='text']")
$("input[type!='text']")7.筛选器
$("#id").next(); // 下一个
$("#id").nextAll(); // 从一下个开始往下到所有
$("#id").nextUntil(); // 从下一个开始往下直到
$("#id").prev(); // 上一个
$("#id").prevAll(); // 从上一个开始往上到所有
$("#id").prevUntil(); // 从上一个开始往上直到
$("#id").parent(); // 找到当前元素的父元素
$("#id").parents(); // 找到当前元素的所有父元素
$("#id").parentsuntil(); // 找到当期元素的所有父元素，直到匹配到那个元素为止
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
$("#id").find("p"); // 联合匹配查找
//等价于 $("div p")
$("div").fileter(".c1") // 从结果合集中过滤出含有c1样式类的
//等价于 $("div.c1")
.first() // 获得匹配的第一个元素
.last() // 获得匹配元素的最后一个元素
.not() // 从匹配元素的集合中删除或指定匹配的元素原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录