jQuery——文字类&使用方式

jQuery是一个高效、精简并且功能丰富的JavaScript工具库。

特点：

  • 它提供的 API 易于使用且兼容众多浏览器

  • HTML 文档遍历和操作

  • HTML事件函数处理，JavaScript特效动画处理

  • HTML DOM遍历和修改

  • Ajax，Utilities 操作更加简单

  • 选择器使用，将大量的属性封装到方法中。

  • jquery中的this是js节点对象，可以使用&（this）进行转换为jqery对象。

  • 在设置jquery中设置css时，驼峰式书写或中横杠书写都可以。

使用网址：https://www.bootcdn.cn/jquery/

在使用jQuery时，会涉及到两个js文件，一个是jquery.js和jquery.min.js

jquery.min.js文件是在生产环境中使用的

  • 生产环境中，会将所有js或HTML代码进行缩减，更改为一行显示，。

  • 通过优化工具，将所有变量并进行减到单一字母。这将导致文件大小缩减近三分之二

jquery.js文件是在开发环境下使用的

  • 开发环境中，所有代码均正常显示，行、段都是正常排列的。

导入：

  • 本地导入方式，

将jQuery文件保存至本地，并以js文件为结尾。导入时，使用文件夹名称和文件名称导入即可。

	<body>
		<div id="box" class="box">xb</div>
		<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			console.log($('.box'))
		</script>
	</body>

连接使用案例：

存至本地后，使用bootstrap进行网页渲染。

  • 互联网导入方式

直接写jQuery互联网中的样式连接，使用时直接连接互联网下载并使用。

	<body>
		<div id="box" class="box">xb</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			console.log($('.box'))
		</script>
	</body>

文档就绪函数：

$(document).ready(function(){

  // jQuery functions go here

});

为了防止文档在完全加载（就绪）之前运行jQuery代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小
posted @ 2022-12-28 15:51  新兵蛋Z  阅读(57)  评论(0)    收藏  举报