当前位置： 首页 > news >正文

【Web前端】jQuery入门与基础（二）

news 2025/5/25 10:27:18

jQuery_CSS操作

样式尺寸设置

.css() 获取和设置匹配元素的样式

获取样式值：

<!DOCTYPE html>
<html>
<head><style>div {width: 60px;height: 60px;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div style="background-color:#123456;">div容器</div><script>var color = $("div").css("background-color");console.log(color);</script>
</body>
</html>

设置样式值

<!DOCTYPE html>
<html>
<head><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p>Hello,CSS</p><script>$("p").css("color", "red");</script>
</body>
</html>

.height()，.width() 获取元素的当前高度值宽度值或设置元素的高度值宽度值

<!DOCTYPE html>
<html>
<head><style>div {width: 100px;height: 100px;margin: 5px;background: rgb(255, 140, 0);}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div></div><script>$("div").height(200).width(200)</script>
</body>
</html>

.innerHeight() .innerWidth() 为元素的当前计算高度值和宽度值,包括padding但是不包括border

<!DOCTYPE html>
<html>
<head><style>div {width: 100px;height: 100px;padding: 10px;border: 5px solid red;margin: 10px;background: rgb(255, 140, 0);}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div></div><script>var currentHeight = $("div").innerHeight();var currentWidth = $("div").innerWidth();console.log(currentHeight,currentWidth);</script>
</body>
</html>

.outerHeight()，.outerWidth()获取元素的当前宽度值和高度值,包括padding，border和选择性的margin

<!DOCTYPE html>
<html>
<head><style>div{width: 100px;height: 100px;margin: 10px;padding: 5px;border: 10px solid #666;background-color: red;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div></div><p class="text2"></p><script>$(".text2").text("outerWidth:" + $("div").outerWidth() + " , outerWidth(true):" + $("div").outerWidth(true));</script>
</body>
</html>

样式位置设置

.offset() 获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

获取位置

<!DOCTYPE html>
<html>
<head><style>*{margin: 0;padding: 0;}p {margin: 10px;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><p class="text1">Hello</p><p class="text2"></p><script>var offset = $(".text1").offset();$(".text2").html("left: " + offset.left + ", top: " + offset.top);</script>
</body>
</html>

位置设置

<!DOCTYPE html>
<html>
<head><style>div {width: 100px;height: 100px;background-color: red;position: relative;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div></div><script>$("div").offset({ top: 100, left: 100 });</script>
</body>
</html>

.position() 获取元素的当前坐标，相对于offset parent的坐标

温馨提示 .position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同, .offset()是获得该元素相对于document的当前坐标 当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。

<!DOCTYPE html>
<html>
<head><style>*{margin: 0;padding: 0;}.container{width: 300px;height: 200px;border: 2px solid #000;margin-left: 100px;position: relative;}.box {width: 100px;height: 100px;padding: 15px;background-color: red;position: absolute;left: 10px;top: 10px;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div class="container"><div class="box"></div></div><p class="text1"></p><p class="text2"></p><script>var position = $(".box").position();var offset = $(".box").offset();$(".text1").text("left: " + position.left + ", top: " + position.top);$(".text2").text("left: " + offset.left + ", top: " + offset.top);</script>
</body>
</html>

.scrollLeft(), .scrollTop() 获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置

<!DOCTYPE html>
<html>
<head><style>.container {background: #CCCCCC;border: 3px solid #666666;margin: 5px;padding: 5px;width: 200px;height: 200px;overflow: auto;}p {margin: 10px;padding: 5px;border: 2px solid #666;width: 1000px;height: 1000px;}</style><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div class="container"><h1>jQuery</h1><p>CSS</p></div><span class="text"></span><script>$(".container").scrollLeft(300);var scrollLeft = $(".container").scrollLeft();console.log(scrollLeft);</script>
</body>
</html>

jQuery_事件操作

绑定事件处理器

.on() 在选定的元素上绑定一个或多个事件处理函数

$("#button").on("click", function(event){console.log("事件处理器")
});

事件委托

$("#ul").on("click", "li", function(event){console.log($(this).text());
});

.one() 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次

$("#btn").one("click", function() {console.log("这是一个只能触发一次的事件.");
});

.off() 移除一个事件处理函数，移除on事件处理器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><button id="btn1">添加事件按钮</button><button id="btn2">删除事件按钮</button><button id="btn3">按钮</button><script>function aClick() {console.log("点击事件")}$("#btn1").on("click",function () {$("#btn3").on("click", aClick);});$("#btn2").on("click",function () {$("#btn3").off("click", aClick);});</script>
</body>
</html>

鼠标事件

.click() 为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 "click" 事件

$("#btn").click(function() {alert("点击事件");
});

.hover() 将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行

$("li").hover(// 滑入function () {console.log("滑入")},// 滑出function () {console.log("滑出")}
);

.mouseenter() 鼠标进入事件

$("div").mouseenter(function(){console.log("鼠标进入事件");
})

.mouseleave() 鼠标离开事件

$("div").mouseleave(function(){console.log("鼠标进入事件");
})

.mousemove() 鼠标滑动事件

$("div").mousemove(function(){console.log("鼠标进入事件");
})

.mouseover()  鼠标进入事件（注：支持事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>.container{width: 200px;height: 200px;background-color: red;}.box{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="container"><div class="box"></div></div><script>$(".container").mouseover(function(){console.log("鼠标进入事件container");})$(".box").mouseover(function(){console.log("鼠标进入事件box");})</script>
</body>
</html>

.mouseout() 鼠标离开事件（注：支持事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>.container{width: 200px;height: 200px;background-color: red;}.box{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="container"><div class="box"></div></div><script>$(".container").mouseout(function(){console.log("鼠标离开事件container");})$(".box").mouseout(function(){console.log("鼠标离开事件box");})</script>
</body>
</html>

表单事件

.focus() 为 JavaScript 的 "focus" 事件绑定一个获取焦点处理函数或者触发元素上的 "focus" 事件

$('#input').focus(function() {alert('获得焦点事件');
});

.blur() 为 "blur" 事件绑定一个失去焦点处理函数

$('#other').click(function() {$('#target').blur();
});

.change() 为JavaScript 的 "change" 事件绑定一个表单改变处理函数

$('.target').change(function() {alert('内容改变');
});

.submit() 当用户提交表单时就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上

$('#target').submit(function() {alert('表单提交事件');
});

键盘事件

.keydown() 添加键盘按下事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><input type="text" class="username"><script>$(".username").keydown(function(){console.log("键盘");})</script>
</body>
</html>

.keypress() 添加键盘事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><input type="text" class="username"><script>$(".username").keypress(function(){console.log("键盘");})</script>
</body>
</html>

.keyup() 添加键盘抬起事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><input type="text" class="username"><script>$(".username").keyup(function(){console.log("键盘");})</script>
</body>
</html>

浏览器事件

.resize() 添加浏览器窗口发生变化触发事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><script>$(window).resize(function(){console.log("改变浏览器尺寸");})</script>
</body>
</html>

.scroll() 浏览器滚动事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><script>$(window).scroll(function(){console.log("滚动");})</script>
</body>
</html>

事件对象

event.type 获取事件类型

$("#btn").click("click",function(e){console.log(e.type);
})

event.target 获取当前元素对象

$("#btn").click("click",function(e){console.log(e.target);
})

event.currentTarget 获取当前元素对象

target：指向触发事件元素

currentTarget：指向添加事件的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div id="container"><button id="btn">按钮</button></div><script>$("#container").click("click",function(e){console.log("container",e.currentTarget);console.log("container",e.target);})$("#btn").click("click",function(e){console.log("btn",e.currentTarget);console.log("btn",e.target);})</script>
</body>
</html>

event.preventDefault() 如果调用这个方法，默认事件行为将不再触发。

<a href="https://itbaizhan.com">itbaizhan</a>
<script>$("a").click("click",function(e){e.preventDefault();})
</script>

event.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div><button>按钮</button></div><script>$("div").click("click",function(e){console.log("div");})$("button").click("click",function(e){e.stopPropagation();console.log("button");})</script>
</body>
</html>

jQuery_遍历操作

列表遍历

.map() 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul><script>$("li").map(function(index,ele){console.log(index,ele);})</script>
</body>
</html>

.each() 遍历一个jQuery对象，为每个匹配元素执行一个函数

$("li").each(function(index,ele){console.log(index,ele);
})

温馨提示 each和map的返回值不同，map返回一个新的数组，each返回原始数组

.get() 通过jQuery对象获取一个对应的DOM元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul><script>var li = $("li").get(0);li.innerHTML = "新的列表"</script>
</body>
</html>

 树遍历

.children() 获得子元素，可以传递一个选择器参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul class="first"><li>item 1</li><li><ul class="secode"><li>child item 1</li><li>child item 2</li><span>child span</span></ul></li><li>item 3</li></ul><script>$(".first").children().css("border","1px solid red")$(".first").children("li").css("border","1px solid red")</script>
</body>
</html>

.find() 寻找后代元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul class="first"><li>item 1</li><li><ul class="secode"><li>child item 1</li><li>child item 2</li><span>child span</span></ul></li><li>item 3</li></ul><script>$(".first").find("li").css("border","1px solid red")</script>
</body>
</html>

温馨提示 .find()和.children()方法是相似的，但后者只是再DOM树中向下遍历一个层级（注：就是只查找子元素，而不是后代元素）。

.next() 取得元素紧邻的后面同辈元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div>Hello</div><p>内容</p><span>元素</span><script>$("div").next().css("border","2px solid red")</script>
</body>
</html>

.parent() 取得元素的父元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div><p>Hello</p></div><script>$("p").parent().css("border","2px solid red")</script>
</body>
</html>

.siblings() 获得元素的兄弟元素，可以传递一个选择器参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div><p>Hello1</p><p>Hello2</p><span>World</span><p class="text">Hello3</p><p>Hello4</p><p>Hello5</p></div><script>$(".text").siblings().css("border","2px solid red")$(".text").siblings("p").css("border","2px solid red")</script>
</body>
</html>

http://www.xdnf.cn/news/627481.html

相关文章：

  • 免费PDF工具-PDF24V9.16.0【win7专用版】
  • TypeScript基础数据类型详解总结
  • 常见的图像生成模型
  • 嵌入式开发学习日志（linux系统编程--进程（1））Day27
  • winsever2016Web服务器平台安装与配置
  • python训练营day34
  • TIT-2014《Randomized Dimensionality Reduction for $k$-means Clustering》
  • 第十天的尝试
  • 快速排序算法的C++和C语言对比
  • Python实用工具：文件批量重命名器
  • Unity3D仿星露谷物语开发49之创建云杉树
  • 常见算法题目3 -反转字符串
  • 2025年—ComfyUI_最新插件推荐及使用（实时更新）
  • 保姆式一步一步制作B端左侧菜单栏
  • 游园安排--最长上升子序列+输出序列
  • 力扣：《螺旋矩阵》系列题目
  • Vant4+Vue3+Vite开发搭建教程
  • 【Redis】分布式缓存的一系列问题(持久化，主从集群，哨兵，分片集群)
  • 解决Docker容器内yum: not found、apt: not found、apk: command not found等命令找不到问题
  • 开发者工具箱-鸿蒙颜色转换器开发笔记
  • python打卡训练营打卡记录day35
  • 《算法导论(第4版)》阅读笔记：p127-p133
  • C语言 — 内存函数和数据的存储
  • 【Code Agent Benchmark】论文分享No.15：TAU-Bench
  • Windows下编译Zipios
  • 线性回归原理推导与应用（七）：逻辑回归原理与公式推导
  • 解决input框被禁用后无法添加点击事件的几个方案
  • 前端大文件上传性能优化实战：分片上传分析与实战
  • 构建Harbor私有镜像库
  • MySQL--day7--聚合函数