jQuery基础入门笔记（详细总结）

热爱编程的申同学

已于 2022-08-21 10:51:30 修改

阅读量3.1k

点赞数 1

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

于 2022-08-12 10:05:14 首次发布

本文链接：https://blog.csdn.net/select_myname/article/details/126297033

版权

前端专栏收录该内容

5 篇文章 10 订阅

订阅专栏

1、什么是jquery？

2、jquery下载安装

2.1、方式一官网下载

2.2、方式二引入谷歌和微软服务器的jQuery

5.4、设置属性attr()和删除属性removeAttr()

5.5、设置属性prop()和删除属性removeProp()

前言：学习jQuery之前，必须先学习HTML+CSS+JS，后学jQuery才会更加简单。

1、什么是jquery？

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 学习很容易。

2、jquery下载安装

jQuery的安装有二种方式，一种就是从官方网站进行下载，这里我提供一个1.8.3版本的jQuery文件，请自行提取。

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩，以后部署服务器用的都是精简版本。

Development version - 用于测试和开发（未压缩，是可读的代码），开发练习使用这个就可以了。

2.1、方式一官网下载

链接：https://pan.baidu.com/s/1p_-XkROq65rSKpPS745HRg
提取码：bs8c

如果不想用这个版本，也可自习到官网下载，这里提供官网地址：Download jQuery | jQuery

下载完之后，把jQuery文件放到项目的js包下

在html中引入jQuery文件，这里使用script标签，src属性填写jQuery文件存放路径。（注意：我这里是js包与html文件是同级关系，所以js前面不用写/）。

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/jquery-1.8.3.js"></script>
</head>

2.2、方式二引入谷歌和微软服务器的jQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它，这里是谷歌服务器里面的jQuery，可以直接引入，不用再下载jQuery文件。

谷歌：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

微软：

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

3、jQuery语法

3.1、元素选择器

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

3.2、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.txt']") 选取所有 href 值以 ".txt" 结尾的元素。

3.3、CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<p id="one">我要变绿</p>
		<p id="two">我要变蓝</p>
		<p id="three">我要变黄</p>
		<button id="green">点我变绿</button>
		<button id="blue">点我变蓝</button>
		<button id="yellow">点我变黄</button>
	</body>
	<script>
		$(document).ready(function(){
			$("#green").click(function(){
				$("#one").css("background-color","green");
			});
			$("#blue").click(function(){
				$("#two").css("background-color","blue");
			});
			$("#yellow").click(function(){
				$("#three").css("background-color","yellow");
			});
		});
	</script>
</html>

3.4、事件函数

事件函数指的是：当按钮的点击事件被触发时会调用一个函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

事件函数	说明
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

3.5、hide()隐藏函数

hide()隐藏函数相当于js中的display:none，指的是让元素隐藏功能。

文档就绪函数

$(document).ready(function(){

  // jQuery functions go here

});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-1.8.3.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			//p标签点击事件函数
			$("p").click(function(){
				//隐藏当前元素
				$(this).hide();
			});
		});
	</script>
	<body>
		<p>点我消失</p>
		<p>点我消失</p>
		<p>点我消失</p>
	</body>
</html>