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可见性过滤选择器

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

小结：

相关阅读:
新手想玩硬件，买单片机还是树莓派好？
csp初赛总结 & 那些年编程走过的坑 & 初高中信竞常考语法算法点
Spring框架(缺SM整合)
ARM 实例代码
[附源码]Python计算机毕业设计Django的高校课程知识库
c++征途 --- 函数提高
AndroidUtil - 强大易用的安卓工具类库
【JavaSE】继承那些事儿
【指针内功修炼】字符指针 + 指针数组 + 数组指针 + 指针参数（一）
[Linux入门]---管理者操作系统

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