jQuery-基础

最新推荐文章于 2024-05-12 07:39:34 发布

VIP文章码赛客1024

最新推荐文章于 2024-05-12 07:39:34 发布

阅读量283

点赞数 4

分类专栏： 05-web前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_45691611/article/details/124928221

版权

前提：必须具备 HTML，CSS 和 JavaScript 的基础知识，再来学习jQuery

一、jQuery介绍

jQuery是一个快速、简洁的JavaScript框架（或者叫JS库），jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，简化原生JS冗长的API。
一句话：原生JS能干的活，jQuery都能干，并且做起来更加简单。

二、jQuery下载和安装

官网：https://jquery.com/ 进入官网后点击 download
在这里插入图片描述
选择压缩版下载，区别：压缩版去除了空格等非代码内容，体积更小。

在自己的页面引入即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
	<script>
		console.log($); //能打印出内容，就说明jQuery引入成功
	</script>
</body>
</html>

三、jQuery的页面加载完成事件

//jQuery的页面加载完成事件
$(function (){
   
   alert("加载完成了1...");
});

//js原生页面加载完成事件
window.onload = function(){
   
	alert("加载完成了2...");
}

jQuery的页面加载完成和原生JS页面加载完成的区别:
1.触发时间： jQuery页面加载完成是在浏览器解析完html生成DOM树就会执行。而原生页面加载完成是解析完html后还要等待页面的图片等(静态资源)加载完毕才执行。
2.触发顺序： jQuery页面加载完成先于原生JS页面加载执行。
3.触发次数： jQuery页面加载完成可以执行多次，原生页面加载完成执行1次。

为了操作元素时，一定能获取到元素，所以代码都会写在页面加载完成事件中。

四、jQuery获取元素

jQuery可以像css一样使用选择器来获取页面标签
1.基本选择器

//1.id选择器：$("#id") 匹配一个
<div id="myDiv">这是一个div</div>
var div = $("#myDiv"); //获取id为myDiv的元素

//2.class选择器：$(".class")  匹配多个
<div class="d1">这是一个div1</div>
<div class="d1">这是一个div2</div>
var divs = $(".d1"); 获取class为d1的元素

//3.标签名选择器：$("标签名")  匹配多个
<div>这是一个div1</div>
<div>这是一个div2</div>
var divs = $("div");  //获取页面中的所有div

//4.通配符选择器：$("*")  匹配所有元素
var els = $("*");  //页面中的所有元素都被会获取到

//5.分组选择器：$(选择器1,选择器2,选择器3...)  将多个选择器的结果放在一起返回
<span id="s1">span1</span>
<span class="s2">span2</span>
<span class="s2">span3</span>
var els = $("#s1",".s2");  //获取id为s1和class为s2的元素