网页行为查询优化框架jQuery

李幽微

已于 2022-04-26 12:24:48 修改

阅读量141

点赞数

分类专栏： JavaWeb 文章标签： jquery

于 2022-04-26 12:17:13 首次发布

本文链接：https://blog.csdn.net/nangon1234/article/details/124366961

版权

1.jQuery介绍

2.jQuery 的初体验

3.jQuery 核心函数

4.jQuery 对象和 dom 对象区分

4.1 什么是 jQuery 对象，什么是 dom 对象

4.2 问题：jQuery 对象的本质是什么？

4.3 jQuery 对象和 Dom 对象使用区别

4.4 Dom 对象和 jQuery 对象互转

5.jQuery 选择器（*****重点*****）

5.1 基本选择器（****重点****）

5.2 层级选择器（****重点****）

5.3 过滤选择器

6.jQuery 元素筛选

7.jQuery 的属性操作

8.jQuery 练习-选择器练习全选全不选

9.DOM 的增删改

10.jQuery 练习-动态添加、删除表格记录

11.CSS 样式操作

12.jQuery 动画

13.jQuery 事件操作

13.1 jQuery的页面载入（$( function(){} ））与JavaScript的页面载入（window.onload = function(){}）的区别

13.2 jQuery 中其他的事件处理方法

13.3 事件的冒泡

13.4 javaScript 事件对象

1.jQuery介绍

什么是 jQuery ?

        jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

jQuery 核心思想！！！

       它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

jQuery 流行程度

       jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

jQuery 好处！！！

        jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。

2.jQuery 的初体验

需求：使用 jQuery 给一个按钮绑定单击事件。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// window.onload = function () {
		// 	var btnObj = document.getElementById("btnId");
		// 	// alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom对象
		// 	btnObj.onclick = function () {
		// 		alert("js 原生的单击事件");
		// 	}
		// }

		$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
			var $btnObj = $("#btnId"); // 表示按id查询标签对象
			$btnObj.click(function () { // 绑定单击事件
				alert("jQuery 的单击事件");
			});
		});

	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

常见问题

1. 使用不了 jQuery？

答：引入 jQuery 库，jQuery有两个文件，一个为jQuery-xxx.js,另外一个为jQuery-xxx-min.js。前者用于开发，后者用于部署。

2 、 jQuery 中的 $ 到底是什么？

答案：它是一个函数，可以从jQuery源码中查看。

3 、怎么为按钮添加点击响应函数的？

答案：步骤一：使用 jQuery 查询到标签对象

步骤二：使用标签对象.click( function(){} );

3.jQuery 核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数

传入参数为 [ 函数 ] 时：

表示页面加载完成之后。相当于 window.onload = function(){}

传入参数为 [ HTML 字符串 ] 时：

会对我们创建这个 html 标签对象

传入参数为 [ 选择器字符串 ] 时：

$(“#id 属性值 ”);

id 选择器，根据 id 查询标签对象

$(“ 标签名 ”);

标签名选择器，根据指定的标签名查询标签对象

$(“.class 属性值 ”); 类型选择器，可以根据 class 属性查询标签对象

传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象

4.jQuery 对象和 dom 对象区分

4.1 什么是 jQuery 对象，什么是 dom 对象

jQuery对象与dom对象的区别
dom对象	jQuery对象
通过 getElementById() 查询出来的标签对象是 Dom 对象	通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
通过 getElementsByName() 查询出来的标签对象是 Dom 对象	通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
通过 getElementsByTagName() 查询出来的标签对象是 Dom 对象	通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象 Alert 出来的效果是： [object HTML 标签名 Element]	jQuery 对象 Alert 出来的效果是： [object Object]

4.2 问题：jQuery 对象的本质是什么？

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

4.3 jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法

DOM 对象也不能使用 jQuery 对象的属性和方法

最低0.47元/天解锁文章

李幽微

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页行为查询优化框架jQuery

1.jQuery介绍什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有...
复制链接

扫一扫