JQuery 基础使用-CSDN博客

本文链接：https://blog.csdn.net/purple_lumpy/article/details/79186593

JQuery 是javascript 的一个库

它能方便地处理HTML（DOM节点增加删除）、事件、动画等；它可以兼容许多浏览器，不用考虑原生JS 的兼容性问题。

使用JQuery 两种方式

- 下载 JQuery 文件（官网，js文件），在html文件中，通过<script> 中的 src 属性添加

- CDN 内容分发网络，也是在html文件中，通过<script> 中的 src 属性添加

	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>

	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

符号：$

- window.jQuery === window.$

是 jQuery 的全局变量，暴露给用户的 jQuery 方法、变量，都是定义在该变量下的。

$.xxx

$.each(...)

$.noop

$.toArray()

...

是调用jQuery本身的属性和方法

$(xxx)

$("#mydiv")

$(".myClass") --> 是将 dom 对象转换为 jQuery 对象

$(xxx).get(0) --> 是将 jQuery 对象转换为 dom 对象

$(xxx)[0]

...

jQuery 链式语法

例如：

$("#text")
               .text("hello world!")
               .removeClass("red")
               .addClass("blue")
               .css("color","green")

需要注意：

破坏性方法，与还原

<body>
	<div class="dddiv">
		<p>123</p>
		<p class="ppp">123</p>
		<p>123</p>
	</div>

	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(".dddiv")
			.find("p.ppp") // 破坏性方法还有：add, children, filter
			.css('color','red')
			.end() // 结束破坏性方法
			.addClass("bold")
	</script>
</body>

另外，ready 方法：

$(document).ready(function(){...})

上式，用来表示，页面的所有DOM元素加载完后执行一个匿名函数，不会等待图片、视频、音频等加载完；

而 javascript 原生的window.onload，会等所有页面的东西（包括图片、iframe）加载完，才可以执行。