目录
一、jQuery的基本使用
1.jQuery概念
2.jQuery的顶级对象
(一)jQuery的基本使用
1.jQuery概念
jQuery是一个快速、简洁的JavaScript库。
JavaScript库即library,是一个封装好的特定的集合(方法和函数)。
学习jQuery本质:学习调用这些函数(方法)。
2.jQuery的顶级对象
1.$是jQuery的别称,在代码中可以使用jQuery代替$,一般为了方便,通常直接使用$。
2.$是jQuery的顶级对象,相当于原生JavaScript中window,用$把元素包装成jQuery对象,就能调用jQuery方法。
如下代码所示,div隐藏不显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jq.min.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <script> // $ 相当于 window // 等着dom加载完毕在执行js代码 $(document).ready(function () { $("div").hide() }) </script> <div></div> </body> </html>
复制
特别注意
<script> // js的加载事件 // 只能写一个,后面的会覆盖前面的 window.onload = function () { alert(1) } window.onload = function () { alert(2) } </script>
复制
<script> // jq中的页面加载事件 可以写多个 都会被按顺序执行 $(function () { alert(1) }) $(function () { alert(2) }) </script>
复制
3.jQuery对象和DOM对象
dom对象--使用原生js获取过来的对象
jq对象--使用jq获取过来的对象 通过$进行包装(伪数组的形式存储)
jq的本质是一个数组
var jq={dom对象,dom对象,dom对象....}
在jq中不能使用js的属性和方法,在js中不能使用jq的属性和方法,但 二者之间可以相互转换
1.dom对象 -> jq对象
格式$(dom对象)
2.jq对象转换成dom对象
$对象[索引值]