JQuery学习笔记（一）

最新推荐文章于 2025-04-27 14:41:59 发布

骑着蜗牛行天下

最新推荐文章于 2025-04-27 14:41:59 发布

阅读量418

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_45447369/article/details/107460184

版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了jQuery的基本概念，包括其作为JavaScript库的角色，简化DOM操作，事件处理，动画和Ajax的优势。重点讲解了jQuery的代码风格，加载模式，以及如何在原生DOM对象和jQuery对象之间转换。此外，详细阐述了jQuery中的选择器，涵盖常规、进阶、高级和过滤选择器，帮助读者理解并掌握jQuery的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery学习笔记（代码风格，加载模式，原生的DOM对象和JQuery对象的转换，JQuery中的选择器之常规选择器&进阶选择器&高级选择器&过滤选择器）

JQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。

jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点：
1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美异步加载
7.基于 jQuery 大量插件
8.自行扩展功能插件
jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。

jquery入门第一个程序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.我们引入，本地的jQuery服务器 -->
		<!-- <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- 2.可以引用网络上的 -->
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			//jquery.js 他里面有注释，排版样式（空格，换行）文件体积就大一些，我们可以在开发阶段用
			//jquery.min.js 去掉了注释，空格换行全部去掉，文件体积就小一些，适合正式项目使用。
			//1.我们使用jquery 方式1 
			//把jquery的库文件下载到本地采用
			//2.可以在线引用，CDN服务器上的
			//3.前端库/框架，不好之处就是每一种前端库，都有他自己的语法。
			//Java的后台框架，不用学习框架的语法，但是你得学习Java的框架配置使用
			//快速入门 helloworld
			$(function(){
				$('#btn').click(function(){
					alert("hello jquery!");
				})
			});	
		</script>
	</head>
	<body>
		<button id="btn" type="button">点我呀</button>
	</body>
</html>

jQuery代码风格

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：
$(function () {});	//执行一个匿名函数
$(‘#box’);//进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); //执行功能函数
由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：
jQuery(function () {});
jQuery(‘#box’);
jQuery(‘#box’).css(‘color’, ‘red’);
在执行完.css（）这个功能函数之后，最终返回的还是JQuery对象，那么也就是说，JQuery对象的代码模式是采用的连缀模式，可以不停的连续调用功能函数。

加载模式

我们在之前的代码一直使用$(function () {})；这段代码进行首尾包裹，那么为什么必须要包裹这对代码呢？

原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所特有的DOM元素加载完成后，延迟支持DOM操作，否则就无法获取到。在延迟加载，JavaScript提供了一个事件为onload,onload这种方式，是我们原生JS的方式，这种原生方式需要等待页面上的所有图片加载完才会轮到它加载。

window.onload=function(){
$('#btn').css('backgroundColor', 'blue').css('font-size', '50px').css('width', '100px');
}

jQuery也有自己的方式，等待整个文档加载完毕后再去执行，我们就使用jQuery的方式。

jQuery这种加载方式，只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码。

上面这段等待HTML文档加载完毕再去执行的写法，有一个简写形式如果想要把script语句放在上面写，就得把$(function(){});这句代码加上。

$(document).ready(function(){
$('#btn').css('backgroundColor', 'blue').css('font-size', '50px').css('width', '100px');
});

原生的DOM对象和JQuery对象的转换

（1）原生的方式，获取原生DOM对象,JS原生对象，你就用原生对象的属性和方法，不能用jQuery的，不能混用，没有效果。

var btn=document.getElementById("btn");
btn.style.background="blue";
//alert(btn);
//既然是原生的DOM对象，你不能使用jQuery的方法
//btn.css('width','200px');//不能混用方法，没有效果。

（2）jquery的方式，jquery方式获取的元素，你就用jquery的方法和属性，不能用原生JS的属性和功能。

var jqueryObj=$('#btn');
jqueryObj.css('width','100px');
//alert(jqueryObj);
//我们用jquery获取的这个标签元素，你要给他设置样式，你不能用原生的方式来设置，
//jqueryObj

（3）原生的DOM对象，转换成jQuery的对象

var btn2=document.getElementById("btn2");
//alert(btn2);
//你只需要把元素的DOM对象，使用$(原生DOM对象)包裹一下
$(btn2).css('width','100px').css('background-color','red');

（4）把jquery对象转换成原生的DOM对象。使用jquery中的get(索引)

var h1=$('.hh');
//h1.css('background-color','red'); 这是jQuery方式的
var ysh1=h1.get(0);
ysh1.style.backgroundColor='blue';

var ysdiv=$('#div1').get(0);
ysdiv.style.backgroundColor="green";

<button type="button" id="btn">第1个按钮</button>
<button type="button" id="btn2">第2个按钮</button>
<ul>
	<h1 class="hh">aaaaaa</h1>
	<h1 class="hh">bbbbbb</h1>
	<h1 class="hh">cccccc</h1>
	<h1 class="hh">dddddd</h1>
</ul>
<div id="div1">
	divdivdivdivdiv
</div>

JQuery中的选择器

常规选择器

选择器	CSS模式	jQuery模式	描述
标签选择器	div{}	$(‘div’)	获取所有 div 元素的 DOM 对象
ID选择器	#box{}	$(‘#box’)	获取一个 ID 为 box 元素的 DOM 对象
类选择器(class)	.box{}	$(‘.box’)	获取所有 class 为 box 的所有 DOM 对象

$('#div1').css('width','200px');//id选择器
$('.divClass').css('height','80px');//类选择器
$('div[title=abc]').css('background-color','red');//属性选择器
$('div').css('border','1px black solid');//标签选择器

进阶选择器

选择器	CSS模式	jQuery模式	描述
群组选择器	span,em,.box {}	$(‘span,em,.box’)	获取多个选择器的 DOM 对象
后代选择器	ul li a {}	$(‘ul li a’)	获取追溯到的多个 DOM 对象
通配选择器	* {}	$(’*’)	获取所有元素标签的 DOM 对象

高级选择器

选择器	CSS 模式	jQuery 模式	jQuery 等价方法	描述
后代选择器	ul li a {}	$(‘ul li a’)	find(‘p’)	获取追溯到的多个 DOM 对象
子选择器	div > p {}	$(‘div >p’)	children()	只获取子类节点的多个 DOM 对象
next 选择器	div + p {}	$(‘div + p’)	next()	只获取某节点后一个同级 DOM对象
nextAll 选择器	div ~ p {}	$(‘div ~ p’)	nextAll()	获取某节点后面所有同级 DOM对象

$('body').find('ul').find('li').find('a').css('color','green');\\后代选择器
$('div').children('h2').css('color','orange');\\子选择器
$('p').next('h3').css('color','green');\\next选择器，只能选中p标签紧挨着的那个h3标签
$('p').nextAll('h3').css('color','green');\\nextAll选择器，可以选中p标签下面所有的选择器

过滤选择器

过滤器名	jQuery 语法	jQuery对应的方法	说明	返回
:first	$(‘li:first’)	first()	选取第一个元素	单个元素
:last	$(‘li:last’)	last()	选取最后一个元素	单个元素
:eq(index)	$(‘li:eq(2)’)	eq(2)	选择索引(0 开始)等于 index 的元素	单个元素

$('li').first().css('color', 'red');
$('li').last().css('color', 'blue');
$('li').eq(2).css('color','greenyellow');