JavaScript——jQuery

美式要加冰

已于 2022-03-11 20:31:55 修改

阅读量4.3k

点赞数 10

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

于 2022-03-10 00:12:33 首次发布

本文链接：https://blog.csdn.net/Scccc_/article/details/123368934

版权

8.1 普通元素内容html()（相当于原生innerHTML）

8.2 普通元素文本内容text()（相当于原生innerText）

8.3 表单的值val()（相当于原生value）

一、jQuery概述

1. JavaScript库

即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在库中，封装了很多预先定义好的函数在里面，比如animate，hide，show，获取元素等。

常见JavaScript库：jQuery，prototype，YUI，Dojo，Ext JS，移动端zepto

这些库都是对原生JavaScript的封装，内部都是JavaScript实现的，我们主要学习的是jQuery。

2. jQuery概述

jQuery是一个快速，简洁的JavaScript库，其宗旨是“write less，do more”，即提倡写更少的代码，做更多的事情。

j就是JavaScript，query是查询。就是把JS中DOM操作做了封装，我们可以快速查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery的本质：就是学习调用这些函数。

3. jQuery优点

轻量级。核心文件才即几十kb
跨浏览器兼容。基本兼容主流浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
免费、开源

4. jQuery的入口函数

//（方法1）等dom加载完再去执行js
$(document).ready(function(){
	……
})

// (方法2)等dom加载完再去执行js
$(function(){
	……
})

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，jQuery帮我们实行了封装
相当于原生js中的DOMContentLoad
不同于原生load事件，load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码
更推荐第二种方式

5. jQuery的顶级对象 $

$是jQuery的别称，在代码中jQuery可以代替$，为了方便通常使用$
$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就是可调用jQuery方法了。

6. jQuery对象和DOM对象

用原生JS获取来的对象就是DOM对象
jquery方法获取的元素就是jquery对象
jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

//1.DOM对象：用原生js获取过来的对象就是DOM对象
var myDiv=document.querySelector('div');	//myDiv 是 DOM 对象

//2.jquery对象：用jquery方式获取的对象就是jquery对象。
$('div');	//$('div')是一个jquery对象

//3.jquery对象只能使用jQuery方法，DOM对象只能使用JavaScript属性和方法
myDiv.style.display="none";
//$('div').style.display="none";	$('div')是jQuery对象不能使用元素js方法

DOM对象和jQuery对象之间是可以相互转换的。

因为原生js比jquery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象：$（DOM对象）不加引号
```
$('div')
```

jQuery转换为DOM对象：

$('div')[index]    //index是索引号
$('div').get(index)    //index是索引号

    <body>
		<video src="video/onetap.mp4" muted></video>
		<script type="text/javascript">
			//jQuery对象
			$('video');
			//dom对象
			var myVideo=document.querySelector('video');
			// myVideo.play();
			//jQuery无法使用play方法
			// $('video').play();	//用法错误
			//要将jQuery对象转换为DOM对象，再使用play方法
			$('video')[0].play();
			$('video').get(0).play();
		</script>
	</body>

二、jQuery常用API

1. jQuery选择器

原生js有很多方式，兼容性不同，因此jQuery给我们做了封装，使用获取元素统一标准

$("选择器")    //里面选择器直接写css选择器即可，但是要加引导

1.1 隐式迭代

遍历内部DOM元素（伪数组幸形式存储）的过程就叫做隐式迭代

简单理解：给匹配道德所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作方便我们调用。

	<body>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<ul>
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
		</ul>
	</body>
	<script type="text/javascript">
		console.log($("div"));
		
		//给四个div设置背景颜色，jquery对象不能使用style
		$("div").css("background", "pink");
		
		//隐式迭代把所有元素进行内部循环，
		$("li").css("color", "red");
	</script>

1.2 jQuery筛选选择器

	<body>
		<ul>
			<li>筛选li</li>
			<li>筛选li</li>
			<li>筛选li</li>
			<li>筛选li</li>
			<li>筛选li</li>
		</ul>
		<ol>
			<li>筛选li</li>
			<li>筛选li</li>
			<li>筛选li</li>
			<li>筛选li</li>
			<li>筛选li</li>
		</ol>
	</body>
	<script type="text/javascript">
		$(function() {
			$("ul li:first").css("color", "red");
			$("ul li:eq(2)").css("color", "blue");
			$("ol li:odd").css("color", "yellow");
		})
	</script>

1.3 jQuery筛选方法（重点）

<body>
	<div class="grandfather">
		<div class="father">
			<div class="son"> 儿子</div>
		</div>
	</div>
	<div class="nav">
		<p>我是P</p>
		<div>
			<p>ppp</p>
		</div>
	</div>
	<ol>
		<li>我是ol的li</li>
		<li>我是ol的li</li>
		<li class="item">我是ol的li</li>
		<li>我是ol的li</li>
	</ol>
</body>
<script type="text/javascript">
	$(function() {
		//1.父
		console.log($(".son").parent());
		
		//2.子
		// (1)亲儿子
		console.log($(".nav").children("p").css("color","red"));
		//(2)所有后代
		console.log($(".nav").find("p").css("color","red"));
		
		//3.兄
		$("ol .item").siblings("li").css("color","red");
		
		//4.第n个元素
		// (1)选择器方法
		var index=2;
		$("ol li:eq(2)").css("color","blue");
		$("ol li:eq("+index