jQuery基础·选择器

最新推荐文章于 2024-04-24 10:00:20 发布

#清词#

最新推荐文章于 2024-04-24 10:00:20 发布

阅读量436

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_54998648/article/details/126468963

版权

本文深入解析了jQuery的基础，包括其选择器的使用，如id选择器、类选择器和属性选择器，以及文档就绪函数在解决HTML代码执行问题上的作用。此外，还介绍了目标元素的各种常见操作方法，如val(), text(), remove(), append(), html()和attr()等。

摘要由CSDN通过智能技术生成

jQuery是一个轻量级的JavaScript类库，它封装了许多关于操作DOM树的方法。例如附加元素、删除元素、获得DOM元素属性、查找元素等。

其中，选择器selector是jQuery的核心，有了选择器，几乎可以随意操作DOM文档。

使用jQuery前，需要在头标签内导入jQuery包。

小知识：

jQuery之文档就绪函数：$().ready();当DOM加载完成后，就会执行文档就绪函数。$就是jQuery，意思是'选择'。文档就绪函数默认选择的就是document。文档就绪函数需要传入一个回调函数作为参数传递。

使用文档就绪函数，灵活解决了html代码按顺序执行的缺陷。有时一些脚本放置在头标签内部，如果是基于现有的DOM元素的话，就会导致未捕获到目标元素的异常。

此外，文档就绪函数能够进行简写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jQueryv3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(()=>{
				console.log("文当加载完成！");
			});
		</script>
	</head>
	<body>
	</body>
</html>

常见的jQuery选择器：

选择器	案例	意义	说明
id选择器	$("#title")	选择id为title的元素	id选择器使用#
类选择器	$(".success")	选择类名为success的元素	类选择器使用.
标签选择器	$(p)	选择所有的p标签	标签选择器直接使用元素名称
属性选择器	$("input:[type=text]")	选择type属性为text的input元素	属性选择器使用:[属性=值]的方式进行选择

目标元素的常见方法：

实例	意义	说明
$("#username").val();	选择id为username的表单元素的value属性	val()方法获取表单元素的值
$("#title").text("jQuery技术");	将id为title的内部文本设置为‘jQuery技术’	text()方法设置元素的内部文本
$("#title").remove();	删除掉id为title的元素	remove()方法用来删除DOM元素
$("#title").append("<span>喜气洋洋</span>");	在id为title的元素内添加'<span>喜气洋洋</span>'标记	append()方法用于在内部添加DOM元素
$("#title").html("<mark>H5是新一代的规范</mark>");	在id为title的元素内部的所有html设置为‘<mark>H5是新一代的规范</mark>’	html()方法用于在元素内部设置html
$("#title").attr("keys","标题"); $("#title").attr("keys");	在id为title的元素内添加一个值为'标题'的属性'keys'；选择id为title的元素的keys属性	attr()方法用于设置元素属性或者获取元素属性
$("#title").removeAttr("keys");	移除id为title的元素的keys属性	removeAttr()方法用于移除元素属性
$("#title").addClass("text-success"); $("#title").removeClass("text-success");	给id为title的元素添加样式类'text-success'；给id为title的元素移除样式类'text-success'；	addClass()和removeClass()分别用于添加、移除样式类
$("#title").css({"color":"red"});	给id为title的元素添加行内样式,设置字体颜色为红色	css()方法用于给目标元素设置行内样式