JQuary学习之路---初始JQuary

JQuary：

JQuary概述：

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

第一个JQuary项目：

首先在JQuary官网下载JQuary文件：
JQuary官网

jQuery库分开发版和发布版：
在这里插入图片描述
我们用压缩版的就可以，下载完后粘贴到js文件夹中，在html中引入对应的文件

<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
1

第一个JQuary程序

JQuary语法：

$(selector).action()
1

使用JQuary弹出一段话：

<script>
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>
1
2
3
4
5

ready:为页面加载事件绑定方法

$(document).ready()与window.onload类似，但也有区别:
在这里插入图片描述

JQuary选择器：

JQuary的选择器与css中的选择器基本相同：
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
在这里插入图片描述

标签选择器：

<body>
	<div>测试JQuary选择器</div>
	<div class="test1">
		<h1>test1</h1></div>
</body>
<script>
	$("div").css("color", "red");
	$(document).ready(function() {
		alert("我欲奔赴沙场征战jQuery，势必攻克之！");
	});
</script>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

类选择器：

$(".price").css({"background":"#efefef","padding":"5px"});
1

其中的css内容为JSON字符串格式
在这里插入图片描述
其余选择器不再一一列举

jQuery层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素
在这里插入图片描述

jQuery属性选择器

属性选择器通过HTML元素的属性来选择元素
在这里插入图片描述

属性选择器可以根据是否包含某属性来选取元素：

示例：
a标签带有class属性：

$("#news a[class]").css("background","#c9cbcb");
1

在这里插入图片描述

属性选择器可以根据属性的值来选取元素

class属性值为hot

$("#news a[class='hot']").css("background","#c9cbcb");
1

在这里插入图片描述

属性选择器可以指定选取不等于属性是某个特定值的元素

class值不等于hot

$("#news a[class!='hot']").css("background","#c9cbcb");
1

在这里插入图片描述

JQuary基本过滤选择器

相当于css中的nth-child()等来选择第几个：
在这里插入图片描述

JQuary可见性过滤选择器

通过元素显示状态来选取元素
在这里插入图片描述
注意：
选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

小结：

相关阅读:
python基础之面对对象之类和对象
c 语言基础：L1-044 稳赢
没有Istio框架不行？云原生下的四种微服务发现实践
Java使用正则表达式判断独立字符的存在
又欲又撩人,基于新版Bert-vits2V2.0.2音色模型雷电将军八重神子一键推理整合包分享
Camunda BPM架构
2023年09月数据库流行度最新排名
Java语言高级-05异常与多线程-第２节线程实现方式
应用商店优化的好处有哪些？
亿某通电子文档安全管理系统任意文件上传漏洞 CNVD-2023-59471

原文地址：https://blog.csdn.net/qq_57480977/article/details/126487045